useMeasure dimensions out of sync in react18
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Aptitud para principiantes
- 35/100
- Tipo de issue
- Error
- Claridad
- Bastante claro
- Estado de actividad
- Estancado
- Stack tecnológico
- react, typescript
- Área
- frontend
Línea de trabajo
Start by locating the useMeasure implementation and its ResizeObserver state update, then reproduce the React 18 timing issue using the linked CodeSandbox. Compare the behavior with React's flushSync guidance and define whether synchronization is always applied or exposed as opt-in; done means dimensions are reliable for visual updates and the behavior is covered by appropriate tests.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
React version: 18
Due to automatic batching in react18, state updates in useMeasure's ResizeObserver may be applied after paint. This can cause visual glitches if we depend on useMeasure dimensions for visual updates.
Same issue is raised in react: https://github.com/facebook/react/issues/24331
They are recommending that state updates in ResizeObserver should be wrapped in flushSync from ReactDOM.
Can we do this in useMeasure or at least add optional support for flushSync in useMeasure. So that consumers can opt-in if they are using the dimensions for visual update(For eg. in useLayoutEffect).
Link to code example: https://codesandbox.io/s/amazing-montalcini-j6lz46?file=/src/App.js
- Lenguaje dominante
- TypeScript
- Estrellas
- 44k
- Forks
- 3.3k
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Preparar el entorno
- Sin Dockerfile ni archivo de Docker Compose
- Tiene una plantilla de pull request
- Leer la 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.
Más de streamich/react-use
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
-
Add Generic Fn for useDebouncePosiblemente ocupada @itsmejay80 la tomó hace 188 días. Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 68/100
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 64/100
-
useVideo.story.tsx - sampleVideo can not be loadedQuizá libre de nuevo Un pull request para esta issue se cerró sin fusionarse. Abierto
Dificultad 1/5 Menos de una hora Aptitud para principiantes 62/100
-
useSlider: event callbacks are not updatedPosiblemente ocupada @erykpiast la tomó hace 1835 días. Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 62/100
Todos los issues de streamich/react-use
Issues similares
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
polarsource/polar#15580 ·
Los mantenedores suelen responder en 1 día
-
accepted bug via-triage
Dificultad 2/5 1-3 horas Aptitud para principiantes 69/100
pingdotgg/t3code#20931 · 1 comentario ·
Los mantenedores suelen responder en 1 día
-
bug/1-unconfirmed kind/bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
Los mantenedores suelen responder en 1 día
-
Dificultad 1/5 Menos de una hora Aptitud para principiantes 83/100
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
ranxianglei/billion-context#3583 ·
Los mantenedores suelen responder en 1 día