react useeffect cleanup function code example

Example 1: useeffect with cleanup

useEffect(() => {
	//your code goes here
    return () => {
      //your cleanup code codes here
    };
  },[]);

Example 2: react useEffect

import React, { useEffect } from 'react';

export const App: React.FC = () => {
  
  useEffect(() => {
        
  }, [/*Here can enter some value to call again the content inside useEffect*/])
  
  return (
    
Use Effect!
  );
}

Example 3: componentwillunmount hooks

useEffect(() => {
  window.addEventListener('mousemove', () => {});

  // returned function will be called on component unmount 
  return () => {
    window.removeEventListener('mousemove', () => {})
  }
}, [])

Example 4: useeffect componentdidmount

useEffect(() => {
    messagesRef.on('child added', snapshot => {
    const message = snapshot.val();
    message.key = snapshot.key;

    setMessages(messages.concat(message)); // See Note 1
}, []); // See Note 2

Example 5: 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 ;
}