cssinjs/jss

themed useCreateStyles leaks style tags in StrictMode

Open

#1332 aperta il 20 apr 2020

Vedi su GitHub
 (1 commento) (1 reazione) (0 assegnatari)JavaScript (434 fork)batch import
bughelp wanted

Metriche repository

Star
 (7000 star)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

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

Guida contributor

Direzione di ricerca
Concentrati sull'hook `useStyles` in react jss. Indaga come crea e smaltisce i fogli di stile durante il rendering e gli effetti. Il bug probabilmente sorge perché i fogli vengono creati durante il rendering ma smaltiti solo nella pulizia di un effetto, il che entra in conflitto con il doppio rendering di StrictMode di React. Studia la riproduzione su codesandbox e i file sorgente pertinenti nel repository jss per comprendere la tempistica. Considera di proporre di spostare la gestione dei fogli in un effetto collaterale o di utilizzare un ref per tracciare i rendering.
Tech stack
javascriptreactnodejs
Dominio
frontend
Tipo issue
Bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 ore
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Attiva
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
React basicsCSS in JS concepts
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
60