Gérer les effets de bord

Les effets de bord ont légèrement changé depuis la publication de ce tuto. Le code ci-dessous ne fonctionnera peut-être pas car il faut s'assurer de l'ordre de chargement/sauvegarde.

Dans ce dernier chapitre, nous allons voir comment gérer les effets de bord. Vous trouverez plus d'information sur ce sujet sur la documentation officielle : https://fr.reactjs.org/docs/hooks-effect.html

Réaliser une tâche à chaque mise à jour de l'interface

React.JS propose un "hook" nommé "useEffet", qui permet de lancer un bloc de code à chaque mise à jour de l'interface graphique.

Il suffit d'appeler dans votre composant la méthode "useEffect", et de lui passer une fonction.

Dans le cas de notre application, nous avons écrit une fonction permettant de sauvegarder nos données et nos souhaitons l'appeler après chaque modification. Notre composant "App.js" pourra donc contenir le code suivant :

  useEffect(() => { 
    saveTodos();
  })

  const saveTodos = () => {
    const data = JSON.stringify(todos);
    localStorage.setItem("data", data);
  }

Réaliser une tâche au démarrage du composant

Si vous ajoutez un tableau vide en second argument de "useEffect", le code associé ne sera pas appelé à chaque mise à jour.

C'est une bonne solution pour appeler les tâches à réaliser au démarrage de vos applications (comme l'appel d'une API par exemple).

Dans notre cas, nous avons besoin de charger les "todos" sauvegardés au démarrage de notre application :

 useEffect(() => { 
    loadData();
  }, [])

 const loadData = () => { 
    const data = JSON.parse(localStorage.getItem('data') || '[]');
    setTodos(data);
 }