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

 import { useState, useEffect } from 'react';
 
-// import stysheet defining style specific to this component
 import '../assets/style/person.css';
 
-/*
-* define a component that uses props, props is a javascript object
-*/
 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/components/personListing.component.jsx

@@ -13,7 +13,7 @@ const PersonListing =  props  => {
    const [persons, setPersons ] = useState([]);
 
    const fetchData = async () => {
-      const data = await mockFetch('http://source.of.data/persons',1000);
+      const data = await mockFetch('http://source.of.data/persons',10);
       setPersons( data );
    }      
 

src/data/personsData.js

@@ -8,6 +8,11 @@ const persons = [
       id: 'A002',
       name: "Bilbo Baggins",
       age: 111
+   },
+   {
+      id: 'A003',
+      name: "Frodo Baggins",
+      age: 33
    }
 ];
 

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