Comment optimiser votre code avec React Compiler (en version bêta)

React Compiler est un nouvel outil expérimental conçu pour améliorer automatiquement l’efficacité des applications React en optimisant l’exécution du code sans nécessiter de modifications significatives de la base de code existante. Découvrez ce que propose le compilateur React en version bêta et ce que cela pourrait signifier pour nos applications React.

À Réagissez à la Conférence 2024l’introduction de Compilateur de réaction a marqué un moment charnière pour les développeurs React. Cet outil expérimental promet de redéfinir l’optimisation des applications React, en rationalisant les performances sans nécessiter de réécritures majeures du code.

Dans cet article, nous examinons ce que propose le compilateur React et comment il pourrait remodeler notre approche de certains développements que nous effectuons dans les applications React.

Mémorisation manuelle dans React

Avant d’explorer React Compiler, il est important de comprendre d’abord les défis de performances auxquels les développeurs React sont souvent confrontés. Considérez cela simple ProductList composant:

function ProductList({ products, category }) {
  const [sortOrder, setSortOrder] =
    useState("asc");

  const handleSortChange = (newOrder) => {
    setSortOrder(newOrder);
  };

  const sortedProducts = products.sort(
    (a, b) => {
      return sortOrder === "asc"
        ? a.price - b.price
        : b.price - a.price;
    },
  );

  const filteredProducts =
    sortedProducts.filter(
      (product) =>
        product.category === category,
    );

  return (
    <div>
      <SortControls
        onSortChange={handleSortChange}
      />
      {filteredProducts.map((product) => (
        <ProductItem
          key={product.id}
          product={product}
        />
      ))}
    </div>
  );
}

Dans l’exemple ci-dessus, le ProductList Le composant gère le tri et le filtrage des produits en fonction des interactions des utilisateurs. À mesure que la liste de produits s’allonge ou que les opérations de tri et de filtrage deviennent plus complexes, des problèmes de performances peuvent survenir en raison de nouveaux rendus inutiles et de calculs coûteux.

Traditionnellement, les développeurs s’appuient sur des techniques d’optimisation manuelle telles que Réagir.mémo, utiliserMémo et utiliserCallback pour résoudre ces problèmes. Voici comment nous pourrions optimiser le ProductList composant:

const ProductList = React.memo(function ProductList({ products, category }) {
  const [sortOrder, setSortOrder] = useState('asc');

  
  const handleSortChange = useCallback((newOrder) => {
    setSortOrder(newOrder);
  }, []); 

  
  const sortedProducts = useMemo(() => {
    return products.sort((a, b) => {
      return sortOrder === 'asc' ? a.price - b.price : b.price - a.price;
    });
  }, [products, sortOrder]); 

  
  const filteredProducts = useMemo(() => {
    return sortedProducts.filter(product => product.category === category);
  }, [sortedProducts, category]); 

  return (
    <div>
      <SortControls onSortChange={handleSortChange} />
      {filteredProducts.map(product => (
        <ProductItem key={product.id} product={product} />
      ))}
    </div>
  );
});

Dans l’exemple de code ci-dessus, les techniques de mémorisation telles que React.memo, useCallback et useMemo sont utilisés pour améliorer les performances du composant en évitant les rendus inutiles et en optimisant les opérations coûteuses en calcul.

La mémorisation est le processus de mise en cache des résultats d’appels de fonctions coûteux et de renvoi du résultat mis en cache lorsque les mêmes entrées se reproduisent. Bien qu’efficace, cette approche manuelle peut prendre du temps et être sujette aux erreurs. Les développeurs doivent soigneusement réfléchir aux parties du code à optimiser, ce qui peut conduire à une suroptimisation ou à des opportunités manquées de gains de performances.

Entrez dans le compilateur React

React Compiler vise à relever ces défis en automatisant le processus d’optimisation. Il est conçu pour fonctionner avec le code JavaScript existant et comprend les Règles de réactionéliminant ainsi le besoin de réécritures approfondies du code.

Avec React Compiler, nous pouvons écrire du code React idiomatique sans nous soucier des optimisations manuelles. Le compilateur applique intelligemment la mémorisation entre les composants et les hooks, évitant ainsi les rendus inutiles et améliorant les performances globales.

Voici comment notre ProductList Le composant peut apparaître lors de l’utilisation de React Compiler :

