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}