useEffect et dépendances

README.md

@@ -52,7 +52,8 @@ où `tag` peut prendre comme valeur :
   voir `/src/components/star.jsx` (et `/src/components/person.component.jsx`)
 * `v5.5` : cycle de vie du composant : utilisation du hook `useEffect` pour agir au moment de la création du composant : juste après le premier rendu.  
   voir `/src/components/personListing.component.jsx` ainsi que  `/src/components/person.component.jsx` 
- 
+* `v 5.6` : utilisation des dépendances du hook `useEffect` pour déclencher son effet  
+  voir `/src/components/person.component.jsx` 
 
 Faire ```git checkout main``` pour revenir à la version finale.
 

src/components/person.component.jsx

@@ -5,13 +5,12 @@ import '../assets/style/person.css';
 const Person = ( { name = 'Anonymous', age, started, delay } ) => {
    
    const [ currentAge, setCurrentAge ] = useState(age);
-
-
+   
    useEffect( () => {
       if (started) {
          setInterval( () => setCurrentAge( previousCurrentAge => previousCurrentAge + 1 ), delay);
-      }
-   }, []);
+      
+   }, [started]);
 
    return (
       <div className="person">Here is :

src/scripts/main.js

 import { createRoot } from 'react-dom/client';
 
 import PersonListingController from '../components/personListingController.component.jsx';
+import { StrictMode } from 'react';
 
    const bootstrapReact = () => {
       const root = createRoot(document.getElementById('insertReactHere')); 
 
-      const component = <PersonListingController />;
+      const component = <StrictMode><PersonListingController /></StrictMode>;
 
       root.render(component);
    }