React render component even though state doesnt change-CodePudding

import { useState } from "react";

export default function App() {
  console.log("rendered...")
  const [count, setCount] = useState(0);

  const increaseCount = () => {
    setCount(count   1);
  };

  const setFourValue = () => {
    setCount(4);
  };
  return (
    <div className="App">
      <div
        style={{ display: "flex", alignItems: "center", columnGap: ".25rem" }}
      >
        <button onClick={increaseCount}>Increase</button>
        <button onClick={setFourValue}>Set 4</button>
        <span>{count}</span>
      </div>
    </div>
  );
}

I try to figure out when and how component render. Situation that i try to is i increased count to 4 and now my count value is 4. But i click to 'Set 4' button my count value is still 4 but still component re-rendered. After that if click again 'Set 4' button component doesn't re-render. Why ?

CodePudding user response：

In React, components will only re-render if a state or prop in the component change.

Setting 4 to 4 is not a change.

React is smart enough to not re-render unnecessarily.

CodePudding user response：

To add on to Barry's answer, when you set the count to4 the first time with setFourValue after increasing it to 4 with increaseCount, it actually isn't 4. Console log the count and you'll see that it's actually 3 even though it displays 4 on the screen.