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

Arooba Zaman — Sat, 23 May 2026 21:49:55 +0000

🪝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

Publishing a reusable React UI package as an npm module

Arooba Zaman — Sat, 23 May 2026 21:45:53 +0000

Publishing a reusable React UI package as an npm module is one of the easiest ways to maintain consistency across multiple apps.

Here’s a simple workflow that works well:

1) Structure your package properly
Keep a clean setup like:

src/ → components + exports
dist/ → compiled build output
index.ts → single entry for exports

2) Build it in a production-ready way
Before publishing, generate:

ESM build (.mjs)
CommonJS build (.js)
TypeScript types (.d.ts)

Example build command:

npm run build

3) Publish it to GitHub Packages
Setup your registry in .npmrc:

@your-scope:registry=https://npm.pkg.github.com
//https://lnkd.in/dcqNXmcg

Then publish:

npm publish

4) Use beta prereleases for safe testing**
This is the cleanest way to share updates early without breaking stable users.

npm version prerelease --preid=beta
npm publish --tag beta

✅ Stable users keep installing latest
✅ Test users install beta builds
✅ You can iterate faster without risk

This release pattern is simple, scalable, and keeps upgrades controlled.

DEV Community: Arooba Zaman

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

Publishing a reusable React UI package as an npm module