Export High-Res PDF
Switch to Light Mode
SkillSnap Official GuideUpdated 7/24/2026
React
The library for web and native user interfaces. Master the Rules of Hooks, declarative state, and Server Components for modern web development.
Core Fundamentals
Same props = Same output (Always)Pure Components
Stable, unique IDs (Never use index)key={id}
Fragment (Group without adding DOM nodes)<>...</>
Use children prop over inheritanceComposition
Avoid (Renders 0 if false). Use ternary.bool && <Comp />
Hooks Mastery
Local state. Use functional updates: set(prev => ...)useState
Sync with external systems. Return cleanup function.useEffect
Mutable values that don't trigger re-rendersuseRef
Global data (Theme, Auth). Avoid for high-freq updates.useContext
Complex state logic (State machine pattern)useReducer
Performance Optimization
Skip re-render if props haven't changedReact.memo
Cache expensive calculationsuseMemo
Stable function reference (for child props)useCallback
React.lazy + SuspenseCode Splitting
react-window (For massive lists)Virtualization
Modern Data & State
Server state management (Caching/Refetching)React Query
Client global state (Simpler than Redux)Zustand
Move state to nearest common ancestorLifting State
Calculate from props/state (Don't duplicate)Derived State
Next.js & Server Components
Server Components (Default). No hooks/interactivity.RSC
Opt-in for hooks/browser APIs"use client"
Send UI in chunks via SuspenseStreaming
Server-side rendering for indexabilitySEO
Component Patterns
Extract reusable logic (useAuth, useWindow)Custom Hooks
<Select><Option /></Select> shares stateCompound Components
Catch crashes in component treeError Boundaries
State drives value (Best for validation)Controlled Inputs