Créer des applications mobiles avec React Native
Page 6: Le hook useEffect pour gérer les effets de bord
Toutes les pages 
Créer des applications mobiles avec React Native
Page 6
Le hook useEffect pour gérer les effets de bord
Le hook useEffect pour gérer les effets de bord
Le hook useEffect
Gérer les effets de bord d'un composat fonctionnel
En React Native (tout comme en React) le hook useEffect permet d’exécuter du code en réaction à des changements dans le cycle de vie d’un composant. Il est souvent utilisé pour effectuer des opérations secondaires comme des appels API ou des mises à jour manuelles des composants natifs.Pour faire simple, on considère que le hook useEffect est exécuté après qu'un composant soit chargé (un peu comme l'exécution de l'événement onLoad en Javascript), sauf que ce hook peut être réexécuté à chaque fois qu'un composant est rechargé (re-rendering). C’est un outil essentiel pour synchroniser l’état interne du composant avec le monde extérieur.
Comme d'habitude, je vous renvoie vers la section qui traite le hook useEffect dans le cours de React pour plus de détails.
Reprenons l'exemple de la section précédente où on a développé un incrémenteur de valeur. Cette fois on va y intégrer le hook useEffect afin d'afficher un message qui nous invite à cliquer sur le bouton pour commencer l'incrémentation.
Le code ressemblera à ceci:
import { StatusBar } from 'expo-status-bar';
import { useState , useEffect } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default function App() {
const [nbr,setNbr]=useState(0)
const [message,setMessage]=useState(null)
const handleButton=()=>{
setNbr(nbr+1)
}
useEffect(()=>{
setMessage("Cliquez pour incrémenter")
},[])
return (
<View style={styles.container}>
<Text>{message}</Text>
<Button title="Incrémenter"
onPress={handleButton} />
<Text>{nbr}</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
lex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Bien que l'exemple ne soit pas vraiment très pertinent, mais il sert juste à clarifier le rôle du hook useEffect.
import { useState , useEffect } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default function App() {
const [nbr,setNbr]=useState(0)
const [message,setMessage]=useState(null)
const handleButton=()=>{
setNbr(nbr+1)
}
useEffect(()=>{
setMessage("Cliquez pour incrémenter")
},[])
return (
<View style={styles.container}>
<Text>{message}</Text>
<Button title="Incrémenter"
onPress={handleButton} />
<Text>{nbr}</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
lex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Après exécution, on obtient ce résultat:
Cliquez pour incrémenter
0
Vous avez remarqué qu'on a ajouté un nouveau state du nom de message initialisé avec la valeur nulll:
const [message,setMessage] = useState(null)
Ce state sera placé au dessous du buton dans un composant <Text> à l'aide de l'interpolation JSX:
<Text>{message}</Text>
Après le chargement des composants de la vue, le hook useEffect sera déclenché et changera le state message à l'aide du setter du state comme ceci:
useEffect(()=>{
setMessage("Cliquez pour incrémenter")
},[])
Le tableau vide [] passé en second argument à useEffect sert à contrôler la fréquence d’exécution de l’effet. Lorsqu’il est vide, cela signifie que l’effet ne s’exécutera qu’une seule fois, juste après le montage du composant. Si on met des variables (states) dedans (exemple [nbr]), l’effet se réexécutera à chaque fois le state nbr a changé.
setMessage("Cliquez pour incrémenter")
},[])
Si on place le state message dans le tableau qui constitue le second argument de useEffect, alors on aura un re-redering infini, car chaque changement de message redéclenche le hook useEffect qui met à jour message et ainsi de suite.
Page 6
Le hook useEffect pour gérer les effets de bord
Le hook useEffect pour gérer les effets de bord
