Understand ES modules, arrow functions, destructuring, spread/rest, promises, and array methods like map and filter. Most React confusion is really JavaScript confusion.

Learn types, interfaces, generics, and how to type props and state. Modern React codebases are overwhelmingly TypeScript.

Understand that JSX is syntactic sugar for function calls, how expressions embed with braces, and why you return a single root.

Learn how React builds a tree, diffs it, and updates the DOM, so re-renders stop feeling like magic.

Write components as functions that take props and return JSX. Class components are legacy; start with functions.

Pass data down with props and compose components together, including the children prop, instead of building deep inheritance.

Practice breaking a UI into a component tree, deciding where each piece of state and markup belongs.

Manage local component state and understand that setting state schedules a re-render rather than mutating a variable.

Run side effects like data fetching or subscriptions, and understand the dependency array and cleanup function.

Learn why hooks must be called at the top level and only from React functions, and what breaks when you ignore this.

Manage more complex state transitions with a reducer, which scales better than many useState calls.

Memoize expensive computations and stable function references, but only when profiling shows you need them.

Hold mutable values that persist across renders without causing re-renders, and reference DOM nodes directly.

Move reusable stateful logic into a use-prefixed function, so components stay focused on rendering.

Recognize when repeated useEffect or useState patterns should become a shared hook.

Render different UI based on state using ternaries, logical AND, and early returns.

Render arrays with map and give each item a stable key, and understand why index-as-key causes subtle bugs.

Bind input values to state so React is the single source of truth, and handle onChange events.

Learn a library like React Hook Form for validation and performance once forms get large.

Provide and consume shared values (theme, auth, locale) with createContext and useContext.

Understand that context is not a state manager and that overusing it causes wide re-renders.

Learn modern Redux, which needs far less boilerplate, for large apps with complex shared state and predictable updates.

Explore Zustand or Jotai for simpler global state without the Redux ceremony.

Use a data-fetching library to handle caching, revalidation, and loading/error states instead of hand-rolling useEffect fetches.

Learn to separate cached server data from local UI state, which is the insight these libraries are built on.

Add client-side routing, nested routes, and route params for multi-page single-page apps.

Learn the most common React meta-framework for server rendering, file-based routing, and full-stack features.

Explore an alternative meta-framework focused on web standards and data loading.

Use the React Profiler to find real bottlenecks, then apply memoization, code splitting, and lazy loading where they matter.

Write tests with React Testing Library and Vitest, and add end-to-end tests with Playwright for critical flows.

Learn common patterns and anti-patterns, folder structure, and how to keep a growing codebase maintainable.