cssinjs/jss

themed useCreateStyles leaks style tags in StrictMode

Open

#1.332 aberto em 20 de abr. de 2020

Ver no GitHub
 (1 comment) (1 reaction) (0 assignees)JavaScript (434 forks)batch import
bughelp wanted

Métricas do repositório

Stars
 (7.000 stars)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 30d)

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

Guia do colaborador

Direção de pesquisa
Foque no hook `useStyles` no react jss. Investigue como ele cria e descarta folhas de estilo durante a renderização e os efeitos. O bug provavelmente surge porque as folhas são criadas durante a renderização, mas só são descartadas na limpeza de um efeito, o que entra em conflito com a renderização dupla do StrictMode do React. Estude a reprodução no codesandbox e os arquivos de origem relevantes no repositório jss para entender o timing. Considere propor mover o gerenciamento das folhas para um efeito colateral ou usar uma ref para rastrear as renderizações.
Pilha de tecnologia
javascriptreactnodejs
Domain
frontend
Tipo Issue
Bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 horas
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
React basicsCSS in JS concepts
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
60