React Cheat Sheet
Comprehensive React reference covering JSX, hooks, component patterns, Context API, React Router, and TypeScript integration with practical code examples.
📚 Quick Navigation
React Best Practices
🪝 Prefer Function Components
Use function components with hooks — they are simpler, more composable, and the future of React
🔑 Stable Keys in Lists
Always use unique, stable IDs as keys — avoid array indices unless the list is static and never reordered
🧹 Clean Up Effects
Return a cleanup function from useEffect for subscriptions, timers, and async operations to prevent memory leaks
📦 Collocate State
Keep state as close as possible to where it is used — lift state only when genuinely needed by siblings
🧩 Small, Focused Components
Extract components when a chunk of JSX becomes complex or reusable — aim for single responsibility
⚡ Optimize Last
Profile with React DevTools before adding memo/useMemo/useCallback — premature optimization adds complexity without measurable gains