React Hooks

こんにちは！ 株式会社iimonでエンジニアをしている遠藤です。 最近業務でReactを触るので、再レンダリングについて勉強したことをアウトプットしようと思い記事にしました。 ハンズオンで挙動を試したい場合はcodeSandboxでNew sandbox > React Typescriptを選択して、コードをコピペしていただければ、挙動を試せるかと思います。 ※ デフォルトで開発環境はStrictModeになっているので、1回の更新につき2回再レンダリングされます。 ※ 記事ではレンダリング回数をわかりやすくするために、StrictModeにはせずに実行しています。 参考: https://…

こんにちは、フロントエンドエンジニアの堀江（@nandemo_3_）です。 だいぶ時間がたってしましましたが、 Reactのドキュメントが一時、Twitterで話題になりました。 話題となったドキュメントはこちらです。 react.dev タイトル「You Might Not Need an Effect」は、 人によって、「Effectは不要」や「非推奨」という言い回しをされており、 今まで多用していたEffectが使えなくなることに、驚きを隠せませんでした。 そして、ちゃんとドキュメントを読むと、語弊があるなと思いましたので、解説がてら紹介します。 You Might Not Need a…

テックタッチアドベントカレンダー17日目を担当する kenshin です。 今年もあと少しで終わりですね。今年を振り返るのために2022年に食べたラーメンの杯数を数えてみると121杯（執筆時点）でした。年末までにあと何杯食べられるかな。 さて、今回は React18 で追加された useSyncExternalStore を使ってみました。 useSyncExternalStore とは 利用場面 使い方 実際に使ってみよう 最後に useSyncExternalStore とは React18 で新たに追加された React フックです。 React コンポーネントの多くは props、st…

こんにちは、ミツモア エンジニア の宮内（@myrsn0104）です。今年もアドベントカレンダーの季節がやってきました。昨年の記事については ミツモアAdvent Calendar 2021 こちらを見てみてください。 この記事では、useStateの正しい使い方について、自身のエピソードを踏まえつつお話ししていきます。（React初心者さん向け） useStateをめちゃ乱用してた わたしがReactに初めて触れたのは2年半前、YouTubeで入門者向けのチュートリアルを見た時です そこで初めて知ったstate管理という概念 これ超便利じゃん👍🏻と思った当時のわたしは、深く考えないままsta…