useeffect return cleanup function code example

Example 1: useeffect with cleanup

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

Example 2: how to use useeffect

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:  
  useEffect(() => {    
  	// Update the document title using the browser API    
  	document.title = `You clicked ${count} times`;  
  });
  
  return (
    

      
You clicked {count} times
       setCount(count + 1)}>
        Click me
      
    
  );
}

Example 3: useEffect

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:  useEffect(() => {    // Update the document title using the browser API    document.title = `You clicked ${count} times`;  });
  return (
    

      
You clicked {count} times
       setCount(count + 1)}>
        Click me
      
    
  );
}

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