codejump
Academy

React

16 pages · about 85 min of reading

  1. 01JSX and the Virtual DOMJSX is sugar for function calls that build plain objects, not templating — and that object tree is the whole reason React can be fast.
  2. 02Reconciliation and Why Keys MatterThe heuristic React uses to decide what to reuse and what to rebuild, and why the wrong key silently attaches state to the wrong row.
  3. 03Controlled vs Uncontrolled ComponentsWhether React state or the DOM itself owns an input value — and the one mistake that flips a field between the two mid-render.
  4. 04Refs and Imperative DOM AccessuseRef is a mutable box that survives re-renders without causing them — the escape hatch for the DOM and for values that are not part of render.
  5. 05How useState Batches and UpdatesWhy the value you read right after calling a setter is still stale, when the updater-function form is required, and how React batches several setState calls into one render.
  6. 06Choosing Between useReducer and useStateuseReducer is useState generalized: a pure reducer plus dispatch instead of a raw setter, and when that trade is worth making.
  7. 07Lifting State Up and Prop DrillingWhy two components that need to stay in sync must share state owned by their closest common ancestor, and when passing that state down several layers becomes a real problem.
  8. 08React Context and When to Use ItContext skips prop drilling for broadly needed values, but every consumer re-renders on any change to it — the cost most people miss until it shows up in a profiler.
  9. 09Dependencies and Cleanup in useEffectAn Effect synchronizes with something outside React. The dependency array says what it reads, not when to run — get that backwards and you get stale values.
  10. 10What useMemo and useCallback MemoizeuseMemo caches a value, useCallback caches a function reference — the same mechanism underneath, aimed at two different bugs.
  11. 11React.memo and Unnecessary Re-rendersA component re-renders whenever its parent does, props unchanged or not — usually fine, and React.memo is the opt-out for when it measurably is not.
  12. 12Writing Custom HooksA custom hook is a plain function that calls other hooks. It shares logic, not state — two components using it get two independent copies.
  13. 13Error BoundariesWhy a render error unmounts the whole tree by default, how a class component catches it, and what it never catches at all.
  14. 14Portals and Rendering Outside the TreeHow createPortal splits DOM position from React-tree position, why modals need it, and where events actually bubble.
  15. 15Compound ComponentsHow Context replaces a giant prop API with a group of components that implicitly share state through composition.
  16. 16Render Props vs Higher-Order ComponentsThe two pre-hooks patterns for sharing behavior between components, their well-known pitfalls, and why a hook replaces both.