Warning: Cannot update a component while rendering a different component. ReactJS

Question

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.

In this structure, I am getting the following error:

Navigation.tsx:

// code....
<Route exact path="/" component={MyPatients} />
<Route
    exact
    path="/Pasient"
    render={() => (
         <PatientInfo
              setName={setName}
              setSchema={setSchema}
              patientID={patientID}
          />
    )}
/>
// code....

MyPatients:

const MyPatients = (props: { history: History }) => {
    localStorage.clear();
    const [patientID, setPatientID] = useState(
        localStorage.getItem('myData') || '',
    );

    useEffect(() => {
        localStorage.setItem('myData', patientID);
    }, [patientID]);
    return (
        <>
            <div className="search-container"></div>
            <Row gutter={[60, 40]} justify={'center'}>
                <Col span={1000}>
                    <p>Søk med personnummer for å finne en pasient</p>
                    <Search
                        style={{ width: 400 }}
                        className="search-bar"
                        placeholder="Søk etter en pasient!"
                        onSearch={(value: string) => setPatientID(value)}
                    />
                </Col>
            </Row>
            {patientID &&
                props.history.push({ pathname: 'Pasient', state: patientID })}
        </>
    );
};
export default MyPatients;

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?

Any help is appreciated.

It is a bad idea to pass Navigation setName to child PatientInfo. You might get additional errors — Rostyslav
– Rostyslav, Commented Jul 2, 2020 at 11:29
Thank you for your comment, @Hmr. however as stated in the below answer, the error persists. Any ideas? — Turtleneck
– Turtleneck, Commented Jul 2, 2020 at 12:00

Rostyslav · Accepted Answer · 2020-07-02 12:07:45Z

2

You are navigating with history.push on each render.

As @HMR mentioned in the comment, you have to remove navigation from JSX template and add it into a separate effect.

const MyPatients = (props: { history: History }) => {
  localStorage.clear();
  const [patientID, setPatientID] = useState(
    localStorage.getItem("myData") || ""
  );

  useEffect(() => {
    localStorage.setItem("myData", patientID);
  }, [patientID]);

  // separate effect here
  useEffect(() => {
    if (patientID) {
      props.history.push({ pathname: "Pasient", state: patientID });
    }
  }, [props, patientID]);

  return (
    <>
      <div className="search-container"></div>
      <Row gutter={[60, 40]} justify={"center"}>
        <Col span={1000}>
          <p>Søk med personnummer for å finne en pasient</p>
          <Search
            style={{ width: 400 }}
            className="search-bar"
            placeholder="Søk etter en pasient!"
            onSearch={(value: string) => setPatientID(value)}
          />
        </Col>
      </Row>
    </>
  );
};
export default MyPatients;

EDIT

This might cause your error:

<PatientInfo
  setName={setName}
  setSchema={setSchema}
  patientID={patientID}
/>

If you call setName or setSchema on render of PatientInfo then Navigation state gets updated before PatientInfo render is finished.

edited Jul 2, 2020 at 12:07

answered Jul 2, 2020 at 11:05

Rostyslav

2,88612 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Turtleneck Over a year ago

Ok, I understand. However, when making this change, it seems to load something incorrectly immediately, not letting me fill the searchfield. Im also getting an instant 500 error from the server I am getting data from.

Turtleneck Over a year ago

I figured it out. Adding the short-circuit to the new useeffect lets the app behave as it should (useEffect(() => { patientID && props.history.push({ pathname: 'Pasient', state: patientID }); }, [props, patientID]); )

Turtleneck Over a year ago

... but this is still giving me the error. any ideas?

Turtleneck Over a year ago

I spoke too soon. The error is indeed there still. However, i dont really understand why. When writing the above comment, I was not getting the error - then suddenly now I am.

Turtleneck Over a year ago

any ideas, @Rostyslav? I cant seem to get it to work.

|

Collectives™ on Stack Overflow

Warning: Cannot update a component while rendering a different component. ReactJS

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related