React

Overview

Hooks, rendering, and the mental model for React.

JSX Components

onEvent

useState

useEffect

useRef

useContext

useReducer

useLayoutEffect

useSyncExternalStore

useEffectEvent

useDeferredValue

useMemo / useCallback

useTransition

useOptimistic

React.Suspense

Server Components

useRef

A hook that returns a mutable ref object whose .current property is initialized to the passed argument. The ref object persists for the full lifetime of the component — changes to it do not trigger a re-render.

React rendering flow (overview)

React Data Flow Patterns

What is JSX?

Conditional Rendering

From Component to React Element to DOM

useState

useEffect

Challenge: Counter

Challenge: Todo List

Component Conventions

`props.children` Patterns

Destructuring and Spread

Re-render, reconciliation, and commit

Todo List Walkthrough — Overview

Use Effect

Setup

Rendering a Static List

Holding the List in State

Extracting `<Todo />`

Adding Todos

Toggling "Completed"

Deleting a Todo

Editing a Todo

Recap

useState

useEffect

useRef

createContext / useContext

useReducer

useMemo / useCallback

useSyncExternalStore

useLayoutEffect

useEffectEvent / stable “latest” callback

Custom hook