useeffect component will mount code example

Example 1: replace componentwillmount with hooks

useEffect(() => {
	//will be called on every load
})

useEffect(() => {
	//will be called on component mount
  window.addEventListener('mousemove', () => {});

  // returned function will be called on component unmount 
  return () => {
    window.removeEventListener('mousemove', () => {})
  }
}, []) // <---- empty array at end will cause to only run on first load

Example 2: useeffect cleanup function

function App() {
  const [shouldRender, setShouldRender] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setShouldRender(false);
    }, 5000);
  }, []);

  // don't render
  if( !shouldRender ) return null;
  // JSX, if the shouldRender is true
  return <ForExample />;
}

Tags:

Misc Example

Related