useInsertionEffect other use-case
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- JavaScript
- Estrellas
- 11.8k
- Forks
- 7.9k
- Merge medio
- 1 d 11 h
- PR fusionados (30 d)
- 11
Descripción
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>))
}
</>
)
});
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Comienza con la afirmación de la documentación sobre useInsertionEffect y el ejemplo proporcionado ComponentReturningAnArray. Comprueba si esta limpieza de la colección de refs es un caso de uso previsto y determina cómo debería describirlo la documentación. Se considera terminado cuando la guía refleja con precisión los casos de uso compatibles y se aborda el ejemplo.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- javascript, react
- Área
- documentation
- Tipo de issue
- Documentación
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100