useMeasure dimensions out of sync in react18
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Idoneità per principianti
- 35/100
- Tipo di issue
- Bug
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Ferma
- Stack tecnologico
- react, typescript
- Ambito
- frontend
Direzione di ricerca
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.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
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
- Lingua principale
- TypeScript
- Stelle
- 44k
- Fork
- 3.3k
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Preparare l'ambiente
- Nessun Dockerfile né file Docker Compose
- Ha un modello di pull request
- Leggi la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di streamich/react-use
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
-
Add Generic Fn for useDebounceForse già presa @itsmejay80 l’ha presa 189 giorni fa. Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 64/100
-
useVideo.story.tsx - sampleVideo can not be loadedForse di nuovo libera Una pull request per questa issue è stata chiusa senza essere unita. Aperta
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 62/100
-
useSlider: event callbacks are not updatedForse già presa @erykpiast l’ha presa 1836 giorni fa. Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 62/100
Tutte le issue di streamich/react-use
Issue simili
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
I maintainer di solito rispondono entro 1 giorno
-
bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
jbacalso24/mimry#459 · 1 commento ·
I maintainer di solito rispondono entro 1 giorno
-
architecture help wanted hive/claimed-by-architect origin/architect stage/030-pr-in-progress tech-debt
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
kubestellar/console#24422 · 1 commento ·
I maintainer di solito rispondono entro 1 giorno
-
area: backends type: docs
Difficoltà 1/5 1-3 ore Idoneità per principianti 83/100
schlessera/brain-kit#2383 ·
I maintainer di solito rispondono entro 1 giorno
-
agent duplicate providers tool triaged
Difficoltà 2/5 1-3 ore Idoneità per principianti 74/100
I maintainer di solito rispondono entro 1 giorno