diff --git a/README.md b/README.md index 356a1efbb305454fb02ee764d97f1bd2dc342ff4..571224a11c5a4a2033b2d309a664335c16ad5080 100644 --- a/README.md +++ b/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. diff --git a/src/components/person.component.jsx b/src/components/person.component.jsx index 2c04880ad8b0dc5212bc6df773ec318257a00270..776ad12b7497840d69ddc550df56aa9648b0cef1 100644 --- a/src/components/person.component.jsx +++ b/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 : diff --git a/src/scripts/main.js b/src/scripts/main.js index 3cddc9b804f58fe9650d3e64138430308ed83a1a..096baa8ee7a997526e77a71a6bd48cd60de99a11 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,11 +1,12 @@ 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); }