# 🚀 React Hooks & Rendering — A Clear Mental Model (For My Future Self Too)

> Source: <https://dev.to/aroob/react-hooks-rendering-a-clear-mental-model-for-my-future-self-too-4edn>
> Published: 2026-05-23 21:49:55+00:00

🪝What are React Hooks?
Hooks are helpers that let a function component:
remember data
react to changes
🧠 Core React Hooks (WHAT + WHY)
🔹 useState — data that affects the UI
Why it exists:
React re-runs components often. Without state, values would reset every time.
Use when:
The user should see the change.
🔹 useEffect— side work after render
Why it exists:
Some work should happen after the UI is painted, not during it.
Used for:
API calls
timers
🔹useRef — remember without re-render
Why it exists:
Sometimes React needs to remember something without updating the UI.
Two main uses:
DOM access → focus input, scroll, measure
Silent storage → timer IDs, previous values, flags
🔹 useContext — shared/global data
Why it exists:
To avoid passing props through many layers.
Used for:
logged-in user
theme
🔹 useMemo — avoid heavy recalculations
Why it exists:
React re-runs components often → slow calculations can repeat unnecessarily.
Use when:
calculation is expensive
🔹 useCallback — stable functions
Why it exists:
Functions are recreated on every render.
Used mainly when:
passing callbacks to optimized child components
🌍 Rendering Types (WHY they exist)
🔹 CSR — Client Side Rendering
What: Browser builds the UI
Best for: dashboards, internal tools
🔹 SSR — Server Side Rendering
What: Server sends ready HTML
Why: Search engines need content
🔹 SSG — Static Site Generation
What: Page built once at build time
Why: Some content rarely changes
Hope it helps someone else too