Sharing the most common FE interview questions + answers, follow along!
React’s render cycle 👇
useLayoutEffect → paint →useEffect
🧠 useEffect:
Non-visual side effects, things the user won't see: data, timers, logging
🎨 useLayoutEffect:
Visual sync, things that affect what’s painted: size, position, layout
React’s render cycle 👇
useLayoutEffect → paint →useEffect
🧠 useEffect:
Non-visual side effects, things the user won't see: data, timers, logging
🎨 useLayoutEffect:
Visual sync, things that affect what’s painted: size, position, layout
Typing triggers onChange instantly ⚡️
But you don’t always want instant reactions, like spamming an API with every keystroke.
💡 Debounce = “wait until the user stops doing something.”
🐢 useDebounce slows down chaos → creates calm
#frontenddevelopers
Typing triggers onChange instantly ⚡️
But you don’t always want instant reactions, like spamming an API with every keystroke.
💡 Debounce = “wait until the user stops doing something.”
🐢 useDebounce slows down chaos → creates calm
#frontenddevelopers
💡 Rule of thumb
✅ can be recalculated from props or other state → derive it
⚙️ depends on user input or async data → store it
🧘 “If you can derive it, don’t store it.”
#frontenddevelopers
💡 Rule of thumb
✅ can be recalculated from props or other state → derive it
⚙️ depends on user input or async data → store it
🧘 “If you can derive it, don’t store it.”
#frontenddevelopers
React.memo tells React:
“If the props didn’t change, skip re-rendering this component.”
When the parent re-renders
🧠 React checks: did props change?
✅ If no → reuse the last rendered output
❌ If yes → re-render normally
watch demo with 🔊
#frontend
React.memo tells React:
“If the props didn’t change, skip re-rendering this component.”
When the parent re-renders
🧠 React checks: did props change?
✅ If no → reuse the last rendered output
❌ If yes → re-render normally
watch demo with 🔊
#frontend
useMemo stops unnecessary recalculations when inputs haven’t changed
✅ Caches the last computed value
✅ Reuses it if deps stay the same
✅ Prevents re-creating arrays/objects that trigger re-renders
Watch the demo 👇 with sound on 🔊
#frontend
useMemo stops unnecessary recalculations when inputs haven’t changed
✅ Caches the last computed value
✅ Reuses it if deps stay the same
✅ Prevents re-creating arrays/objects that trigger re-renders
Watch the demo 👇 with sound on 🔊
#frontend
React re-renders, use 🧠 usePrevious to remember the last render’s value
✅ Stores the last committed value
✅ Doesn’t cause extra renders
✅ Built on useRef + useEffect timing (runs after paint)
💡React values are snapshots per render
#frontend #usePrevious
React re-renders, use 🧠 usePrevious to remember the last render’s value
✅ Stores the last committed value
✅ Doesn’t cause extra renders
✅ Built on useRef + useEffect timing (runs after paint)
💡React values are snapshots per render
#frontend #usePrevious
Approach 1: useState
Approach 2: useRef
#React #greatfrontend #usePrevious
Approach 1: useState
Approach 2: useRef
#React #greatfrontend #usePrevious
When your state logic starts branching, use useReducer → keeps updates centralized & predictable:
✅ Puts all state transitions in one place
✅ Easier to test & debug centralized
✅ Pairs great with Context
#FrontendDev
When your state logic starts branching, use useReducer → keeps updates centralized & predictable:
✅ Puts all state transitions in one place
✅ Easier to test & debug centralized
✅ Pairs great with Context
#FrontendDev
1⃣Controlled = value in state → predictable UI, validation, derived rules
2⃣Uncontrolled = DOM owns value (via ref) → minimal rerenders, large forms/3rd-party
👍Rule of thumb: default to controlled; use uncontrolled when only read on submit or need perf
1⃣Controlled = value in state → predictable UI, validation, derived rules
2⃣Uncontrolled = DOM owns value (via ref) → minimal rerenders, large forms/3rd-party
👍Rule of thumb: default to controlled; use uncontrolled when only read on submit or need perf
Looking for a cofounder for $75,000 funding! 🚀
apply here👉 forms.gle/hFLpb5mTMtf1...
Building an adaptive productivity app, DM if you want to know more
I’m product + frontend (Next.js/React/AI)
You: biz ops, community building, or backend/AI mind 🌿
Looking for a cofounder for $75,000 funding! 🚀
apply here👉 forms.gle/hFLpb5mTMtf1...
Building an adaptive productivity app, DM if you want to know more
I’m product + frontend (Next.js/React/AI)
You: biz ops, community building, or backend/AI mind 🌿
You console.log state right after setState inside your handler to see the change, and it's still the old value? 🤔
✅ ways to confirm the update:
👉 Show it directly in the UI
👉 Log it inside a useEffect that depends on that state
#React #frontend
You console.log state right after setState inside your handler to see the change, and it's still the old value? 🤔
✅ ways to confirm the update:
👉 Show it directly in the UI
👉 Log it inside a useEffect that depends on that state
#React #frontend
React doesn’t update state right away
🧩 It batches multiple updates→ runs one render → one DOM commit
setState feels delayed because React:
👉Defers updates until the current function exits
👉Avoids extra re-renders
👉Updates the DOM after reconciling all changes
React doesn’t update state right away
🧩 It batches multiple updates→ runs one render → one DOM commit
setState feels delayed because React:
👉Defers updates until the current function exits
👉Avoids extra re-renders
👉Updates the DOM after reconciling all changes
React rerenders when reactive data changes:
state or props.
Too many re-renders? ⚡
Issue with non-UI data in useState.
🔹 Use useState for UI: state and props
🔹 Use useRef for internal tracking: timers, previous values, or DOM refs
#react #frontend
React rerenders when reactive data changes:
state or props.
Too many re-renders? ⚡
Issue with non-UI data in useState.
🔹 Use useState for UI: state and props
🔹 Use useRef for internal tracking: timers, previous values, or DOM refs
#react #frontend
In React, the real mental unlock is this:
🧩 Reactive data vs Non-reactive data
useState → triggers re-render when changed
useRef → persists data, but React doesn’t care
codesandbox.io/p/sandbox/4y...
#frontend #react
In React, the real mental unlock is this:
🧩 Reactive data vs Non-reactive data
useState → triggers re-render when changed
useRef → persists data, but React doesn’t care
codesandbox.io/p/sandbox/4y...
#frontend #react
Why does it matter?
Because you can predict variable visibility at any line 👀
🧭 Three scopes in JavaScript
Global: lives in window, accessible everywhere
Function: variables exist only inside that function
Block: limited to { } (loops, ifs, etc)
thread👇
Why does it matter?
Because you can predict variable visibility at any line 👀
🧭 Three scopes in JavaScript
Global: lives in window, accessible everywhere
Function: variables exist only inside that function
Block: limited to { } (loops, ifs, etc)
thread👇
Polling works for getting live updates for async tasks, but it’s like asking “are we there yet?” every 200ms. 😅
There’s a cleaner way, pub/sub
✅ Instant updates, no delay between change & UI
✅ Zero CPU when idle
✅ Scales better when you have many listeners
#frontend
Polling works for getting live updates for async tasks, but it’s like asking “are we there yet?” every 200ms. 😅
There’s a cleaner way, pub/sub
✅ Instant updates, no delay between change & UI
✅ Zero CPU when idle
✅ Scales better when you have many listeners
#frontend
To check the status of an async task, the quickest trick is polling
🌀 Polling = repeatedly checking a value until it changes
Why use it:
✅ Simple to implement
✅ Works anywhere — Node, browser, CLI
✅ Quick progress checks or lightweight UI updates
✅ Easy to swap out
To check the status of an async task, the quickest trick is polling
🌀 Polling = repeatedly checking a value until it changes
Why use it:
✅ Simple to implement
✅ Works anywhere — Node, browser, CLI
✅ Quick progress checks or lightweight UI updates
✅ Easy to swap out
Implementation on day 17 takes a list of promises.
Run once. Logs. Then dies ☠️
A better design would be to return a controller
1️⃣ asyncCounter(promises) → passive utility
2️⃣ counter.run(task) → active manager
3️⃣ One-shot → long-lived
4️⃣ Inputs → API calls
Implementation on day 17 takes a list of promises.
Run once. Logs. Then dies ☠️
A better design would be to return a controller
1️⃣ asyncCounter(promises) → passive utility
2️⃣ counter.run(task) → active manager
3️⃣ One-shot → long-lived
4️⃣ Inputs → API calls
Growth Wall helps you design personal growth challenges🌱
I hope this celebration shows enough confetti to express the wonderful feeling of accomplishing a goal 😄✨
Is this enough confetti? LMK 🥳
Join the waitlist 👇
forms.gle/ys8EYKDueKnV...
#buildinginpublic
Growth Wall helps you design personal growth challenges🌱
I hope this celebration shows enough confetti to express the wonderful feeling of accomplishing a goal 😄✨
Is this enough confetti? LMK 🥳
Join the waitlist 👇
forms.gle/ys8EYKDueKnV...
#buildinginpublic
Async counter, tracks how many async calls are completed
This teaches 3 big things:
1️⃣ Promises don’t resolve in order
2️⃣ .finally() runs when a promise settles, not when you await.
3️⃣ You can’t return live async state. You must react to it! ⚡️
#frontenddev
Async counter, tracks how many async calls are completed
This teaches 3 big things:
1️⃣ Promises don’t resolve in order
2️⃣ .finally() runs when a promise settles, not when you await.
3️⃣ You can’t return live async state. You must react to it! ⚡️
#frontenddev
Immutability isn’t just a theory. It is used to update data safely without mutation.
Common use cases 👇
1. update an object
2. array operations: .map, .filter, .reduce, .slice, etc
3. flag toggle
#JavaScript #Frontend #coding
Immutability isn’t just a theory. It is used to update data safely without mutation.
Common use cases 👇
1. update an object
2. array operations: .map, .filter, .reduce, .slice, etc
3. flag toggle
#JavaScript #Frontend #coding
I'm opening a small waitlist: forms.gle/HEzETUKs9bAX...
#buildinpublic
I'm opening a small waitlist: forms.gle/HEzETUKs9bAX...
#buildinpublic
Immutability: don’t change the original object. Make a copy, update the copy, and return it!
Why it matters:
👉 Keeps data predictable
🔍 Makes every change explicit and traceable: easier debugging
🛡️ Prevents accidental side effects
#javascript #frontend
Immutability: don’t change the original object. Make a copy, update the copy, and return it!
Why it matters:
👉 Keeps data predictable
🔍 Makes every change explicit and traceable: easier debugging
🛡️ Prevents accidental side effects
#javascript #frontend
✨ Smart onboarding
💬 Daily session logger: mood + task + reflection
📈 Growth journey
I'm opening a small waitlist: forms.gle/HEzETUKs9bAX...
#buildinpublic
✨ Smart onboarding
💬 Daily session logger: mood + task + reflection
📈 Growth journey
I'm opening a small waitlist: forms.gle/HEzETUKs9bAX...
#buildinpublic