lin

⚛️ Day 38 #100DaysOfCode Infinite Scroll Part 1

One of the hardest parts of solving a problem is not getting overwhelmed by all the subproblems I haven’t solved yet.

So today I focused on an MVP:
set up the state
wire the async fetch
render the items

Scroll detection is next. 💪

⚛️ Day 37 #100DaysOfCode Optimistic UI

At a high level:

Optimistic UI = let the frontend lead.
Update the UI immediately, then ask the server for confirmation.
If the server says “no”, roll back.

Trust user intent, let the UI move first, and clean up if the server disagrees.

⚛️ Day 36 #100DaysOfCode #React Suspense
Suspense is React’s built-in way to pause rendering when something isn’t ready and automatically show a fallback UI.

Why use it?
👉 Cleaner code
👉 Works with lazy components, streaming, and data fetching
👉 Makes async boundaries explicit and reliable

⚛️ Day 35 #100DaysOfCode #React Error Boundaries

If you want a shared fallback UI for API failures, you need to surface the error back into the render phase.

Pattern:
1️⃣ catch async error
2️⃣ store it in state
3️⃣ throw it during render → ErrorBoundary can now catch it

⚛️ Day 34 #100DaysOfCode #React has 2 phases

1️⃣ Render Phase = calculate UI
React runs your component + pure hooks
Builds + diffs the virtual DOM
❌ No DOM, no effects

2️⃣ Commit Phase = apply UI
React updates the DOM, then runs:
➡️ useLayoutEffect (before paint)
➡️ useEffect (after paint)

#frontend

⚛️ 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

⚛️ 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

⚛️ 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

Cool, so each slice has its own actions to manage state changes, and the reducer just combines them back into the store?

how are slices used in your app?

that's way more fun than a rubber duck :3

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

⚛️ 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

⚛️ 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

Which one of the usePrevious hook solutions is the idiomatic solution?

Approach 1: useState
Approach 2: useRef

#React #greatfrontend #usePrevious

⚛️ 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

what are you working on? love to see what you're building

⚛️ 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

Entrepreneurs Challenge 🚀 Cofounder Application Current application demo: https://x.com/linzhangcs/status/1982898774851891608 Once accepted, the Entrepreneurs Challenge program provides how-to workshops, hands-on boot camps, 1:1 coaching—all design...

@buildinginpublic.bsky.social

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 🌿

nice layout

⚛️ 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

Just saw this, I guess you like EmberJS? I have not used it. I will check it out.

It's good that you have a clear preference. I don't know if I like React. It has the largest support system, that is all.
What's your favorite frontend library/framework?

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

That’s where React really shines. It takes care of the messy DOM updates for you and keeps the UI declaratively tied to your data, so you can focus on what the UI should look like, not how to update it every time something changes.

You’re right that JavaScript already gives you solid tools for managing data and behavior.
The tricky part, especially as apps got bigger, wasn’t managing the state itself. It was keeping the UI in sync with that state. DOM API doesn't have a built-in way to automatically reflect those state changes

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

Day 22 #100DaysOfCode React useState vs useRef

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

Wow, that's amazing. Keep us updated!

I’m learning JavaScript because I want to become an engineer and build my own products. It’s not easy! I’ve been learning and using it for the past 7–8 years, and it takes time!