Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

use-mounted.tsコメント追加

Đang mở
  • Có gì không ổn?
#1,069 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
1/5
Thời gian dự kiến
Dưới một giờ
Mức phù hợp với người mới
48/100
Loại issue
Tài liệu
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
react, typescript
Lĩnh vực
documentation

Hướng nghiên cứu

Bắt đầu bằng việc xác định use-mounted.ts và đọc JSDoc hiện có của nó cùng với tài liệu React về useSyncExternalStore và Issue #23068 được tham chiếu ở đây. Cập nhật comment để mô tả chính xác pattern và các nguồn hỗ trợ pattern đó, tránh đưa ra khuyến nghị mạnh hơn mức bằng chứng cho phép; công việc được xem là hoàn tất khi lý do và các liên kết trong file đã rõ ràng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

調査結果をまとめます。このコードの useSyncExternalStore を使ったマウント判定パターンを直接的に「推奨」している単一の公式ドキュメントページは存在しませんでした。ただし、以下の複数の公式・準公式ソースが組み合わさって、このパターンの根拠となっています。

1. 最も近い公式リファレンス

useSyncExternalStore ドキュメント — getServerSnapshot の説明
https://react.dev/reference/react/useSyncExternalStore

第3引数 getServerSnapshot について、「サーバーレンダリング時とクライアントでのhydration時にのみ使用される」と明記されています。サーバーでは false、クライアントでは true を返すという useMounted のパターンは、この API 仕様の正当な活用です。

2. useEffect ドキュメントの「Displaying different content on the server and the client」セクション

https://react.dev/reference/react/useEffect#displaying-different-content-on-the-server-and-the-client

公式ドキュメントでは useState + useEffect による didMount パターンが紹介されていますが、これは再レンダーのカスケードを引き起こすため、useMounted フックの JSDoc にある「No re-render cascade (unlike useState + useEffect pattern)」というコメントはこの欠点を指摘しています。

3. useLayoutEffect のトラブルシューティングセクション

https://react.dev/reference/react/useLayoutEffect#im-getting-an-error-uselayouteffect-does-nothing-on-the-server

ページ末尾に以下の記述があります：

"If you synchronize your component with an external data store and rely on useLayoutEffect for different reasons than measuring layout, consider useSyncExternalStore instead which supports server rendering."

これはSSR対応のためのフォールバックとして useSyncExternalStore を公式に推奨しています。

4. React GitHub Issue #23068（準公式）

https://github.com/facebook/react/issues/23068

このissueで React チームメンバーが直接コメントしています：

  • sebmarkbage（Sebastian Markbåge, React コア開発者）：「useSyncExternalStore is the API suggested to deal with external mutable state. That API has an SSR option which is where you're supposed to return the value that should be used on the server and the value that should be used during hydration.」

  • gaearon（Dan Abramov）：「I think useSyncExternalStore should work for this?」

さらに同issue内で shredor というユーザーが、useMounted とまったく同じパターンのコードを投稿しています（getClientSnapshot = () => true, getServerSnapshot = () => false）。

結論

コード内のJSDocにある「This pattern is recommended by React team」という記述は、単一の公式ドキュメントページから来たものではなく、上記の複数ソース（特にGitHub Issue #23068でのReactチームメンバーの発言）を総合した解釈です。公式ドキュメントが直接「マウント判定には useSyncExternalStore を使え」と書いているわけではありませんが、API設計の意図とReactチームのコメントから見て、このパターンは妥当なアプローチと言えます。

Ngôn ngữ chính
TypeScript
Star
6
Fork
2
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Chúng tôi chưa kiểm tra các tệp thiết lập môi trường của dự án này. Hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của laststance/utils

Tất cả issue của laststance/utils

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.