I find that when I define a state with the value '1',

and set the state with the value '2' every time when I click a button,

the first two times will cause re-render

reproduce demo:

code: using react@17 without strict mode

import { useState } from "react";

export default function App() {
  const [a, setA] = useState("1");
  console.log("render", a);
  return (
    <button
      onClick={() => {
        setA("2");
      }}
    >
      {a}
    </button>
  );
}

// log:
// render 1
// render 2
// render 2

I can understand the first re-render because the state changed to '2' from '1',

but I don't understand the second re-render

I find that when I define a state with the value '1',

and set the state with the value '2' every time when I click a button,

the first two times will cause re-render

reproduce demo: https://codesandbox.io/s/sweet-brattain-ys11d

code: using react@17 without strict mode

import { useState } from "react";

export default function App() {
  const [a, setA] = useState("1");
  console.log("render", a);
  return (
    <button
      onClick={() => {
        setA("2");
      }}
    >
      {a}
    </button>
  );
}

// log:
// render 1
// render 2
// render 2

I can understand the first re-render because the state changed to '2' from '1',

but I don't understand the second re-render

• javascript
• reactjs

Share Improve this question Follow edited Jan 20, 2021 at 8:30 user14433996 asked Jan 20, 2021 at 5:09 LittleeLittlee 4,35766 gold badges3333 silver badges6565 bronze badges 5

• 3 for your code there is no 2 number or increment code. Then how you get the render 2 – prasanth Commented Jan 20, 2021 at 5:15
• What's wrong with that, looks everything works fine. It renders once. To check it clearly set a's initial value integer 1 instead of string then increase that value by 1 when click the button. e.g: setA(a +1) – Robin Commented Jan 20, 2021 at 5:16
• Also, assuming your actual code does have a simple increment functionality unlike the code in your question, and you're just getting 2 renders every state change, it might be from strict mode: mariosfakiolas./blog/… – Jayce444 Commented Jan 20, 2021 at 5:18
• @prasanth sorry about my typo, I've updated both my code snippet and the link, open the codesandbox link, click the button many times will append two "render 2" log in console – Littlee Commented Jan 20, 2021 at 5:37
• @Jayce444 I am not running the app inside <React.StrictMode /> – Littlee Commented Jan 20, 2021 at 5:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

I think this explains the anomaly very well:

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 parison algorithm.)

Note that React may still need to render that specific ponent 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

Note the last paragraph. This is quoted directly from here.

I think something missing in the code. I checked on my end. it's working fine as per our expectations.

Thanks

import React from "react";
import "./styles.css";
import { useState } from "react";

export default function App() {
  const [a, setA] = useState(1);
  console.log("render", a);
  return (
    <button
      onClick={() => {
        setA(a + 1);
      }}
    >
      {a}
    </button>
  );
}