useEffect hook à la création du composant

README.md

@@ -51,7 +51,7 @@ où `tag` peut prendre comme valeur :
 * `v5.3` : modification  et état courant : utilisation d'une fonction en argument de `setOn` pour modifier l'état à partir de la valeur précédente    
   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.jsx` 
+  voir `/src/components/personListing.component.jsx` ainsi que  `/src/components/person.component.jsx` 
  
 
 Faire ```git checkout main``` pour revenir à la version finale.

src/components/person.component.jsx

-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 // import stysheet defining style specific to this component
 import '../assets/style/person.css';
@@ -11,6 +11,12 @@ const Person = ( { name = 'Anonymous', age, started, delay } ) => {
    const [ currentAge, setCurrentAge ] = useState(age);
 
 
+   useEffect( () => {
+      if (started) {
+         setInterval( () => setCurrentAge( previousCurrentAge => previousCurrentAge + 1 ), delay);
+      }
+   }, []);
+
    return (
       <div className="person">Here is :
          <div>name : <span>{ name }</span> </div>

src/components/personListing.component.jsx

@@ -16,7 +16,7 @@ const PersonListing =  props  => {
    useEffect( () => {
       console.log('component did mount');
       const fetchData = async () => {
-         const data = await mockFetch('http://source.of.data/persons',1000);
+         const data = await mockFetch('http://source.of.data/persons');
          setPersons( data );
       }      
       fetchData();