React Fundamentals: Components, Hooks, and the Virtual DOM

Common Mistakes Worth Remembering

• Reading state directly in rapid successive updates instead of using the functional updater form (setCount(c => c + 1)).
• An effect with a stale closure because a value it reads isn't in its dependency array — or worse, silencing the linter warning about it instead of fixing the actual bug.
• Mutating state directly (items.push(x), user.name = "x") instead of creating a new array/object — React compares references to decide whether to re-render, so an in-place mutation looks unchanged to it and silently fails to trigger a re-render.
• Missing key props on list items, or using the array index as a key for a list that can reorder or have items removed from the middle — causes state to leak between the wrong rows, not just a visual glitch.
• Calling a hook conditionally, or inside a loop — violates the Rules of Hooks and shifts every subsequent hook's slot.
• Reaching for useMemo/useCallback/React.memo everywhere by default, on renders that were never actually slow — the dependency array itself has to stay correct forever, which is its own maintenance cost.
• One giant Context holding unrelated state, re-rendering every consumer whenever any one piece of it changes.

TypeScript is what most real React codebases are actually written in today — see TypeScript Fundamentals for the type-system side of the same ecosystem. Practice these exact patterns — state, effects, and closures — as runnable exercises in the code lab.