Actualiser une page dans React

1. Utilisez la méthode reload() pour actualiser manuellement une page dans React
2. Mettre à jour l’état du composant pour actualiser une page dans React

L’un des avantages significatifs de React est que vous n’avez pas besoin d’actualiser la page pour voir les mises à jour les plus récentes. React met automatiquement à jour la vue chaque fois que l’état change.

Pourtant, il est parfois nécessaire de rafraîchir la page manuellement. Par exemple, un simple rechargement peut corriger des incohérences dans l’état.

D’autres fois, vous voudrez peut-être annuler certaines actions inutiles. Voyons comment vous pouvez actualiser manuellement la page dans React, quelle qu’en soit la raison.

Utilisez la méthode reload() pour actualiser manuellement une page dans React

La plupart du temps, nous souhaitons déclencher une actualisation manuelle dans React après que l’utilisateur a cliqué sur un bouton, un texte ou un autre élément. Pour ce faire, nous devrons créer un gestionnaire d’événements. Les navigateurs proposent nativement une interface window avec un objet location, incluant la méthode reload().

C’est une méthode assez simple, comme vous pouvez le voir dans l’exemple ci-dessous. Il ne prend qu’un seul argument, qui sert à spécifier si le navigateur doit ou non recharger complètement le contenu de la page depuis le serveur ou uniquement le cache.

Nous devrons utiliser cette méthode dans notre gestionnaire d’événements pour recharger avec succès une page. Regardons un exemple :

class App extends Component {
  render() {
    return <button onClick={() => window.location.reload()}>Refresh</button>;
  }
}

C’est un exemple basique d’actualisation manuelle de la page dans React. N’oubliez pas que le gestionnaire d’événements onClick doit être égal à une définition de fonction, et non à l’appel. De cette façon, il n’est exécuté que lorsque l’utilisateur clique sur le bouton. Vous pouvez expérimenter vous-même le code sur playcode.

Alternativement, vous pouvez utiliser les méthodes de cycle de vie pour recharger la page une fois montée. Les composants fonctionnels n’ont pas de méthodes de cycle de vie, mais vous pouvez obtenir le même résultat en utilisant le crochet useEffect().

Mettre à jour l’état du composant pour actualiser une page dans React

Les modifications apportées à l’état local du composant déclenchent automatiquement la mise à jour. C’est le moyen naturel de gérer les mises à jour de page dans React, il est donc plus conforme aux directives officielles de “bonnes pratiques” des créateurs de React.

Si elles sont construites correctement, les applications React n’ont pas besoin d’être actualisées manuellement pour charger les modifications les plus récentes de l’état. Ce processus est automatiquement déclenché.

Le seul but d’avoir un état local est que toute modification de l’état sera automatiquement reflétée. Regardons un exemple :

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      textInput: ""
    }
  }
  render() {
    return <div>
            <input type="text" onChange={(e) => this.setState({textInput: e.target.value})} />
            <h1>{this.state.textInput}</h1> 
           </div>
  }
}

C’est une démonstration assez simple de la façon dont les changements d’état déclenchent automatiquement l’actualisation de la page (également appelée re-rendu) dans React. Nous initions l’état avec une propriété textInput et mettons à jour la propriété chaque fois que la valeur dans le champ input change.