useMeasure dimensions out of sync in react18
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 35/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- react, typescript
- 領域
- frontend
調査の方向性
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.
索引モデルが issue の本文から書いたものです。
説明
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
- 主要言語
- TypeScript
- スター
- 44k
- フォーク
- 3.3k
- PR マージ指標
- 30日以内にマージされた PR はありません
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
streamich/react-use のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
-
Add Generic Fn for useDebounce対応中かも @itsmejay80 が 191 日前に担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 64/100
-
useVideo.story.tsx - sampleVideo can not be loaded再び着手できるかも このイシューのプルリクエストはマージされずにクローズされました。 オープン
難易度 1/5 1時間未満 初心者へのやさしさ 62/100
-
useSlider: event callbacks are not updated対応中かも @erykpiast が 1838 日前に担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
streamich/react-use の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 66/100
getsentry/sentry-conventions#732 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
status:in-linear status:team-assigned team:nodes
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
motiondivision/motion#3955 ·
メンテナーはふだん 1 日以内に返信
-
enhancement
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
equinor/prisma-decision-web#919 ·
メンテナーはふだん 1 日以内に返信
-
難易度 1/5 1時間未満 初心者へのやさしさ 83/100