Bug: Functional component rerender when same state

React version: 16.13.1

Steps To Reproduce

Link to code example

The current behavior

1. first render -> ‘render’ log
2. textA default value is ‘A’
3. changeA Click and textA changed ‘AA’ -> render log
4. changeA Click, before textA value is ‘AA’ after textA value is ‘AA’. -> render
5. And then changeA Click, nothing ‘render’ log
6. changeTextB Button Click and textB is always render. -> render
7. changeTextA Button Click render log after changeTextB clicked

The expected behavior

Expected behavior is do not render in Step4 and Step7. Because, before textA state is ‘AA’ and after textA state is ‘AA’. -> nothing change

[vkurchatkin]

@heecheolman once again, quote from the same page

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.

Which means that when you call setState with the same value it is not guaranteed that the function is not going to be called again, but even if it is, it is not an actual rerender, since child components are not going to be rerendered.

[heecheolman]

example: codesandbox

1. First Render: “render” print
2. Click Set 1 Button: “render” print, Because state changes 0 to 1
3. Click Set 1 Button: “render” print

In React document

If your update function returns the exact same value as the current state, the subsequent rerender will be skipped completely.

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. (React uses the Object.is comparison algorithm.)

Object.is(1, 1) returns true. But why React will render in Step3 ?

Similar stackoverflow question link