Forum Info & Tech

Bonjour, je dois maintenir une appli avec des composants React 18 mais qui utilise encore une vieille lib jQuery (v1.12) pour certains plugins. Depuis la mise à jour, j'ai des conflits de gestion du DOM. Des idées pour cohabiter proprement ?

J'ai eu le même problème ! La solution qui a marché pour moi : isoler les parties jQuery dans des composants spécifiques, avec useEffect pour l'init et le cleanup. Et surtout bien utiliser ReactDOM.createRoot au lieu du render classique.

Attention, jQuery et React qui manipulent le même DOM, c'est la catastrophe assurée... As-tu vraiment besoin de garder jQuery ? Beaucoup de plugins ont des équivalents React maintenant. Sinon, peut-être utiliser un iframe pour isoler complètement les parties jQuery ?

Merci pour les suggestions. Malheureusement je dois garder jQuery pour un plugin de calendrier très custom qui n'a pas d'équivalent React (et le réécrire prendrait des semaines). Je vais tenter l'isolation avec useEffect, mais j'ai peur des fuites mémoires...

J'ai une appli en prod avec le même cas de figure. Ce qui marche bien : 1) Charger jQuery en mode noConflict, 2) Utiliser des portals React pour les zones avec jQuery, 3) Bien détacher tous les event listeners dans le cleanup. Ça fait 8 mois que ça tourne sans souci.

@89 Merci pour le retour d'expérience ! Le mode noConflict + les portals semblent effectivement une piste solide. Je vais tester ça dès demain. Vous utilisez quel système de build ? Webpack ou Vite ?