React Guide: Components, Hooks, State and Performance
React is easy to start and easy to get subtly wrong. This guide follows the React in Depth series: how rendering really works first, then effects, hooks, forms and data, then performance, patterns and testing.
Every example was run with React 19, and the interview lesson collects the traps people fall into.
Who it is for: Front-end and full-stack developers learning React, and candidates preparing for React interviews.
12 lessons · Published by Jainik · Last updated
1. Components and rendering
- 1. React in Depth · 12 minThinking in React: Components, Props and JSX
What React is, how JSX becomes function calls, components as functions, props, and the one-way data flow.
- 2. React in Depth · 15 minState and Rendering: What Really Happens When State Changes
State, re-renders, batching, how React compares trees, keys, and the render-then-commit steps, with a traced example.
2. Effects, hooks and forms
- 3. React in Depth · 15 minEffects and the Lifecycle: useEffect Without the Confusion
What an effect is, dependencies, cleanup, why effects run twice in development, and when you do not need an effect.
- 4. React in Depth · 16 minHooks in Depth: useRef, useMemo, useCallback, useReducer and Custom Hooks
Each hook with one small reason to use it, the rules of hooks and why they exist, and how to write a custom hook.
- 5. React in Depth · 14 minForms, Events and Controlled Inputs
Controlled and uncontrolled inputs, form actions and useActionState in React 19, validation, and accessibility basics.
3. Data and shared state
- 6. React in Depth · 15 minData Fetching, Caching and Server State
fetch in effects and its bugs, race conditions, loading and error states, TanStack Query ideas, and Suspense with use().
- 7. React in Depth · 14 minContext, State Management and Choosing Where State Lives
Lifting state, context and its re-render cost, reducers, Zustand and Redux Toolkit at a glance, and a simple decision table.
4. Performance, patterns and tests
- 8. React in Depth · 16 minPerformance: Memoization, Lists, Code Splitting and the React Compiler
Find slow renders with the Profiler, memo, virtualised lists, lazy loading, transitions, and what the React Compiler changes.
- 9. React in Depth · 16 minPatterns, Server Components and Testing React
Composition patterns, error boundaries, portals, Server and Client Components in plain words, and testing with Testing Library.
- 10. TypeScript From Zero · 25 minModules, Declaration Files and tsconfig in Real Projects
ES modules versus CommonJS, moduleResolution, paths, .d.ts files, @types, project references, and tsconfig for Node, Vite and Next.js.
5. Interview practice
- 11. React in Depth · 18 minReact Interview Questions With Model Answers
The questions asked at every level: rendering, keys, hooks, state, performance, and the traps, with first-person answers.
- 12. Senior Frontend Depth · 18 minReact Rendering Model: Render, Commit, Reconciliation and Keys
What “render” really means, how React finds what changed between renders, why keys matter and how batching works.
More reading orders are on the guides page, and every series is listed on the home page.