reactjs / reactjs/react.dev

useInsertionEffect other use-case

Abierto
#5,230 0 comentarios 0 reacciones 0 asignados Ver en GitHub

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

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. 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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.