Every Render has its own everything

Every Render has its own everything

React under the hood

Listen to this article

This article mainly focuses on the people who have just started learning a thing or two about React and have the basic knowledge of state and props and how useState, useEffect works. In this blog, I would try to make you understand how does React really works under the hood and what exactly happens on each render and re-render.

Every Render has its own props and states

Let's take a look at this simple counter app.

Quick question: What do you think really happens when we click the Add 1 button, how does the value of the countValue state change?

So, if you are thinking that setCountValue is just a simple setter function which just changes or mutates the value of countValue whenever the IncCountValue event handler gets called. Then let me tell you this is a wrong mental model to have, it works to make you understand the working of useState as a beginner, but that's not what actually happens.

Whenever we call the setter function provided by useState (i.e setCountValue), the whole Component function (i.e Counter) is called again with the new updated value of the state (i.e countValue) and gets rendered on the screen.

New-Gif

On the initial render, useState will take the value 0 and call the Counter component with countValue=0.

const Counter = () => {
  const countValue = 0;
  ...
  return (<h1>Current value of count is {countValue}</h1>)
  ...
};

After first click useState will take the value 1 (i.e countValue + 1) and call the Counter component with countValue=1.

const Counter = () => {
  const countValue = 0;
  ...
  return (<h1>Current value of count is {countValue}</h1>)
  ...
};

And so on.

So we can conclude that for every isolated render the state remains constant throughout and does not change over time. It's the Component that gets called again with a new value of the state.

Isolated-gif

Value of every state and prop remains constant and isolated between consecutive renders.

Every Render has its own Event Handlers

Let's take a look at this simple input-logging app.

Whenever we click the Log Input button it logs the inputValue state after 4 seconds on the console.

Now follow these steps:

  • type "hello".
  • Click the button.
  • change "hello" to "hello world".

What do you think will be logged on to the console? Is it going to be "hello" or "hello world"?

If your answer is "hello" then congratulations my friend you're absolutely right.

Since we have already established that every render has its own state, similarly every render has its own event handlers also. What actually happens is that whenever the component function is called it creates its own states, props, and event handlers which can be used only in that particular render.

So whenever any event handler is called it will only be able to access that value of the state which was assigned to this state for this particular render.

At initial render component will look kind of like this

const Input = () => {
  const inputValue = "";

  const logInput = () => {
    setTimeout(() => {
      console.log(`Input text is: ${inputValue}`);
    }, 4000);
  };
};

When we type "hello" and click on the Log Input button it will look like this

const Input = () => {
  const inputValue = "hello";

  const logInput = () => {
    setTimeout(() => {
      console.log(`Input text is: ${inputValue}`);
    }, 4000);
  };
};

Hence, the logInput event handler will take "hello" as the value of inputValue.

And when we change "hello" to "hello world".

Hence we can conclude that every isolated render has its own unique event handlers having access to the state and props belonging to that particular render.

Every Render has its own Effects

Let look at the counter app example again.

So this app basically alerts the value of countValue every time the app renders.

As of now, I think it has been reiterated so many times but, we know that state is always constant within a particular component render. It's not that value of state changes inside useEffect, it's the useEffect function that's different on every render with having access to states and props in that particular render.

WOw

At initial render, the component will look like this

const Counter = () => {
  const countValue = 0;

  useEffect(() => {
    console.log(`countValue is ${countValue}`);
  });
 ...
  return (<h1>Current value of count is {countValue}</h1>)
 ...
};

After clicking the Add1 button 1st time, the component will look like this

const Counter = () => {
  const countValue = 1;

  useEffect(() => {
    console.log(`countValue is ${countValue}`);
  });
 ...
  return (<h1>Current value of count is {countValue}</h1>)
 ...
};

And so on the state will increase after every click on Add1.

Conclusion

Every render has its own everything

Inside every render, props and states remain constant forever. And since states and props are isolated and constant between every render, so are any functions using them like EventHandlers, useEffect callbacks, and async functions inside any event handlers. Hence every render has its own everything.

Src: Article on useEffect by Dan Abramov

Well, that's it for now, stay safe, keep coding. Byeeeee...

bye

 
Share this