Cannot update a component while rendering a different component warning

by

This warning was introduced since React V16.3.0.

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

Code that does not work:

const HomePage = (props) => {
    
  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>
  );
};

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>
  );
};

More Related Contents:

  1. Programmatically Navigate using react-router
  2. Why do we need middleware for async flow in Redux?
  3. React Context vs React Redux, when should I use each one? [closed]
  4. Await is a reserved word error inside async function
  5. How to overcome the CORS issue in ReactJS
  6. How to update single value inside specific array item in redux
  7. Why use Redux over Facebook Flux? [closed]
  8. Understanding React-Redux and mapStateToProps()
  9. Is this the correct way to delete an item using redux?
  10. React: how to load and render external html file?
  11. Updating nested data in redux store
  12. Cleaner/shorter way to update nested state in Redux?
  13. How do I access store state in React Redux?
  14. redux fetch body is not use with no cors mode
  15. What’s the ‘@’ (at symbol) in the Redux @connect decorator?
  16. Read Store’s Initial State in Redux Reducer
  17. TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react app
  18. How to trigger off callback after updating state in Redux?
  19. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  20. Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await
  21. Programmatically change Redux-Form Field value
  22. Global state in React Native
  23. Update single value in item array | react redux
  24. Redux Presentational Components Vs Container Component
  25. How can I dispatch function in redux?
  26. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  27. Component won’t update when a redux state change occurs
  28. React-Redux: Should all component states be kept in Redux Store
  29. Could not find “store” in either the context or props of “Connect(App)”
  30. How to get simple dispatch from this.props using connect w/ Redux?

Leave a Comment