✳flâneur — a map of the web's best reading

State as a Snapshot – React

react.dev · 2,096 words · saved by 2 readers

State variables might look like regular JavaScript variables that you can read and write to. However, state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. You might think of your user interface as changing directly in response to the user event like a click. In React, it works a little differently from this mental model. On the previous page, you saw that setting state requests a re-render from React. This means that for an interface to react to the event, you need to update the state. In this example, when you press “send”, setIsSent(true) tells React to re-render the UI: Here’s what happens when you click the button: Let’s take a closer look at the relationship between state and rendering. “Rendering” means that React is calling your component, which is a function. The JSX you return from that function is like a snapshot of the UI in time. Its props, event handlers, and local variables were all calculate

Learn React Adding Interactivity Copy page Copy State as a Snapshot State variables might look like regular JavaScript variables that you can read and write to. However, state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. You will learn How setting state triggers re-renders When and how state updates Why state does not update immediately after you set it How event handlers access a “snapshot” of the state Setting state triggers renders You might think of your user interface as changing directly in response to the

Explore this link on the map →

saved by

related reading