cssinjs/jss

themed useCreateStyles leaks style tags in StrictMode

Open

#1 332 ouverte le 20 avr. 2020

Voir sur GitHub
 (1 commentaire) (1 réaction) (0 assignés)JavaScript (7 000 stars) (434 forks)batch import
bughelp wanted

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

Stack technique
javascriptreact
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.
4
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-2 days
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
stale
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
clear
Prérequis
React StrictModejss library
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
35
Direction de recherche
Focus on the `useStyles` hook in react jss. Investigate how it creates and disposes style sheets during render and effects. The bug likely arises because sheets are created during render but only disposed in an effect cleanup, which conflicts with React's StrictMode double rendering. Study the codesandbox reproduction and the relevant source files in the jss repository to understand the timing. Consider proposing to move sheet management to a side effect or use a ref to track renders.