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 / Forms & Composition

Lifting state up

Learn Lifting state up in React with a dedicated explanation, a concept-specific example, a production caution, and a mastery check.

12 min read • Intermediate

react-028.tsx

tsx

import { useState } from "react";
function Celsius({value,onChange}){return <input value={value} onChange={e=>onChange(e.target.value)}/>};
export default function App(){const [c,setC]=useState("20");return <><Celsius value={c} onChange={setC}/><p>{c}°C</p></>}

What to watch

Content source & attribution

Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Lifting state up Mastery Check →

Form submission