useEffect et nettoyage

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.

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 (

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