フロントエンドカンファレンス北海道2024
LT(5分)
初登壇
useSyncExternalStoreを使ってスタイリッシュにuseMediaQueryを実装したおはなし
ゆーと
10tera1
フロントエンド開発において、レスポンシブ対応はとても重要です。
レスポンシブデザインを実現する方法として、メディアクエリが使われると思います。
Reactでメディアクエリの真偽値を受け取れるhook（useMediaQuery）を、useSyncExternalStoreを使って実装したことについてお話しします。
新卒の初学者である私がuseMediaQueryを実装していく中で、Hydration Errorや画面のチラつきなどに遭遇し、つまづいた過去があります。
つまずきを解消していき、辿り着いたuseSyncExternalStoreを用いてどのように実装したのかを紹介します。
初学者だからこそ気づけたつまずきポイントなども、お話しできればと思います。