Utiliser Effectif avec le nettoyage
useEffect(() => {
//your code goes here
return () => {
//your cleanup code codes here
};
},[]);
Tense Trout
useEffect(() => {
//your code goes here
return () => {
//your cleanup code codes here
};
},[]);import React, { useEffect } from 'react';
export const App: React.FC = () => {
useEffect(() => {
}, [/*Here can enter some value to call again the content inside useEffect*/])
return (
<div>Use Effect!</div>
);
}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`;
});
);
}useEffect(() => {
window.addEventListener('mousemove', () => {});
// returned function will be called on component unmount
return () => {
window.removeEventListener('mousemove', () => {})
}
}, [])import React, { useEffect } from 'react';
function FriendStatus(props) {
useEffect(() => {
// do someting when mount component
return function cleanup() {
// do something when unmount component
};
});
}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 />;
}