よく <code>useEffect</code> の中で <code>set〇〇</code> と state の更新することがあります。
state が更新されるので再レンダーされて、 また初回のuseEffectが呼ばれることで無限ループに入るのではないかと思っていましたが、誤解していたので忘備録として、<code>useEffect</code> 
の呼ばれるタイミングをまとめました。
詳細は公式ドキュメントの <a href="https://react.dev/learn/synchronizing-with-effects" title="Synchronizing with Effects">Synchronizing with Effects</a> 
に書いてあります。
<h2 id="useeffect-が呼ばれるタイミング">useEffect が呼ばれるタイミング<a aria-hidden="true" tabindex="-1" href="#useeffect-が呼ばれるタイミング"></a></h2>
<div class="remark-highlight"><pre class="language-js"><code class="language-js">useEffect(() => {
 // This runs after every render
 // 依存配列を省略すると、毎回のレンダー後に呼ばれる
});

useEffect(() => {
 // This runs only on mount (when the component appears)
 // 依存配列を空配列にすると、マウント時のみ呼ばれる
}, []);

useEffect(() => {
 // This runs on mount *and also* if either a or b have changed since the last render
 // 依存配列に a と b を指定すると、a と b が変更されたときに呼ばれる
}, [a, b]);
</code></pre></div>
マウントと再レンダーを同じタイミングと捉えると、毎回 useEffect が呼ばれて、余計な処理が多くなってしまうと考えがちです。

[React Hooks] useEffect が呼ばれるタイミング

作成したブログのテンプレートをGithub(<a href="https://github.com/ShuntaH/next-ts-blog-template" title="next-ts-blog-template">next-ts-blog-template</a>)で公開していて <a href="https://next-ts-blog-template.vercel.app/" title="DEMO SITE">DEMO SITE</a> から見ることができます。
ちなみに新卒として入社する前にちょうど Nuxt.js が話題になっていてそのときにもブログをそれで作成してみましたが(放置されている)、そのときはSEO対策も web vital 事項なども考えていなかったので、その時よりは多角的にみて実装できたかと思います。
<h2 id="なぜブログを作成したか">なぜブログを作成したか<a aria-hidden="true" tabindex="-1" href="#なぜブログを作成したか"></a></h2>
自分のアウトプットのためですが、昨今、Qiita や Zenn、noteなどがあるのになぜブログなのかというと自分のプラットフォームが欲しかったためです。
また新しいフロントエンドの技術に触れたい時も、 ブログぐらいがちょうどよい作業ボリュームで、また以前に使っていたフレームワークとも比較しながら試すことができます。
<h2 id="なぜ-nextjs-を選択したか">なぜ Next.js を選択したか<a aria-hidden="true" tabindex="-1" href="#なぜ-nextjs-を選択したか"></a></h2>
普段業務ではVue.js(Nuxt.js)を使っています。
2023年時点ではトレンドは React が人気でかつ、Hooks の概念の話についていけなかったりして、 フロントエンドにおいてキャッチアップが必要だと思い、今回 React 入門として Next.js でブログを作成してみました。
また業務で Nuxt2 は近いうちに Deprecated になるためその移行先を考えなければなりません。
Nuxt2 と Nuxt3 はほぼ別物のフレームワークといってもよいぐらいで、既存のプロジェクトを書き換えるというよりはリポジトリを新しく作成して作り直すことになるため、Nuxt3 と Next.js のどちらを選んでも学習コストはほぼ変わらないかなと思い試してみました。
なぜ React ではなくいきなり、Next.js なのかというと、 Next.js は React のフレームワークなので、React の学習コストを抑えることもできます。
特に今回はブログなのでSSGをしようとするとReactでは難しいです。また実務に組み込むならおそらく Next.js が選択されるので、最初からNext.jsを使っておくほうが楽です。
途中ブログを作るなら Hugo も気になり道が逸れそうになりました。
<h2 id="学習期間">学習期間<a aria-hidden="true" tabindex="-1" href="#学習期間"></a></h2>
仕事終わりと週末にやっていました。
Reactの概念は、Vue の基礎を理解していればすぐに理解できると思います。
大体 React 自体は２週間かからないぐらいで Hooks に馴染んできて、Next.js の概要把握は１週間ぐらいです。
React と Vue でライフサイクルが結構違ったので戸惑いました。
<code>useEffect</code> が vue の <code>mounted</code> と <code>watch</code> の組み合わせのようなものであると気づけば楽ですが、 
それまで React には <code>mounted</code> といったわかりやすいライフサイクルはないのかと戸惑いました。
コーディングに慣れるのに苦労したというより、あらゆる選定のほうに苦労しました。
まずスタイリングだったら、CSS in JS と CSS Modules があり、状態管理だったら 
Redux と Recoil があり、Hooksの Context と Reducer などいろいろあります。
記事の管理はCMSではなく、Markdownにしました。
どこかのプラットフォームに依存すると、そのプラットフォームから移行しないといけなくなったときの手間がかかると思い Markdown にしたのですが、タグで例えば <code>React</code> と <code>react</code> のように同じようなものが、これから混在していくと思うので元から管理画面機能がある Django を使った自前のCMSにいずれ移行するかもしれません。
学習には基本的に React も Next.js も公式ドキュメントを読みました。とくに React の公式ドキュメントは Hooks のために新しく書き直されたドキュメントがあったので、最近の React のキャッチアップには最適でした。
そこから、Hooks のリファクタリングや Google Tag Manager の導入、SEO対策、全文検索の実装や、RemarkとRehypeを使ってのMarkdownからの変換などしていてデプロイまで、結局、1ヶ月強くらいかかりました。
この時点で次のフレームワークでこの見た目と機能を作り直すのは大変だなと思っていて、もっとシンプルな方が良いです。
<h2 id="react-と-vuejs-の比較">React と Vue.js の比較<a aria-hidden="true" tabindex="-1" href="#react-と-vuejs-の比較"></a></h2>
<blockquote>
Vue は React より easy
</blockquote>
と聞いたことがありますが、それはそうだと思いました。
Vue の方が直感的に書けます。
しかし、Vue は それ独自の構文があり、新しく覚えることが増えます。一方で React はほぼ JavaScript の知識で書けるので長期的には React の方が楽かと思いました。
また React と Next.js の公式ドキュメントでは Domの作成の仕組みから web vitals まで説明してくれるので、最近のフロントエンド全般の学習にもなります。
そのため Vue が好きな方でも、React は一度は触っておくと面白いのではないかと思います。

Tag: react