useeffect hook cleanup code example

Example 1: useeffect with cleanup

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

Example 2: useeffect

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    longResolve().then(() => {
      alert(count);
    });
  }, []);

  return (
    <div>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Count: {count}
      </button>
    </div>
  );
}

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

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