Key Takeaways
- React treats the UI as a function of state.
- Data flows down; events flow up.
- Hooks — useState, useEffect, useMemo — cover most needs.
- Modern React is heavily influenced by frameworks like Next.js and TanStack.
- Beginners should learn plain React thoroughly before layering frameworks on top.
The Core Mental Model
React components are functions that receive props and return UI. When state changes, React re-runs the function and diffs the result against what is currently on screen. That is the entire mental model.
Everything else — hooks, effects, contexts, refs — is scaffolding around this idea.
The Small Set Of Ideas You Need
- Components and props.
- useState and controlled inputs.
- Conditional rendering and lists with keys.
- useEffect for external side effects.
- Context and lifting state up.
- Data fetching, mutations and caching with a query library.
- Routing with a modern router.
A Realistic Learning Sequence
- Build a static component.
- Add state and events.
- Fetch data from a public API and render it.
- Add a form and mutations.
- Introduce routing and multiple pages.
- Introduce a framework — Next.js, Remix or TanStack Start.
Common Mistakes
- Using useEffect where useMemo or useCallback is enough.
- Placing state too high in the tree.
- Fighting the framework instead of learning its defaults.
- Skipping accessibility fundamentals.
- Adopting every new library that trends on social media.
Final Summary
React rewards a small number of concepts learnt deeply. Master them, ship real projects and treat every new library as optional until you feel the pain it solves.