function ProductList({ products, category }) {
  const [sortOrder, setSortOrder] =
    useState("asc");

  
  const handleSortChange = (newOrder) => {
    setSortOrder(newOrder);
  };

  
  const sortedProducts = products.sort(
    (a, b) => {
      return sortOrder === "asc"
        ? a.price - b.price
        : b.price - a.price;
    },
  );

  
  const filteredProducts =
    sortedProducts.filter(
      (product) =>
        product.category === category,
    );

  return (
    <div>
      <SortControls
        onSortChange={handleSortChange}
      />
      {filteredProducts.map((product) => (
        <ProductItem
          key={product.id}
          product={product}
        />
      ))}
    </div>
  );
}

Remarquez à quel point le code ci-dessus est identique à notre version originale non optimisée. React Compiler s’occupe de l’optimisation en coulisses, permettant aux développeurs de se concentrer sur l’écriture de code propre et maintenable !

Premiers pas avec le compilateur React

Bien que le compilateur React soit actuellement utilisé en production chez Meta, il est important de souligner qu’il est encore au stade expérimental et n’est pas encore jugé stable pour une adoption à grande échelle.

Pour ceux qui souhaitent explorer React Compiler avant sa sortie officielle, l’équipe React encourage quelques étapes à suivre :

Vérifier la compatibilité

Avant d’installer le compilateur, vérifier la compatibilité de votre application React avec le npx react-compiler-healthcheck@latest commande. Ce script évalue divers aspects d’un projet React pour déterminer dans quelle mesure il peut s’intégrer au nouveau compilateur React. En particulier, le script :

• Évaluez le nombre de composants qui peuvent être efficacement optimisés. Un nombre plus élevé indique un meilleur potentiel d’optimisation.
• Évaluer l’utilisation de <StrictMode>. L’utilisation active et le respect suggèrent une plus grande probabilité de conformité aux règles de React.
• Identifiez l’utilisation de bibliothèques incompatibles. Le script détecte les bibliothèques connues qui ne fonctionnent pas bien avec le compilateur.

Installer le compilateur eslint-plugin-react

Améliorez votre capacité à détecter le code non conforme dans votre application React en installant le eslint-plugin-react-compilateur. Ce Plugin ESLint aide à identifier les zones du code qui ne sont pas conformes aux règles établies de React, révélant quelles parties pourraient être négligées par le compilateur pour l’optimisation jusqu’à ce que ces problèmes soient résolus.

Déploiement progressif

Pour ceux qui mettent à jour des projets existants, l’équipe React conseille une approche prudente dans l’intégration du compilateur. Commencez par appliquer le compilateur à un nombre limité de répertoires, puis étendre progressivement son utilisation sur l’ensemble de l’application. Cette stratégie permet d’atténuer les risques associés à d’éventuelles interprétations erronées de la part du compilateur, en particulier dans les cas où les composants ou les hooks peuvent ne pas être entièrement conformes aux règles de React.

Conclure

React Compiler représente une avancée significative dans la façon dont les développeurs peuvent optimiser les applications React sans effort. Il promet de gérer des modèles complexes de mémorisation et d’optimisation. automatiquementpermettant aux développeurs de se concentrer sur la création d’interfaces conviviales et riches en fonctionnalités sans avoir à procéder à des ajustements approfondis des performances.

Pour les développeurs enthousiastes à l’idée d’adopter React Compiler, il est utile d’aborder son intégration avec un plan structuré :

1. Vérifications de compatibilité initiales : Commencez par confirmer que votre projet convient bien à React Compiler grâce à des contrôles de santé.
2. Déploiement stratégique : Présentez progressivement le compilateur à des domaines spécifiques de votre projet pour surveiller son impact et son efficacité, en ajustant son utilisation si nécessaire en fonction des résultats initiaux.
3. Engagement et soutien de la communauté : Rejoignez le Groupe de travail du compilateur React pour obtenir des informations et une assistance supplémentaires alors que vous parcourez les premières étapes de l’adoption.

Dans un prochain article, nous explorerons un didacticiel sur l’ajout de React Compiler à un projet React existant. En attendant, pour des guides plus complets sur la prise en main du compilateur expérimental React, consultez la documentation produite par l’équipe React ci-dessous :

Enfin, pour plus d’informations sur l’utilisation du compilateur, consultez ces excellentes conférences données par les principaux membres de l’équipe React lors de la React Conf 2024 :