useeffect cleanup function

1  useEffect(() => {
2	//your code goes here
3    return () => {
4      //your cleanup code codes here
5    };
6  },[]);

1import React, { useEffect } from 'react';
2
3export const App: React.FC = () => {
4  
5  useEffect(() => {
6        
7  }, [/*Here can enter some value to call again the content inside useEffect*/])
8  
9  return (
10    <div>Use Effect!</div>
11  );
12}

1import React, { useState, useEffect } from 'react';
2function Example() {
3  const [count, setCount] = useState(0);
4
5  // Similar to componentDidMount and componentDidUpdate:  
6  useEffect(() => {    
7    // Update the document title using the browser API    
8    document.title = `You clicked ${count} times`;  
9  });
10
11  );
12}

1useEffect(() => {
2  window.addEventListener('mousemove', () => {});
3
4  // returned function will be called on component unmount 
5  return () => {
6    window.removeEventListener('mousemove', () => {})
7  }
8}, [])

1useEffect(() => {
2    messagesRef.on('child added', snapshot => {
3    const message = snapshot.val();
4    message.key = snapshot.key;
5
6    setMessages(messages.concat(message)); // See Note 1
7}, []); // See Note 2

1function App() {
2  const [shouldRender, setShouldRender] = useState(true);
3
4  useEffect(() => {
5    setTimeout(() => {
6      setShouldRender(false);
7    }, 5000);
8  }, []);
9
10  // don't render
11  if( !shouldRender ) return null;
12  // JSX, if the shouldRender is true
13  return <ForExample />;
14}