JAVASCRIPT

useeffect with cleanup

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

useeffect cleanup in reactjs

import React, { useEffect } from 'react';

function FriendStatus(props) {

  useEffect(() => {
    // do someting when mount component
    
    return function cleanup() {
      // do something when unmount component
    };
  });
}

clean up useeffect

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // Specify how to clean up after this effect:
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

useeffect cleanup in reactjs

useEffect(() => {
    // do someting when mount component
    
    return function cleanup() {
      // do something when unmount component
});

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 />;
}