lin
banner
symsys.bsky.social
lin
@symsys.bsky.social
currently doing #100Days of Frontend & Design Engineering 💻
Sharing the most common FE interview questions + answers, follow along!
⚛️ Day 33 #100DaysOfCode #React useLayoutEffect
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
November 12, 2025 at 2:31 AM
⚛️ Day 32 #100DaysOfCode #React useDebounce

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
November 8, 2025 at 1:33 AM
⚛️ Day 31 #100DaysOfCode #React useState vs derive data

💡 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
November 7, 2025 at 1:03 AM
Day 30 #100DaysOfCode #React.memo
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
November 6, 2025 at 2:49 AM
⚛️ Day 29 #100DaysOfCode #React useMemo?

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
November 5, 2025 at 1:47 AM
⚛️ Day 28 #100DaysOfCode #React 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
November 4, 2025 at 1:42 AM
Which one of the usePrevious hook solutions is the idiomatic solution?

Approach 1: useState
Approach 2: useRef

#React #greatfrontend #usePrevious
November 4, 2025 at 1:21 AM
⚛️ Day 27 #100DaysOfCode #React useReducer

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
November 3, 2025 at 12:42 AM
⚛️ Day 26 #100DaysOfCode forms in #React:

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
November 1, 2025 at 2:22 AM
⚛️ Day 25 #100DaysOfCode React State Debug

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
October 30, 2025 at 9:58 PM
Day 24 #100DaysOfCode #React Batching

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
October 29, 2025 at 10:08 PM
Day 23 #100DaysOfCode Why React rerenders 🧠

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
October 29, 2025 at 1:25 AM
Day 20 #100daysOfCode pub/sub

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
October 22, 2025 at 11:51 PM
Day 19 #100daysOfCode Polling

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
October 21, 2025 at 9:32 PM
Day 18 #100daysOfCode Design async counter

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
October 21, 2025 at 12:00 AM
🎉 Growth Wall Celebration flow
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
October 20, 2025 at 10:05 PM
Day 17 #100daysOfCode Async counter

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
October 20, 2025 at 12:10 AM
Day 16 #100daysOfCode Immutability applied

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
October 18, 2025 at 11:39 PM
✨ Growth Wall daily session logger demo

I'm opening a small waitlist: forms.gle/HEzETUKs9bAX...

#buildinpublic
October 17, 2025 at 11:03 PM
✨ Growth Wall onboarding demo
I'm opening a small waitlist: forms.gle/HEzETUKs9bAX...

#buildinpublic
October 17, 2025 at 11:02 PM
Day 15 #100daysOfCode Immutability

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
October 17, 2025 at 10:47 PM
Day 14 #100daysOfCode closure in JS

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
October 16, 2025 at 11:06 PM
Day 13 #100daysOfCode this keyword

‼️‼️‼️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
October 15, 2025 at 10:46 PM
Day 12 #100DaysOfCode Memoize

💡 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
October 14, 2025 at 10:31 PM
Day 11 #100DaysofCode Currying

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 🔥
October 13, 2025 at 9:30 PM