Loading…
Loading…
The main React trap: a wrong dependency array on useEffect. Bugs that look like "the component doesn't update".
React relies on immutability to detect changes. Mutation is one of the sneakiest bugs: everything looks right, but the component doesn't re-render.
Wrong keys in lists cause visual glitches, lost state, and "weird" bugs you can never reproduce.
Juniors often wrap everything in useMemo/useCallback "for performance". Usually it slows the code down and makes it harder to read.
A React component renders on every state/props change. If you run expensive operations inside the render body, the UI lags on every keystroke.
A component fetches data but never cancels on unmount or parameter change. Result — a race: the response from an old request overwrites a new one.
React protects against XSS by default, but `dangerouslySetInnerHTML` turns that protection off. One missed sanitization and any user can execute JavaScript in another user's browser.
Passing props through 5 levels of components breaks architecture: any change in structure forces you to walk the whole tree.
The final lesson: recognizing the architectural smell when business logic is tangled with rendering. The most expensive kind of mistake — you can't fix it with a linter, only by refactoring structure.