,

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

Now anytime you need to know if our component is mounted, you can check isMounted.current to get the current value.