react.dev favicon

Updating Arrays in State – React

Updating Arrays in State – React

#3
60
Public whispers
7
Contributors
2026-07-15 09:18:00
First whispered

Discussion activity

Public whispers on react.dev over the last 17 weeks

9 active days
Less
More

Recent public whispers

RSS
Text Highlight2026-07-28 15:41:53
Original Highlight Excerpt
"you shouldn’t change objects and arrays that you hold in the React state directly."
Whisper Note
Wait, so I have to copy the whole array just to tweak one item? That feels wasteful but okay.
Text Highlight2026-07-28 13:06:18
Original Highlight Excerpt
"Every time your component renders, React will update the screen and then run the code inside useEffect."
Whisper Note
Unless you pass deps, right? Then it only runs when those change, not every render.
Text Highlight2026-07-28 12:57:18
Original Highlight Excerpt
"Every time your component renders, React will update the screen and then run the code inside useEffect."
Whisper Note
So the effect always runs after paint, not before? That's good to know for layout stuff.
Text Highlight2026-07-28 12:38:53
Original Highlight Excerpt
"Setting it does not change the state variable you already have, but instead triggers a re-render."
Whisper Note
So it's like a photo, not a live video? Kinda makes sense but still weird.
Text Highlight2026-07-28 12:29:53
Original Highlight Excerpt
"Setting it does not change the state variable you already have, but instead triggers a re-render."
Whisper Note
That's why my console.log always shows the old value right after setState, took me a while to get it.
Text Highlight2026-07-28 10:03:18
Original Highlight Excerpt
"Effects let you specify side effects that are caused by rendering itself, rather than by a particular event."
Whisper Note
I remember debugging a chat app where I put the connection in an event—big mistake.
Text Highlight2026-07-28 09:54:18
Original Highlight Excerpt
"Effects let you specify side effects that are caused by rendering itself, rather than by a particular event."
Whisper Note
Hmm, but doesn't that mean effects run on every render? Seems wasteful.
Text Highlight2026-07-28 09:45:18
Original Highlight Excerpt
"Effects let you specify side effects that are caused by rendering itself, rather than by a particular event."
Whisper Note
This finally makes the event vs effect distinction click for me.
Text Highlight2026-07-28 09:35:53
Original Highlight Excerpt
"In React, data that changes over time is called state."
Whisper Note
reminds me of variables but with superpowers, nice explanation actually
Text Highlight2026-07-28 09:26:53
Original Highlight Excerpt
"In React, data that changes over time is called state."
Whisper Note
i always thought state was only for forms, good to know it's broader
Text Highlight2026-07-28 09:17:53
Original Highlight Excerpt
"In React, data that changes over time is called state."
Whisper Note
so basically state is just a fancy word for stuff that changes lol
Text Highlight2026-07-27 13:06:13
Original Highlight Excerpt
"Functions passed to event handlers must be passed, not called."
Whisper Note
Makes sense, otherwise it runs immediately. I learned this the hard way too.
Text Highlight2026-07-27 12:57:13
Original Highlight Excerpt
"Functions passed to event handlers must be passed, not called."
Whisper Note
Wait so I can't just do onClick={handleClick()}? That's been breaking my app for days, oops.
Text Highlight2026-07-27 12:38:48
Original Highlight Excerpt
"By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs"
Whisper Note
I've been burned by impure components before, this advice is gold.
Text Highlight2026-07-27 12:29:48
Original Highlight Excerpt
"By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs"
Whisper Note
Yeah but pure functions are hard when you need random values or time.
Text Highlight2026-07-27 10:03:13
Original Highlight Excerpt
"Event handlers are your own functions that will be triggered in response to interactions"
Whisper Note
But how do preventDefault and stopPropagation fit in here?
Text Highlight2026-07-27 09:54:13
Original Highlight Excerpt
"Event handlers are your own functions that will be triggered in response to interactions"
Whisper Note
This is why React feels so natural once you get the hang of it.
Text Highlight2026-07-27 09:45:13
Original Highlight Excerpt
"Event handlers are your own functions that will be triggered in response to interactions"
Whisper Note
So basically it's just callbacks, but they make it sound fancy.
Text Highlight2026-07-27 09:35:48
Original Highlight Excerpt
"UI is built from small units like buttons, text, and images."
Whisper Note
I always forget that even a whole page is just a bunch of tiny pieces.
Text Highlight2026-07-27 09:26:48
Original Highlight Excerpt
"UI is built from small units like buttons, text, and images."
Whisper Note
Sounds obvious, but it's the foundation of everything in React.

See what people are saying on react.dev

Install DomWhisper to view live whispers as you browse, and join the discussion.

Get the extension