World Hacker（ぎょうざブログ）

みなさんどうも、こんばんみ～。某ぎょうざです。

はい、今更ながら、Webアプリケーションなどを開発する際に便利なフレームワーク

React（リアクト）を利用する際に、ぎょうざが躓いたところを備忘録として記録しておきます。

同じようなケースあるいは現象で困っている方の参考になれば幸いです。

【目次】

• 有用性：？？？
• 根拠：？？？
• 具体例：重いコンポーネントの再レンダリング防止

• 現象：？？？
• 原因：？？？
• 解決策：？？？

• 現象：Next.jsを動作確認する際にブラウザ上でlocalhostで立ち上げたときに、VScodeのターミナル（PowerShell）上に上記が表示される
• 原因：caniuse-liteを更新し、アプリケーションのビルド時にターゲットブラウザを最新バージョンとすることを促すため
• 解決策：ターミナル上でnpx update-browserslist-db@latestを実行する（参考：https://dev.classmethod.jp/articles/asked-to-update-the-browserslist-when-building-react-app/）

• 現象：
  リストアイテムを map でレンダリングする際に、「Each child in a list should have a unique "key" prop.」という警告が頻発。
• 原因：key propが指定されていない、またはリスト内で一意でない。特に、index をキーに使用したり、timestamp のような重複しうる値をキーの一部に使用したりすると問題が発生しやすい。
• 解決策：

1. リストの各アイテムが持つデータに、アプリケーション全体でユニークなID（例: データベースの主キー、UUIDなど）を持たせる。
2. LearnedWord interfaceに id: number (または string) を定義。
3. 言葉を覚える際（新規追加、データ移行時）に、DBの serial IDや uuidv4() でユニークなIDを付与。
4. リストレンダリング時には、map((item) => <li key={item.id}>...</li>) のように、このユニークなIDを key propに指定する。
   • Tips: これにより、Reactが要素の追加・削除・並び替えを効率的かつ正確に行えるようになり、不要な再レンダリングやstateの不整合を防げる。

• 現象：
  コンソールに「ReactDOM.useFormState has been renamed to React.useActionState. Please update ContactForm to use React.useActionState.」というエラーメッセージが表示される。
• 原因：
  使用しているReactのバージョン（React 19または関連する実験版）で、フォーム状態管理フックの名前とインポート元が変更されたため。
• 解決策：

1. インポート変更: import { useFormState } from "react-dom"; を import { useActionState } from "react"; に変更。
2. フック名変更: コード内の useFormState(...) を useActionState(...) に変更。
   • Tips: useFormStatus は引き続き react-dom からのインポートで問題ない。ReactやNext.jsのバージョンアップ時には、このようなAPIの変更に注意が必要。

Reactは、Webアプリケーション開発に便利な開発フレームワークです。
Javascript（TypeScript）に触れてみたい方におすすめです。

ここまで読んでいただき、ありがとうございました。

以上、ぎょうざでした。