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
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
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
A closure happens when an inner function “remembers” variables from its outer scope, even after the outer function has returned.
Two common ways to return a closure 👇
🧩 Function closure → one action
🧱 Object closure → mini private API
#JavaScript #Frontend
A closure happens when an inner function “remembers” variables from its outer scope, even after the outer function has returned.
Two common ways to return a closure 👇
🧩 Function closure → one action
🧱 Object closure → mini private API
#JavaScript #Frontend
‼️‼️‼️this is determined by the call site, not by where the function was defined.
🧩 Simple Call -> fn() -> undefined (strict) or window
🧱 Method Call -> obj.fn() -> obj
🎯 Explicit Bind -> fn.call(obj) / fn.apply(obj) -> obj
🔒 Permanent Bind -> fn.bind(obj) -> obj
‼️‼️‼️this is determined by the call site, not by where the function was defined.
🧩 Simple Call -> fn() -> undefined (strict) or window
🧱 Method Call -> obj.fn() -> obj
🎯 Explicit Bind -> fn.call(obj) / fn.apply(obj) -> obj
🔒 Permanent Bind -> fn.bind(obj) -> obj
💡 Why memoization is important:
– Speeds up heavy computations
– Avoids repeat API calls
– Used in DP, caching, and perf tuning
✅ Caches any # of args
✅ Distinguishes 1 vs '1': use JSON.stringify()
✅ Preserves this
#JavaScript #Frontend #React
💡 Why memoization is important:
– Speeds up heavy computations
– Avoids repeat API calls
– Used in DP, caching, and perf tuning
✅ Caches any # of args
✅ Distinguishes 1 vs '1': use JSON.stringify()
✅ Preserves this
#JavaScript #Frontend #React
Currying = turning f(a,b,c) -> f(a)(b)(c)
✅ Return a new fn until you’ve got enough args
✅ Use closures to remember previous args
✅ Call func.apply(this, allArgs) when ready
✅ Works with any split: f(1)(2)(3) or f(1,2)(3)
It’s closures + recursion + arity check 🔥
Currying = turning f(a,b,c) -> f(a)(b)(c)
✅ Return a new fn until you’ve got enough args
✅ Use closures to remember previous args
✅ Call func.apply(this, allArgs) when ready
✅ Works with any split: f(1)(2)(3) or f(1,2)(3)
It’s closures + recursion + arity check 🔥