Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →

menu_book Course Curriculum (React) expand_more

Components & JSX

JSX expressions Fragments Components Props Children Conditional rendering List rendering and keys Event handlers

State & Hooks

useState Functional state updates useReducer useRef useId useMemo useCallback Custom hooks

Effects & External Systems

useEffect Effect cleanup Effect dependencies useLayoutEffect useSyncExternalStore Fetching in effects Race-condition cancellation Strict Mode effect behavior

Forms & Composition

Controlled inputs Uncontrolled inputs Form submission Lifting state up Context useContext forwardRef compatibility patterns Portals

Concurrent React

startTransition useTransition useDeferredValue Suspense lazy Error boundaries use action state Optimistic UI

Architecture & Performance

React.memo State colocation Derived state avoidance Reducer architecture Component composition Code splitting Profiler Server/client boundary concepts

React / State & Hooks

Custom hooks

Learn Custom hooks in React with a dedicated explanation, a concept-specific example, a production caution, and a mastery check.

12 min read • Beginner

react-016.tsx

tsx

import { useState } from "react";
function useToggle(initial=false){ const [on,setOn]=useState(initial); return [on,()=>setOn(v=>!v)]; }
export default function App(){ const [open,toggle]=useToggle(); return <button onClick={toggle}>{open?"Open":"Closed"}</button>; }

What to watch

Content source & attribution

Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Custom hooks Mastery Check →