diff --git a/README.md b/README.md index 0e4d7d002a1ba7e847697a8c6beb9fb657b62dda..8eda85bc3df0f59eed54b7052f01c9e5d389375f 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,8 @@ où `tag` peut prendre comme valeur : voir `/src/components/person.component.jsx` * `v5.7` : utilisation du hook `useRef` et complément dépendances de `useEffect` voir `/src/components/person.component.jsx` +* `v5.8` :mise en oeuvre de la fonction de nettoyage du `useEffect` + voir `/src/components/person.component.jsx` Faire ```git checkout main``` pour revenir à la version finale. diff --git a/src/components/person.component.jsx b/src/components/person.component.jsx index 0a133e6a4164fb38abd3083e4217184fb8c82f9d..396f9842516a73d5f4427df04d92763568588701 100644 --- a/src/components/person.component.jsx +++ b/src/components/person.component.jsx @@ -8,13 +8,17 @@ const [ currentAge, setCurrentAge ] = useState(age); const timer = useRef( undefined ); useEffect( () => { - clearInterval( timer.current ); + clearInterval( timer.current ); if (started) { timer.current = setInterval( () => { setCurrentAge( previousCurrentAge => previousCurrentAge + 1 ); console.log('timer is running'); }, delay); } + return () => { + console.log('cleanup'); + clearInterval( timer.current ); + } }, [started, delay] ); return ( diff --git a/src/scripts/main.js b/src/scripts/main.js index 096baa8ee7a997526e77a71a6bd48cd60de99a11..fb8fbd1d573d9269e3127399f7bf5e3f474b05cf 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -6,7 +6,7 @@ import { StrictMode } from 'react'; const bootstrapReact = () => { const root = createRoot(document.getElementById('insertReactHere')); - const component = <StrictMode><PersonListingController /></StrictMode>; + const component = <PersonListingController />; root.render(component); }