React Rendering Simplified

This will be a blunt and brutal condensing of React rendering down to a few of its important attributes.

Everything is constant.

I’m ignoring refs for now. They’re a useful wrinkle but get in the way of the basic understanding. From the start of the main function to the end, nothing changes. Properties and state should be treated as unchanging, from top to bottom. If you need different values in the current run, create new constants to derive the values you need.

Setting state doesn’t change that fact. Calling useState's setter doesn't change the value in the current run of the main function. The function goes all the way to the bottom with the old value.

What the setter does is tell React to rerun the entire component again, top to bottom, with the new value. The values will be constant again…but with updated values.

Components don’t create output.

They create instructions on what the output should be. It can be really easy to mistake the JSX for the final product because it looks like HTML. But what a component really does is output instructions to React. It tells React to call other components and eventually create HTML, but you’re not actually creating HTML inside the component. You’re creating React elements.

Why does this matter? It makes more sense as to why you can’t access the DOM in your main component function. The main component function isn’t building the DOM, it’s telling React how to build the DOM. There’s no DOM yet. This leads me to the next one.

If you need to do something with the browser, do it in an effect or an event handler.

React starts at the top of your app, trickling all the way down, collecting all of the outputs from your components. Then it figures out what needs to change, and finally updates the HTML to reflect how your app should be updated.

When React runs effects, it’s basically saying, “Okay, the web page is ready for you to manipulate.” By doing DOM access and manipulation in your effects, you’re making sure that you’re acting on the latest code in the browser. If you need to change something in an event listener, that’s totally legit, too. Event listeners are tied directly to the DOM, and when they fire, they fire against the web page. React is done rendering by the time those fire.

That’s the basics. There’s more, having to do with ways to manage state and effect dependencies, but hopefully, this helps thinking about how React renders and uses state and props.

More content at plainenglish.io