Sometimes, we want to fix cannot update a component while rendering a different component warning with React.

In this article, we’ll look at how to fix cannot update a component while rendering a different component warning with React.

How to fix cannot update a component while rendering a different component warning with React?

To fix cannot update a component while rendering a different component warning with React, we should call functions from props inside the useEffect callback or in functions in the component.

For instance, we write

const HomePage = (props) => {
  useEffect(() => {
    props.setAuthenticated(true);
  }, []);

  const handleChange = (e) => {
    props.setSearchTerm(e.target.value.toLowerCase());
  };

  return (
    <div key={props.restInfo.storeId} className="container-fluid">
      <ProductList searchResults={props.searchResults} />
    </div>
  );
};

to call the props.setAuthenticated function inside the useEffect callback when the component mounts.

If we call it in the component at the top level, then the function runs on every render, which triggers the warning.

Conclusion

To fix cannot update a component while rendering a different component warning with React, we should call functions from props inside the useEffect callback or in functions in the component.