useInsertionEffect other use-case
Ninguém assumiu esta issue ainda.
- Linguagem predominante
- JavaScript
- Estrelas
- 11.8k
- Forks
- 7.9k
- Merge médio
- 1d 11h
- PRs com merge (30d)
- 11
Descrição
Hello,
in the docs it is stated that useInsertionEffect should be used only by css-in-js library authors, I think I've came across an other use case. I'm using forwardRef with a type HTMLDivElement[] where through a callback ref I'm pushing the refs in to the array as so ref={(ref) => ref && innerRef.current.push(ref)} and syncing it outside with a useImperativeHandle
However this needs a cleanup whenever the component re-renders, since useInsertionEffect fires sync BEFORE the dom is mutated, it is perfect for the cleanup of the innerRef array.
The code is as follows
const ComponentReturningAnArray = React.forwardRef<HTMLDivElement[], { data: string[] }>(({array}, outerRef) => {
const innerRef = useRef<HTMLDivElement[]>([]);
useImperativeHandle<HTMLDivElement[], HTMLDivElement[]>(outerRef, () => innerRef.current, [innerRef.current]);
useInsertionEffect(() => {
innerRef.current = [];
});
return (
<>
{
data.map((d) => (<div ref={(ref) => ref && innerRef.current.push(ref)}>{d}</div>))
}
</>
)
});
Guia de contribuição
Primeiros passos
- Leia a issue inteira e depois o guia de contribuição do projeto.
- Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
- Faça um fork do repositório e trabalhe em uma branch.
- Abra um pull request que referencie o número da issue.
Direção de pesquisa
Comece com a declaração da documentação sobre useInsertionEffect e com o exemplo fornecido ComponentReturningAnArray. Verifique se essa limpeza da coleção de refs é um caso de uso pretendido e determine como a documentação deve descrevê-la. Considera-se concluído quando a orientação refletir com precisão os casos de uso compatíveis e o exemplo for abordado.
Escrita pelo modelo de indexação a partir do texto da issue.
Avaliação
- Stack de tecnologia
- javascript, react
- Domínio
- documentation
- Tipo de issue
- Documentação
- Dificuldade
- 3/5
- Tempo estimado
- 1-2 dias
- Status de atividade
- Estagnada
- Clareza
- Razoavelmente clara
- Facilidade para iniciantes
- 35/100