title: Warning: Cannot update a component while rendering a different component. ReactJS
body: <p>In my ReactHooks/Typescript app, I have a Navigation component, that renders a PatientInfo component. The PatientInfo child is rendered conditionally based on what props it is passed, as decided by a searchbox in another child component - MyPatients.</p>
  <p>In this structure, I am getting the following error:</p>
  <p><a href="https://i.stack.imgur.com/83XHb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/83XHb.png" alt="et" /></a></p>
  <p>Navigation.tsx:</p>
  <pre><code>// code....
  &lt;Route exact path=&quot;/&quot; component={MyPatients} /&gt;
  &lt;Route
      exact
      path=&quot;/Pasient&quot;
      render={() =&gt; (
           &lt;PatientInfo
                setName={setName}
                setSchema={setSchema}
                patientID={patientID}
            /&gt;
      )}
  /&gt;
  // code....
  </code></pre>
  <p>MyPatients:</p>
  <pre><code>const MyPatients = (props: { history: History }) =&gt; {
      localStorage.clear();
      const [patientID, setPatientID] = useState(
          localStorage.getItem('myData') || '',
      );
  
      useEffect(() =&gt; {
          localStorage.setItem('myData', patientID);
      }, [patientID]);
      return (
          &lt;&gt;
              &lt;div className=&quot;search-container&quot;&gt;&lt;/div&gt;
              &lt;Row gutter={[60, 40]} justify={'center'}&gt;
                  &lt;Col span={1000}&gt;
                      &lt;p&gt;Søk med personnummer for å finne en pasient&lt;/p&gt;
                      &lt;Search
                          style={{ width: 400 }}
                          className=&quot;search-bar&quot;
                          placeholder=&quot;Søk etter en pasient!&quot;
                          onSearch={(value: string) =&gt; setPatientID(value)}
                      /&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
              {patientID &amp;&amp;
                  props.history.push({ pathname: 'Pasient', state: patientID })}
          &lt;/&gt;
      );
  };
  export default MyPatients;
  </code></pre>
  <p>I am not familliar with this issue, and don't understand what's happening. My educated guess is that React doesn't like the fact that the state of the parent component is being updated by functions passed to the children, which again are dependant on the props passed along with it. Am I on to something? Any ideas as to what is causing this if not?</p>
  <p>Any help is appreciated.</p>