React-hooks. Can’t perform a React state update on an unmounted component

by

The easiest solution is to use a local variable that keeps track of whether the component is mounted or not. This is a common pattern with the class based approach. Here is an example that implement it with hooks:

function Example() {
  const [text, setText] = React.useState("waiting...");

  React.useEffect(() => {
    let isCancelled = false;

    simulateSlowNetworkRequest().then(() => {
      if (!isCancelled) {
        setText("done!");
      }
    });

    return () => {
      isCancelled = true;
    };
  }, []);

  return <h2>{text}</h2>;
}

Here is an alternative with useRef (see below). Note that with a list of dependencies this solution won’t work. The value of the ref will stay true after the first render. In that case the first solution is more appropriate.

function Example() {
  const isCancelled = React.useRef(false);
  const [text, setText] = React.useState("waiting...");

  React.useEffect(() => {
    fetch();

    return () => {
      isCancelled.current = true;
    };
  }, []);

  function fetch() {
    simulateSlowNetworkRequest().then(() => {
      if (!isCancelled.current) {
        setText("done!");
      }
    });
  }

  return <h2>{text}</h2>;
}

You can find more information about this pattern inside this article. Here is an issue inside the React project on GitHub that showcase this solution.

More Related Contents:

  1. Infinite loop in useEffect
  2. How to use `setState` callback on react hooks
  3. How to use callback with useState hook in react [duplicate]
  4. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  5. In useEffect, what’s the difference between providing no dependency array and an empty one?
  6. React useState cause double rendering
  7. How to use throttle or debounce with React Hook?
  8. React useReducer async data fetch
  9. Line 0: Parsing error: Cannot read property ‘map’ of undefined
  10. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  11. Set types on useState React Hook with TypeScript
  12. How to sync props to state using React hooks : setState()
  13. useNavigate() may be used only in the context of a component
  14. Testing React components that fetches data using Hooks
  15. Why React useState with functional update form is needed?
  16. React.useState does not reload state from props
  17. React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function
  18. React: useState or useRef?
  19. How do react hooks determine the component that they are for?
  20. Lazy initial state – What it is and how to use it?
  21. useReducer Action dispatched twice
  22. Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’
  23. is it possible to React.useState(() => {}) in React?
  24. React Hooks – How do I implement shouldComponentUpdate?
  25. React hook rendering an extra time
  26. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  27. How to create dynamic refs in functional component- Using useRef Hook
  28. Put A Warning If Page Refresh in ReactJS
  29. Passing array to useEffect dependency list
  30. React Hook useEffect has a missing dependency: ‘list’

Leave a Comment