JIYIK CN >

useEffectUse the react hook to run react-native hooks when the component is unmounted . useEffectThe function we return from the react-native hook is called when the component is unmounted and can be used for cleanup purposes.

import {useRef, useEffect, useState} from 'react';

function Child() {
  const ref = useRef(null);

  useEffect(() => {
    const handleClick = event => {
      console.log('Button clicked');
    };

    const element = ref.current;

    element.addEventListener('click', handleClick);

    // 👇️ run function when component unmounts 👇️
    return () => {
      console.log('Child unmounted');
      element.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <div>
      <button ref={ref}>Click</button>
    </div>
  );
}

const App = () => {
  const [isMounted, setIsMounted] = useState(true);

  return (
    <div>
      <button onClick={() => setIsMounted(current => !current)}>
        Toggle child
      </button>

      <hr />

      {isMounted && <Child />}
    </div>
  );
};

export default App;

We use useEffectthe hook to run some logic when the component unmounts.

useEffect(() => {
  const handleClick = event => {
    console.log('Button clicked');
  };

  const element = ref.current;

  element.addEventListener('click', handleClick);

  // 👇️ run function when component unmounts 👇️
  return () => {
    console.log('Child unmounted');
    element.removeEventListener('click', handleClick);
  };
}, []);

The function we useEffectreturn from will be called when the component unmounts.

The second argument we pass to useEffectis an array of dependencies. The hook in our example doesn't depend on any external variables, so the dependencies array is empty.

The function we pass to useEffectwill be called when the component mounts, and the function we return will be called when the component unmounts.

Cleanup functions are typically used to remove any previously added event listeners to avoid memory leaks.

If you don't want to run any logic when the component mounts, you can just return your cleanup function.

useEffect(() => {
  // 👇️ run function when component unmounts 👇️
  return () => {
    console.log('Child unmounted');
  };
}, []);