Why is setState re-rendering the component when the value remains the same

Question

The React documentation claims that 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.

However that doesn't seem to be the case in that example:

function Child() {
  useEffect(() => console.log("Re-render Child"));
  return (<div>Child</div>);
}

export default function App() {
  function Counter({ initialCount }) {

    const [state, setState] = useState({value: initialCount });

    useEffect(() => console.log("Re-render"));

    return (
      <>
        Count: {state.value}
        <br />
        <br />
        <button onClick={() => {
          state.value += 1;
          setState(state);
        }}>+1</button>
        <Child></Child>
      </>
    );
  }

  return (
    <div>
      <Counter initialCount={1} />
    </div>
  );
}

Clicking on the button only changes the inner property value, but the object remains the same, so why is React triggering a re-render (including a re-render of children and triggering the console.log effect)?

Here is a sandbox to test this: https://codesandbox.io/embed/react-hooks-counter-example-wrr2p

You are using this in the wrong way. Use useEffect(() => console.log("Re-render"), []); — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Aug 20, 2019 at 11:13
> Note that React may still need to render that specific component again before bailing out. Literally the next line in docs. — Vaibhav Vishal
– Vaibhav Vishal, Commented Aug 20, 2019 at 11:17
@VaibhavVishal Sure, but it also renders children again as well. I've tested it. — Flavien
– Flavien, Commented Aug 20, 2019 at 11:18
@PraveenKumarPurushothaman No, I want to trigger the effect on each render, so I shouldn't be providing a [] argument. — Flavien
– Flavien, Commented Aug 20, 2019 at 11:23

Mohamed Ramrami · Accepted Answer · 2019-08-20 14:31:36Z

1

The problem is that you are using an old React alpha version 16.7.0-alpha.0 (I don't think the bail out feature was implemented yet ). Just update to the latest version, and the problem is solved : updated sandbox

answered Aug 20, 2019 at 14:31

Mohamed Ramrami

12.8k4 gold badges41 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Flavien Over a year ago

Good catch! I knew I was missing something obvious.

Mohammed Al-Reai · Accepted Answer · 2019-08-20 11:39:25Z

1

use this code at first, you should import the usestate and you should specify where the value will be store in value:state+1

import React, { useState } from 'react';
`

    setState({value:state+1});

answered Aug 20, 2019 at 11:39

Mohammed Al-Reai

2,85617 silver badges19 bronze badges

1 Comment

Flavien Over a year ago

That's not answering the question.

Collectives™ on Stack Overflow

Why is setState re-rendering the component when the value remains the same

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related