図で分かるReact18のしくみ

2022/12/18 97 users GitHub React 内部 各セクション コード

これは何? この記事はReact18がどのように動いているのかをまとめた記事です。なるべくコードの記載はせず、図を使用して読みやすさを重視しています。また、これからReactの内部のコードを読む予定の方のために、各セクションの終わりにアコーディオン形式でGitHubのリンクを貼っています。 ※ この記事はnote株式会社 A... 続きを読む

React 18のSuspenseを使ってReact Hook Formの非同期な初期値の扱いを簡単にする - Qiita

2022/07/16 16 users Suspense Qiita SaaS taro Form

はじめに 普段はスタートアップで建設業界向けのSaaSの開発をしている作っているtaroと申します。 今回はReact18で登場したSuspenseを触っていたら、React Hook Formでフォームの初期値に非同期な値を設定するのが簡単になりそうだなーって思ったので、試してみました。 React Hook Formを使ったことがない方でもきっと... 続きを読む

React18のTransitionの動作確認

2022/04/04 15 users Ｔｒａｎｓｉｔｉｏｎ React API 結論 表現

React18のTransitionの動作確認をした。 useTransitionを使った例を用意し、React18のAPIを使わず同様の体験を提供すると、どのようになるかを確認する。また、startTransitionやuseDeferredValueでも同じことができるか確認する。 先に結論 Reactの18の新機能を使わずとも似たような表現はできるが体験は提供できない。... 続きを読む

useRefでステートを管理するのはReact18でアンチパターンになるからやめよう - Qiita

2022/01/19 41 users useState useReducer Qiita ステート

こんにちは。最近、Reactでのステート管理において「useStateの中にステートを置くのではなく、useRefで得たrefオブジェクトの中にステートを置いてuseState（またはuseReducer）をコンポーネントの再レンダリングを発生させるためだけに使う」というやり方を複数の記事で見かけました。このパターンは、今（React 17以... 続きを読む