React.js : comment corriger l'erreur UseEffect function must return a cleanup function or nothing ?
Composé au départ de composants créés à partir de classes, le framework JavaScript ReactJS a été développé. Depuis la version 16.8, les composants fonctionnels, créés donc par des fonctions, ont été ajoutés pour simplifier et factoriser davantage le code. Les Hooks permettent d'apporter certaines gestions de changement d'état à ce nouveau type de composant. Parmi eux, le Hook "useEffect" permet d'effectuer des traitements lors de l'affichage du composant.
Il y a certaines conditions à remplir par la fonction qui est appelée dans le Hook "useEffect()". Elle ne peut retourner que 2 types d'éléments possibles : rien ou une fonction. Celle-ci sera alors appelée lors de la destruction du composant. Les fonctions asynchrones et les promises ne sont pas utilisables directement comme fonction. Si ces conditions ne sont pas remplies, le framework vous affichera le message d'erreur "UseEffect function must return a cleanup function or nothing". Si vous voulez utiliser du code asynchrone, vous pouvez le faire dans votre fonction.
//Voici un exemple de code correct
function exemple() {
const [data, dataSet] = useState(null)
useEffect(() => {
async function fetchMyAPI() {
let reponse = await fetch('htttp://monsite.fr/api')
reponse = await reponse.json()
dataSet(reponse)
}
traitementDeLAPI()
}, [])
return {JSON.stringify(data)}
}
De manière générale, il est conseillé de simplifier le plus possible le code des fonctions appelées dans le Hook "useEffect", afin d'éviter une erreur dans votre code.