Explorer les différences entre React et Solid

Nous avons examiné les différences entre React, pionnier du JSX, et Solid.js, dérivé du JSX mais qui, contrairement à React, n’utilise pas de DOM virtuel.

En partant de l’hypothèse d’un développeur React qui aborde Solid.js, voici les différences de base que l’on peut relever.

• Les hooks de React ne peuvent être utilisés qu’à l’intérieur d’une fonction de composant, tandis que les fonctions de gestion d’état de SolidJS peuvent être appelées sans cette contrainte, presque comme une technologie de gestion d’état indépendante.
• La fonction de side-effect de React, useEffect, permet de gérer en une seule fonction à la fois les effets de bord et leur nettoyage, et il est possible de spécifier manuellement les états à observer. En revanche, la fonction de side-effect de Solid.js, createEffect, dépend des états de gestion d’état explicitement mentionnés dans son corps, comme dans Svelte ; elle ne reçoit pas manuellement la liste des états à observer, ne fournit pas de fonction de retour, mais offre un environnement de cycle de gestion d’état permettant d’utiliser une fonction de nettoyage via onCleanup.
• En ce qui concerne la gestion de la portée de l’état, il n’y a pas de différence d’usage notable avec React.
• Pour les composants dynamiques, les conditions et les boucles, React permet de s’en sortir facilement avec une logique JS classique, puisque le corps est réécrit lors des changements d’état ; Solid, lui, conserve le corps et résout cela via les composants intégrés qu’il fournit.
• Solid.js propose également les composants lazy et <Suspense> de React.
• Contrairement à React, Solid fournit des fonctions utilitaires de gestion d’état pensées pour la réactivité asynchrone.
• L’usage de ref dans React et dans Solid.js est similaire, mais alors que React utilise souvent une fonction dédiée comme useRef pour les références, Solid.js peut simplement s’appuyer sur une variable let.
• Solid.js propose, comme Svelte, une fonctionnalité d’action use qui gère le cycle de vie du JS vanilla.
• Dans React, les props peuvent être utilisées isolément après déstructuration sans problème, car le corps est réécrit quand elles changent ; dans Solid.js, cette approche n’est pas réactive, ce qui empêche d’utiliser une prop seule après déstructuration. Il faut donc soit conserver l’objet tel quel, soit le décomposer via des fonctions utilitaires dédiées (splitProps, etc.) tout en continuant à l’utiliser comme un objet.

[firea32]

La plus grande différence, c’est celle entre useState et useSignal. Comme on ne voit pas clairement comment les données sont liées, je me souviens avoir vraiment galéré pour déboguer.