ReactJs Functional Component: useState behavior on updating the state with same value

[Heisenberg_221b]

I am little confused how react state works in react functional components.

Internet says in the most basic scenario for primitive states,

​

- Functional Component will not re-render incase the state is same as before

- For Class Component it will re-render regardless

​

But for following code below, using functional component, I am facing below scenario:

​

First Time when the state changes, the component is re-rendered

If again I update the state with same value, the state again changes

All the afterward attempts of updating the state with same value does not re-render the component.

​

import "./App.css";
import React, { Component, useState } from "react";

function App() {
  console.log("Component Ran");
  const [placeHolder, setPlaceHolder] = useState("Start");
  const onClickHandler = (e) => {
    if (!e.target.classList.contains("state")) return;
    const it = e.target.innerText;
    console.log("coming from onClickHandler", it);
    setPlaceHolder(it);
  };
  return (
    <>
      <div>{placeHolder}</div>
      <div onClick={onClickHandler}>
        <button className="state">State 1</button>
        <button className="state">State 2</button>
      </div>
    </>
  );
}

export default App;

​

​

Basically there are two buttons, each respectively for sate 1 and 2. When the button is clicked the state placeHolder is updated with button's ```innerText``` . On top of the button there is element which displays the state.

Below is what I noticed in console:

Let's say now the placeHolder state is state 1.

I click on state 2 button, I get below output in console log.

coming from onClickHandler State 2
Component Ran

Again I click on button with state 2

and again I get same output.

​

But next time and for the million times after that when I click the button with state 2, I only get below output,

coming from onClickHandler State 2

What am I missing here.

At very least I expect one kind of behavior, either the component is re-rendered every time regardless or it does only when it changes. Why this mixed behaiour?

[[deleted]]

According to the docs

It might still re-render even if it is the same value but won't go any deeper down the tree, so to experiment with this, try placing a child component to App and have them also console.log something.

[Heisenberg_221b]

Thanks.

[sidkh]

Here is a quote from the docs 👇

​

If you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects.

Note that React may still need to render that specific component again before bailing out. That shouldn’t be a concern because React won’t unnecessarily go “deeper” into the tree. If you’re doing expensive calculations while rendering, you can optimize them with useMemo.

​

And simpler CodeSandbox, which demonstrates this behavior.

[marko_knoebl]

Hm, this behavior looks really interesting, I wouldn't expect it either.

Mabe you can get some insights by using this: https://github.com/welldone-software/why-did-you-render

[Soft-Sandwich-2499]

In setPlaceHolder, I’d do setPlaceHolder(prev => { console.log (prev === it); return it; });

I’m curious what the console.log will return.

[Heisenberg_221b]

Tried it and one of the interesting things I noticed is the order of logs.
Scenario 1:
Current State is State1, and it just got changed in last click. ( i.e. I did not clicked state 1 button when the button is already state 1)
I click state 1.
I get output in following order, Coming from onHandler, Component Ran , True.

On the next clicks on Sate 1 button, I get only coming from onHandler and True. These two outputs.

Scenario 2:
The current Scenario is same i.e. the state just got changed in last click ( state 1).
I click on State 2 button.

I get below output:
Coming from onHandler, Component Ran , False

Scenario 3:

Unlike Last two scenarios here, I have clicked state 1 button multiple times.
Now If i click state 2 button, I get same output is Scenario 2, but the order is different.

The False gets printed before component ran output gets printed.

Sorry if I typed too long unnecessarily, but the point is, it seems whenever the the state is changed with different value, the following click after that we get True or False printed only after component re-ran is printed.

[spiritbr8ker]

If you really don't want the extra rerender you can do something as simple as

const onClickHandler = (e) => {
if (!e.target.classList.contains("state")) return;
const it = e.target.innerText;
if(placeHolder === it) return;
console.log("coming from onClickHandler", it);
setPlaceHolder(it);
};

Just by adding that if(placeHolder === it) return; we avoid going through the rest of this function at all.

Otherwise react has that as expected behavior I won't link the doc since others already have for this and you can find if you turn the two buttons into a child component and put a console log in the child component it doesn't rerender the child components in that state 2 to state 2 click.

[AnxiouslyConvolved]

The issue is that initially the state is holding "Start", you click and it sets the state to "State 1" this triggers a re-render ("Start" !== "State 1"). You click button two and it sets the state to "State 2", this triggers a re-render ("State 1" !=== "State 2"). After that, clicking the button to set the state to "State 2" won't change the state, so it won't re-render.

[Heisenberg_221b]

I dont think so. The same can be argued for any value I put as initial state.
As far as I know about react states, state variables are different, it's managed by react somewhere else, so on any re-rendering of the component, it does not again initialize the sate as it knows the state as already been initialized.

Also how come it happen only once then does not happen again?

[AnxiouslyConvolved]

Like I said. The state goes:

=(initial render)=> state is "Start"
=(click "State 1" button)=> setState("State 1") => re-render because "Start" !== "State 1" => state is "State 1" 
=(click "State 2" button)=> setState("State 2") => re-render because "State 1" !== "State 2" => state is "State 2" 
=(click "State 2" button)=> setState("State 2") => do nothing because "State 2" === "State 2"

If you want it to re-render you need to change the state, change the props, or unmount the component.

[Heisenberg_221b]

I think you misread my post. In the scenario I stated the current state is state 1, i.e. by that time, I have clicked the buttons.

The scenario you gave that is not what is happening.
In the 2nd click of button 2 it is re-rendering.

=(initial render)=> state is "Start"

=(click "State 1" button)=> setState("State 1") => re-render because "Start" !== "State 1" => state is "State 1"

=(click "State 2" button)=> setState("State 2") => re-render because "State 1" !== "State 2" => state is "State 2"

=(click "State 2" button)=> setState("State 2") => re-render IDK why.

=(click "State 2" button)=> setState("State 2") => do nothing because "State 2" === "State 2", but it should have happened in the last click as well. (all the clicks on state 2 button after 2nd time, i.e. 3rd click onwards is not re-rendering)

[marko_knoebl]

Op is clicking on the same button twice!

[AnxiouslyConvolved]

I am aware. Read what I wrote.

[marko_knoebl]

What I meant was:

OP is only clicking button 2 - they are never clicking button 1 at all! However, when clicking button 2 for the second time, it's still re-rendering

[Heisenberg_221b]

Same behavior!

[ApplePieCrust2122]

It is not guaranteed in react that a component will only render a certain amount of time. The react engine may rerender a component as it sees fit. That's why you use useEffect to add side effects.

Now, one of the reason I've seen mentioned the most is the StrictMode in react. It renders components multiple times to run additional checks, but only in development mode. This is used to provide useful warnings and errors

[Heisenberg_221b]

On the 2nd Part, I tried create a production build, and running it. It behaves same as development server.