1

When I click on the 'Rerender UI' button then it prints in the console for the first two clicks. I think it should print in the console only for the first time when I click on the 'Rerender UI' button because on the button click the component state is changed so UI will re-render and the console log will be printed in the console. Why is it printing for the second click? StrictMode is off. See code:

export default function UseCallbackComp() {
  const [stateVar, setStateVar] = useState<any>()
  console.log("Parent Rerendered!")
  return (
    <>
      <div>UseCallbackComp content</div>
      <div>
        <button
          onClick={() => {
            setStateVar(1)
          }}
        >
          Rerender UI
        </button>
      </div>
    </>
  )
}

When I put the console log line inside useEffect like below it prints only for the first time 'ReRender UI' button is clicked which is the expected behaviour.

  useEffect(() => {
    console.log("Parent Rerendered!")
  })
Garvit
  • 55
  • 1
  • 8
  • Does this answer your question? [React hooks useState setValue still rerender one more time when value is equal](https://stackoverflow.com/questions/57652176/react-hooks-usestate-setvalue-still-rerender-one-more-time-when-value-is-equal) – YellowD Feb 11 '23 at 09:16
  • @YellowD in the question that you have shared, the selected answer points to another question and there the selected answer says: "For a functional component using useState hook, the setter if called with the same state will not trigger a re-render. However for an occasional case if the setter is called **immediately** it does result in two renders instead of one"... But in my case, I am not calling the setter immediately. It doesn't matter after how much time I click on the button and set the state, it always causes the second re-render due to button click. Why? – Garvit Feb 12 '23 at 05:32
  • @Gavit This comment provided from other answer might explain more about this: https://github.com/facebook/react/issues/14810#issuecomment-462089702 – YellowD Feb 12 '23 at 09:49
  • Thanks @YellowD. From the above mentioned thread I got to know exactly how react useState works. Mentioning the same as an answer here. – Garvit Feb 13 '23 at 05:02

1 Answers1

0

From the below two links I got to know whats the behaviour of react when useState is used:

  1. stackoverflow question
  2. gitHub discussion

There are two different cases for which useState behaves differently for same value.

Case 1: When useState used with same value as the initial value.

Result: No rerendering at all.

export default function LifecycleEvents() {
  const [stateVar, setStateVar] = useState<any>(0)
  console.log("Parent Rerendered!")
  return (
    <>
      <button
        onClick={() => {
          setStateVar(0) //same value as the initial value
        }}
      >
        Rerender UI
      </button>
    </>
  )
}

Case 2: When useState used with different value first and then with the same value.

Result: First both Parent and child will be re-rendered. But for the second time, only the render function of Parent component will get called, Nothing else. See code:

export default function LifecycleEvents() {
  const [stateVar, setStateVar] = useState<any>(0)
  console.log("Parent Rerendered!")
  return (
    <>
      <button
        onClick={() => {
          setStateVar(1) //different value then initial value.
        }}
      >
        Rerender UI
      </button>
    </>
  )
}

Conclusion: Nothing to worry unless you have an expensive render method of the component. In that case use memo.

Garvit
  • 55
  • 1
  • 8