Read the component.
Then the state and effects behind it.

JSX and components

JSX rules, function components, props, children, and conditional rendering.

Rendering lists

Render arrays, and use a key so reconciliation can track each item.

After JSX and components

Events and state

Handle events, keep useState, and control text, textarea, select, checkbox, and radio inputs.

After Rendering lists

Effects and side effects

useEffect, dependencies, data fetching, cleanup, and the infinite loop from setting state with no array.

After Events and state

Sharing state

Lift state up, then useContext, useRef, a small useReducer, and one custom hook.

After Effects and side effects

Performance

useMemo and useCallback, and when leaving them out is the better patch.

After Sharing state

Routing

React Router routes, links, and URL parameters.

After Performance

Testing components

What makes a component testable, and one test of the Greeting component.

After Routing