close

[Solved] Cannot update a component while rendering a different component warning

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error Cannot update a component while rendering a different component warning in javascript. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How To Solve Cannot update a component while rendering a different component warning Error ?

  1. How To Solve Cannot update a component while rendering a different component warning Error?

    To Solve Cannot update a component while rendering a different component warning Error I fixed this issue by removing the dispatch from the register components render method to the componentwillunmount method. This is because I wanted this logic to occur right before redirecting to the login page. In general, it's best practice to put all your logic outside the render method so my code was just poorly written before. Hope this helps anyone else in the future 🙂

  2. Cannot update a component while rendering a different component warning

    To Solve Cannot update a component while rendering a different component warning Error I fixed this issue by removing the dispatch from the register components render method to the componentwillunmount method. This is because I wanted this logic to occur right before redirecting to the login page. In general, it's best practice to put all your logic outside the render method so my code was just poorly written before. Hope this helps anyone else in the future 🙂

Solution 1

This warning was introduced since React V16.3.0.

If you are using functional components you could wrap the setState call into useEffect.

Now you can change it to:

const HomePage = (props) => {
  // trigger on component mount
  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>
  );
};

Solution 2

I fixed this issue by removing the dispatch from the register components render method to the componentwillunmount method. This is because I wanted this logic to occur right before redirecting to the login page. In general, it’s best practice to put all your logic outside the render method so my code was just poorly written before. Hope this helps anyone else in the future 🙂

My refactored register component:

class Register extends Component {

  componentWillUnmount() {
    // Reset register status to allow return to register page
    if ( this.props.registerStatus !== "" ) this.props.dispatch( resetRegisterStatus() )
  }

  render() {
    if( this.props.registerStatus === SUCCESS ) { 
      return <Redirect push to = {LOGIN}/>
    }
    return (
      <div style = {{paddingTop: "180px", background: 'radial-gradient(circle, rgba(106,103,103,1) 0%, rgba(36,36,36,1) 100%)', height: "100vh"}}>
        <RegistrationForm/>
      </div>
    );
  }
}

Solution 3

I was facing the same issue, The fix that worked for me was if u are doing

setParams/setOptions

outside of useEffect then this issue is occurring. So try to do such things inside useEffect. It’ll work like a charm

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment