cssinjs/jss

themed useCreateStyles leaks style tags in StrictMode

Ouverte

#1 332 ouverte le 20 avr. 2020

Voir sur GitHubGuide contributeur
 (1 commentaire) (1 réaction) (0 personne assignée)JavaScript (434 forks)batch import
bughelp wanted

Métriques du dépôt

Stars
 (7 000 étoiles)
Métriques de merge PR
 (Métriques PR en attente)

Description

Expected behavior: <style> elements get disposed when re-rendering in StrictMode.

Describe the bug: When using themed styles (possibly prop-based as well) re-rendering a component using useStyles with a new theme will leak their <style> elements.

This is possibly due to useStyles managing the sheet during render but unmanaging it in a effect cleanup. A component can render multiple times (in concurrent and strict mode) before an effect is scheduled.

Codesandbox link: https://codesandbox.io/s/determined-wood-8d0s7?file=/src/App.js:513-622

Click "rerender" and see that the number of <style> element grows with every "rerender" click.

Versions (please complete the following information):

  • react-jss: 10.1.1
  • Browser [e.g. chrome, safari]: Chrome 81
  • OS [e.g. Windows, macOS]: Ubuntu 18.04
  • react: 16.13.1

Guide contributeur

Direction de recherche
Concentrez vous sur le hook `useStyles` dans react jss. Étudiez comment il crée et supprime les feuilles de style pendant le rendu et les effets. Le bogue survient probablement parce que les feuilles sont créées pendant le rendu mais ne sont supprimées que lors du nettoyage d'un effet, ce qui entre en conflit avec le double rendu de StrictMode de React. Étudiez la reproduction sur codesandbox et les fichiers sources pertinents dans le dépôt jss pour comprendre le timing. Envisagez de proposer de déplacer la gestion des feuilles dans un effet secondaire ou d'utiliser une ref pour suivre les rendus.
Stack technique
javascriptreactnodejs
Domaine
frontend
Type d'issue
Bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
React basicsCSS in JS concepts
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
60