From 4f0f43719dcbff2326754586e1f7e0f837835c44 Mon Sep 17 00:00:00 2001
From: Jean-Christophe <>
Date: Thu, 25 Jan 2024 12:46:55 +0100
Subject: [PATCH] userRef pour timer
---
README.md | 3 +++
src/components/person.component.jsx | 33 +++++++++++++++++------------
2 files changed, 22 insertions(+), 14 deletions(-)
diff --git a/README.md b/README.md
index 571224a..0e4d7d0 100644
--- a/README.md
+++ b/README.md
@@ -54,7 +54,10 @@ où `tag` peut prendre comme valeur :
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`
+* `v5.7` : utilisation du hook `useRef` et complément dépendances de `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 a8771be..0a133e6 100644
--- a/src/components/person.component.jsx
+++ b/src/components/person.component.jsx
@@ -1,22 +1,27 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
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] );
+const [ currentAge, setCurrentAge ] = useState(age);
+const timer = useRef( undefined );
+
+useEffect( () => {
+ clearInterval( timer.current );
+ if (started) {
+ timer.current = setInterval( () => {
+ setCurrentAge( previousCurrentAge => previousCurrentAge + 1 );
+ console.log('timer is running');
+ }, delay);
+ }
+ }, [started, delay] );
- return (
- <div className="person">Here is :
- <div>name : <span>{ name }</span> </div>
- <div>age : <span>{ currentAge } </span> </div>
- </div>
- );
+return (
+ <div className="person">Here is :
+ <div>name : <span>{ name }</span> </div>
+ <div>age : <span>{ currentAge } </span> </div>
+ </div>
+);
}
export default Person;
--
GitLab