Author | Lightnews

lin @symsys.bsky.social · 1h

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

1

lin @symsys.bsky.social · 1d

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

3

lin @symsys.bsky.social · 1d

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

Approach 1: useState
Approach 2: useRef

#React #greatfrontend #usePrevious

lin @symsys.bsky.social · 2d

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

4

lin @symsys.bsky.social · 4d

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

1

lin @symsys.bsky.social · 4d

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

3

lin @symsys.bsky.social · 4d

@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 🌿

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...

forms.gle

2

lin @symsys.bsky.social · 5d

nice layout

lin @symsys.bsky.social · 5d

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

3

lin @symsys.bsky.social · 5d

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

1 2

lin @symsys.bsky.social · 5d

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?

lin @symsys.bsky.social · 6d

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

5

lin @symsys.bsky.social · 6d

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.

1

lin @symsys.bsky.social · 6d

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

1

lin @symsys.bsky.social · 7d

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

1 7

lin @symsys.bsky.social · 8d

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

codesandbox.io

4

lin @symsys.bsky.social · 8d

Wow, that's amazing. Keep us updated!

1

lin @symsys.bsky.social · 8d

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!

1 1

lin @symsys.bsky.social · 8d

That's awesome! I will check out his channel. I’ve not watched live coding videos before, but they sound like a great complement to the book.

1

lin @symsys.bsky.social · 8d

cool, good to know. It's looking great!

1

lin @symsys.bsky.social · 12d

Nice! I just got a copy of Eloquent JavaScript, too. How do you like it?

1 1

lin @symsys.bsky.social · 12d

lol, that's fun!
What's ISS watcher?

1

lin @symsys.bsky.social · 12d

⚡️ Hoisting
Declarations are “pulled up” before execution

👉var: initialized as undefined (can be accessed before declaration)
👉let / const: live in the temporal dead zone
👉Function declarations: hoisted with definition
👉Function expressions: not callable before declared

1

lin @symsys.bsky.social · 12d

Day 21 #100DaysOfCode Scoping & Hoisting

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👇

1 6

lin @symsys.bsky.social · 12d

Thank you! I've been using JS for many years, and I still have things I don't know, so I will keep it up. You too!

1 1