<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
No,</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
The component rerenders 3 more times than needed</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
The component to rerender once</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong><br>
16.8</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from &quot;react&quot;;
import ReactDOM from &quot;react-dom&quot;;
import { Lower } from &quot;./lower&quot;;

import &quot;./styles.css&quot;;

function App() {
  const [state, setState] = React.useState(&quot;nochange&quot;);
  const change = () =&gt; {
    console.log(&quot;runs&quot;);
    setState(&quot;change&quot;);
  };
  return (
    &lt;div className=&quot;App&quot;&gt;
      &lt;Lower mode={state} /&gt;
      &lt;p /&gt;
      &lt;button onClick={() =&gt; change()}&gt;click to change&lt;/button&gt;
    &lt;/div&gt;
  );
}

const rootElement = document.getElementById(&quot;root&quot;);
ReactDOM.render(&lt;App /&gt;, rootElement);"><pre class="notranslate"><code class="notranslate">import React from "react";
import ReactDOM from "react-dom";
import { Lower } from "./lower";

import "./styles.css";

function App() {
  const [state, setState] = React.useState("nochange");
  const change = () =&gt; {
    console.log("runs");
    setState("change");
  };
  return (
    &lt;div className="App"&gt;
      &lt;Lower mode={state} /&gt;
      &lt;p /&gt;
      &lt;button onClick={() =&gt; change()}&gt;click to change&lt;/button&gt;
    &lt;/div&gt;
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(&lt;App /&gt;, rootElement);
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from &quot;react&quot;;

export const Lower = props =&gt; {
  const [state, setState] = React.useState(1);
  console.log(props.mode);
  React.useEffect(() =&gt; {
    props.mode === &quot;change&quot; &amp;&amp; setState(2);
  });
  return state;
};
"><pre class="notranslate"><code class="notranslate">import React from "react";

export const Lower = props =&gt; {
  const [state, setState] = React.useState(1);
  console.log(props.mode);
  React.useEffect(() =&gt; {
    props.mode === "change" &amp;&amp; setState(2);
  });
  return state;
};

</code></pre></div>
<p dir="auto">My repo is <a href="url">https://codesandbox.io/s/kkkl61mrzv</a> and I am trying to send a prop to my child via manipulating the state with the new hooks. the component does work however in my console.log I can see that the component rerenders quite a few times. please help me find a proper way to have this done with rerendering once.</p>
<p dir="auto">React version: 17.0.2</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>yarn install</li>
<li>yarn build:admin-react</li>
<li>node server2</li>
</ol>

<p dir="auto">Link to code example:<br>
<a href="https://github.com/see/ssr-demo">https://github.com/see/ssr-demo</a></p>

<h2 dir="auto">The current behavior</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="(node:97731) UnhandledPromiseRejectionWarning: Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at R (/Users/ying/workspace/FEProjects/ssr-demo/dist/admin-react/node/static/js/main.01e60cfb.js:2:5394)
    at t.useContext (/Users/ying/workspace/FEProjects/ssr-demo/dist/admin-react/node/static/js/main.01e60cfb.js:2:7108)
    at C (/Users/ying/workspace/FEProjects/ssr-demo/dist/admin-react/node/static/js/main.01e60cfb.js:2:14117)
    at A (/Users/ying/workspace/FEProjects/ssr-demo/dist/admin-react/node/static/js/main.01e60cfb.js:2:15285)
    at processChild (/Users/ying/workspace/FEProjects/ssr-demo/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/ying/workspace/FEProjects/ssr-demo/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/ying/workspace/FEProjects/ssr-demo/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/ying/workspace/FEProjects/ssr-demo/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/Users/ying/workspace/FEProjects/ssr-demo/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at /Users/ying/workspace/FEProjects/ssr-demo/server2.js:29:22
(Use `node --trace-warnings ...` to show where the warning was created)
(node:97731) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)"><pre class="notranslate"><code class="notranslate">(node:97731) UnhandledPromiseRejectionWarning: Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at R (/Users/ying/workspace/FEProjects/ssr-demo/dist/admin-react/node/static/js/main.01e60cfb.js:2:5394)
    at t.useContext (/Users/ying/workspace/FEProjects/ssr-demo/dist/admin-react/node/static/js/main.01e60cfb.js:2:7108)
    at C (/Users/ying/workspace/FEProjects/ssr-demo/dist/admin-react/node/static/js/main.01e60cfb.js:2:14117)
    at A (/Users/ying/workspace/FEProjects/ssr-demo/dist/admin-react/node/static/js/main.01e60cfb.js:2:15285)
    at processChild (/Users/ying/workspace/FEProjects/ssr-demo/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/ying/workspace/FEProjects/ssr-demo/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/ying/workspace/FEProjects/ssr-demo/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/ying/workspace/FEProjects/ssr-demo/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/Users/ying/workspace/FEProjects/ssr-demo/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at /Users/ying/workspace/FEProjects/ssr-demo/server2.js:29:22
(Use `node --trace-warnings ...` to show where the warning was created)
(node:97731) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
</code></pre></div>
<h2 dir="auto">The expected behavior</h2>