ReactJS isMounted hook with useEffect

Basic errors

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application.

Basic `React.useEffect`

understanding basic usage of React.useEffect

call every changes

Below codes will run on every render of your component, e.g. when state or props change.

React.useEffect(() => {
  // component is mounted
  return () => {
    // component is being unmounted
  }
});

call only once

Below codes will run an effect and clean it up only once (on mount and unmount). This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run.

React.useEffect(() => {
  // component is mounted
  return () => {
    // component is being unmounted
  }
}, []); // run once on mount

Basic `React.useRef`

Keep in mind that useRef doesn’t notify you when its content changes. Mutating the .current property doesn’t cause a re-render.

Storing `isMounted` with `React.useRef`

You’ll React.useEffect to monitor when the component mounts or unmounts, and save that info in a ref

const isMounted = React.useRef(false); // unmounted by default

React.useEffect(() => {
  isMounted.current = true; // mounted
  return () => {
    isMounted.current = false; // unmounted
  }
}, []); // run once on mount