Bug: Setting the state to the same value causes a re-render. about react

[waizbart]

When you call setState(true), even though the state hasn't changed (it's still true), React schedules a re-render for the App component. During this process, React compares the new state with the previous state. Since they are the same, React recognizes that there's no need to re-render the child components. However, because the App component is already in the process of rendering, the code inside the App function, including console.log("App"), still runs. React then decides to skip re-rendering the Child component to optimize performance.

[MTtankkeo]

Hmm, for your info, this does not happen in the case of preact in the same situation (I tried.)

My Test Code with Preact

Console Input With Google Chrome
index.tsx:15 App
index.tsx:10 Child
index.tsx:15 App
index.tsx:10 Child

import { render, useState } from "preact/compat";

const Child = () => {
    console.log("Child");
    return <></>;
}

export default function App() {
    const [state, setState] = useState(false);
    console.log("App");

    return (
        <>
            <button onClick={() => setState(true)}>click {state ? "true" : "false"}</button>
            <Child />
        </>
    );
}

render(<App />, document.getElementById("render"));

So... I guess it's just a bug or not. 😂

[DarWiM]

I found a similar behavior and I don't understand if it's a bug.

Here is a simpler example codesandbox

Steps To Reproduce:

1. Click on QQQ - the value changes, rendering happens
2. Click on QQQ - the value does not change, rendering happens
3. Each subsequent click on the QQQ button - the value does not change, rendering does not happen
4. Next, we can repeat the same actions with another button