From 525935429b041b2565bf7cb45388da5c9ef7ade4 Mon Sep 17 00:00:00 2001
From: Jean-Christophe <>
Date: Thu, 25 Jan 2024 11:31:17 +0100
Subject: [PATCH] =?UTF-8?q?useEffect=20et=20d=C3=A9pendances?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 3 ++-
src/components/person.component.jsx | 7 +++----
src/scripts/main.js | 3 ++-
3 files changed, 7 insertions(+), 6 deletions(-)
diff --git a/README.md b/README.md
index 356a1ef..571224a 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 2c04880..776ad12 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 3cddc9b..096baa8 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);
}
--
GitLab