Si vous avez aimé l'article, vous pouvez acheter un café pour soutenir Achetez-moi du café

Garder les composants purs

Certaines fonctions JavaScript doivent être pures. Les fonctions pures effectuent uniquement un calcul et rien d'autre. En écrivant vos composants sous forme de fonctions pures, vous pouvez éviter toutes les erreurs déroutantes et les comportements imprévisibles à mesure que votre base de code se développe. Vous pouvez faciliter la gestion de vos composants.

Pureté

Alors, comment pouvons-nous créer une fonction pure ? Et quelles caractéristiques doit avoir une fonction pour qu’elle soit pure ? Une fonction pure doit être une fonction présentant les caractéristiques suivantes :

• Il s'occupe de ses propres affaires. Il ne modifie aucun objet ou variable qui existait avant son appel.

• Même entrée, même sortie. Avec les mêmes entrées, une fonction pure devrait toujours renvoyer le même résultat. Cela ne devrait pas donner des résultats différents aux mêmes entrées.

Considérons une formule mathématique : y = 2x

Si x = 2, y = 4. Cet invariant est toujours le même résultat.

Si x = 3, y = 6. Cet invariant est toujours le même résultat.

Si x = 3, parfois y ne sera pas égal à 9, –1 ou 2,5, selon une autre situation.

Si y = 2x et x = 3 alors y sera toujours égal à 6.

Si nous en faisions une fonction JavaScript :

function getDouble(number) {
  return 2 * number;
}

getDouble est une pure fonction. Si vous lui transmettez 3, il renverra 6. Toujours.

React est construit autour de ce concept. Cela suppose que chaque composant se comporte comme une fonction pure, ce qui signifie que vos composants React doivent toujours renvoyer la même sortie JSX avec les mêmes entrées.

Expliquons un composé pur en donnant des exemples.

function Member({ user }) {
  return (
    
    
      
 register {user} 
    
  );
}

export default function App() {
  return (
    

      
      
    
  );
}

Il renvoie toujours quel que soit le paramètre utilisateur indiqué.comme une formule mathématique

Conclusion

Un composant doit être pur, ce qui signifie :

Il s'occupe de ses propres affaires. Il ne doit modifier aucun objet ou variable qui existait avant le rendu.

Mêmes entrées, même sortie. Étant donné les mêmes entrées, un composant doit toujours renvoyer le même JSX.