Development

hooks are not allowed in server components as they run only once and don't run on the client (where hooks are supposed to be executed).

サーバコンポーネントはブラウザに送信されないため、useState のようなインタラクティブな API を使用できません。

React Server Components の “server” とはこの別の環境を指しています。サーバコンポーネントは、CI サーバでビルド時に一度だけ実行することも、ウェブサーバを使用してリクエストごとに実行することもできます。

非同期コンポーネントはクライアントではサポートされていないため、プロミスの待機は use を使用して行います。

class MyError extends Error { constructor(message) { super(message); this.name = 'MyError'; } }

プログラミング言語に関係なく、メモリーのライフサイクルはほぼいつも同じです。 必要なメモリーを割り当てる 割り当てられたメモリーを使用する（読み込む, 書き込む） 必要なくなったら、割り当てられたメモリーを解放する

At a high level, React Server Components is the name for a brand-new paradigm. In this new world, we can create components that run exclusively on the server.

Server Components never re-render.

ファイルのトップに 'use client' を加えることで、当該モジュールとそれが連動してインポートしている依存モジュールがクライアントコードであるとマーク

クライアントコンポーネントとは、レンダーツリーの中の、クライアントでレンダーされるコンポーネントです。 サーバコンポーネントとは、レンダーツリーの中の、サーバでレンダーされるコンポーネントです。

サーバコンポーネントにより、クライアントに送信され実行されるコードの量を減らすことができます。バンドルされてクライアントで評価されるのはクライアントモジュールだけです。

サーバコンポーネントにはサーバ上で実行されることに伴う利点があります。ローカルファイルシステムにアクセスでき、データフェッチやネットワークリクエストのレイテンシが低い可能性があります。

サーバコンポーネントからクライアントコンポーネントに渡される props の値は、シリアライズ可能 (serializable) である必要があります。

サーバコンポーネントはユーザによるインタラクションをサポートできません。イベントハンドラはクライアントで登録されトリガされる必要があるためです。

クライアントコンポーネントとは、レンダーツリーの中の、クライアントでレンダーされるコンポーネントです。

コンポーネントモジュールに 'use client' ディレクティブが含まれている場合、そのコンポーネントは必ずクライアントコンポーネントであることが保証されます。

“When should you make a design document? ... If the change is large/cross-cutting, eg. will be spread over multiple PRs”

Writing forces clarity of thought. Think through major technical challenges before writing code.

Design docs are lightweight planning documents written before implementing code to solicit feedback, derive alignment, and create documentation.

それは、コードをminifyしたときに this.name の内容も一緒に変化してしまうからです。 最初に示したコード例のように名前を文字列リテラルとして明示することで、minifyされずにエラー名を保持することができます。強い難読化の必要がなければ、エラー名はそのまま保持するほうがよいでしょう。

npx @eslint/migrate-config .eslintrc.json

Make sure you upgrade to at least Node.js v18.18.0 when using ESLint v9.0.0.

Four new rules have been enabled in eslint:recommended:

Flat config. If you are using flat config, you can run npx eslint or eslint (if globally installed) and ESLint will assume you want to lint the current directory. Effectively, passing no patterns is equivalent to passing . .

The mutationKey role is to link a mutation with a default option already configured or to identify a mutation to share its state like loading, error, or data across components.

React 19 では、トランジション内で非同期関数を使用することで、送信中状態、エラー、フォーム、楽観的更新を自動的に処理するためのサポートが追加されます。