From c109c4a32a866be8360865ec1863d45bdd312968 Mon Sep 17 00:00:00 2001
From: Jean-Christophe <>
Date: Thu, 25 Jan 2024 13:13:18 +0100
Subject: [PATCH] useEffect et nettoyage
---
README.md | 2 ++
src/components/person.component.jsx | 6 +++++-
src/scripts/main.js | 2 +-
3 files changed, 8 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index 0e4d7d0..8eda85b 100644
--- a/README.md
+++ b/README.md
@@ -56,6 +56,8 @@ où `tag` peut prendre comme valeur :
voir `/src/components/person.component.jsx`
* `v5.7` : utilisation du hook `useRef` et complément dépendances de `useEffect`
voir `/src/components/person.component.jsx`
+* `v5.8` :mise en oeuvre de la fonction de nettoyage du `useEffect`
+ 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 0a133e6..396f984 100644
--- a/src/components/person.component.jsx
+++ b/src/components/person.component.jsx
@@ -8,13 +8,17 @@ const [ currentAge, setCurrentAge ] = useState(age);
const timer = useRef( undefined );
useEffect( () => {
- clearInterval( timer.current );
+ clearInterval( timer.current );
if (started) {
timer.current = setInterval( () => {
setCurrentAge( previousCurrentAge => previousCurrentAge + 1 );
console.log('timer is running');
}, delay);
}
+ return () => {
+ console.log('cleanup');
+ clearInterval( timer.current );
+ }
}, [started, delay] );
return (
diff --git a/src/scripts/main.js b/src/scripts/main.js
index 096baa8..fb8fbd1 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -6,7 +6,7 @@ import { StrictMode } from 'react';
const bootstrapReact = () => {
const root = createRoot(document.getElementById('insertReactHere'));
- const component = <StrictMode><PersonListingController /></StrictMode>;
+ const component = <PersonListingController />;
root.render(component);
}
--
GitLab