useState is unsafe

useState return “unsafe” setter. If a component has been unmounted and the setter is called we will get a warning. In a class component we can handle unmount event and avoid this situation. Example: https://codesandbox.io/s/vmm13qmw67 Click the button and get a warning in the console. Cleanup logic will be very complicated in this case. Because we should separate unmount and “after render” cleanup.

[gaearon]

Edit: this is probably better: https://github.com/facebook/react/issues/14113#issuecomment-467492761

Not like this, no. You can do this though.

const isMounted = useRef(true);

useEffect(() => {
  performCall();
  return () => {
    isMounted.current = false;
  };
}, []);

async function performCall() {
    let newN = await apiCall(n)
    if (isMounted.current) {
        setN(newN);
    }
}

Longer term, Suspense will be the recommended solution instead.

[gaearon]

For what it’s worth this is probably better because it can work for multiple fetches (e.g. if route params change):

useEffect(() => {
  let canceled = false;

  async function performCall() {
    let newN = await apiCall(n)
    if (!canceled) {
      setN(newN);
    }
  }

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