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 / Architecture & Performance

State colocation

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

12 min read • Advanced

react-042.tsx

tsx

import { useState } from "react";
function Disclosure(){ const [open,setOpen]=useState(false); return <section><button onClick={()=>setOpen(v=>!v)}>Details</button>{open&&<p>Local state lives with its owner.</p>}</section>; }
export default Disclosure;

What to watch

Content source & attribution

Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

State colocation Mastery Check →

Derived state avoidance