小手先に見えるテクニックでも、実はReact的に考えられる

この記事では、ReactにおけるuseEffectの適切な使用法と、keyを使ったテクニックについて解説しています。特に、親コンポーネントから渡されるpropsが変更された際に、コンポーネントのステートをリセットする方法としてkeyを利用することが提案されています。従来の考え方では、useEffectを使ってステートを更新することが一般的でしたが、これはReactの宣言的UIの原則に反する可能性があります。keyを使うことで、コンポーネントが新しいインスタンスとして再生成され、ステートが初期化されることが明確に示されます。これにより、Reactの基本的な考え方に沿った形で、より効率的にコンポーネントを管理できるようになります。 • useEffectの不適切な使用法を避けるためのkeyを使ったテクニックの提案 • propsが変更された際にコンポーネントのステートをリセットする方法 • keyを使うことでコンポーネントが新しいインスタンスとして再生成される • Reactの宣言的UIの原則に基づいた理解の重要性 • keyの使用がReactの基本的な考え方に合致することの説明

Biome v2の型推論を試して限界を知る

この記事では、Biome v2の型推論機能について詳しく説明しています。Biome v2は、TypeScriptコードに対するlint機能を提供し、型情報を利用したlintingを行います。従来のTypeScript-ESLintはTypeScriptコンパイラに依存しており、パフォーマンスに課題がありましたが、Biomeは独自の型推論を実装しています。ただし、TypeScriptコンパイラの複雑さから、完全な再現は不可能であり、Biomeの型推論は75%のケースを検知できるとされています。具体的な例として、Promiseを返す関数に対するlintエラーの検知能力を試し、型注釈の有無による影響を検証しています。最終的に、型注釈を明示することで、Biomeの型推論が正しく機能することが示されています。 • Biome v2はTypeScriptコードに対するlint機能を提供する。 • 従来のTypeScript-ESLintはTypeScriptコンパイラに依存しており、パフォーマンスに課題があった。 • Biomeは独自の型推論を実装しているが、完全な再現は不可能。 • noFloatingPromisesルールを用いて、Promiseがawaitされていない場合の検知能力を試した。 • 型注釈を明示することで、Biomeの型推論が正しく機能することが確認された。

.d.tsファイルをちゃんと使うために必要な知識

この記事では、TypeScriptにおける.d.tsファイル（型定義ファイル）の正しい使い方について解説しています。.d.tsファイルは、既存のライブラリやモジュールの型シグネチャを記述するもので、実装の詳細は含まれません。TypeScriptのプロジェクトでは、手動で.d.tsファイルを書く必要はなく、--declarationオプションを使って自動生成することが推奨されています。また、.d.tsファイルは、対応する.jsファイルが存在する場合にのみ意味を持ち、誤った使い方として、TypeScriptプロジェクトで手動で.d.tsファイルを書くことが挙げられています。さらに、TypeScript 5.0以降では、.d.tsファイルをimport typeでインポートすることが可能になり、これが従来の理解と矛盾する点についても触れています。 • .d.tsファイルはTypeScriptにおける型定義ファイルであり、ライブラリの型シグネチャを記述するために使用される。 • 手動で.d.tsファイルを書くのではなく、--declarationオプションを使って自動生成することが推奨される。 • .d.tsファイルは対応する.jsファイルが存在する場合にのみ意味を持つ。 • 誤った使い方として、TypeScriptプロジェクトで手動で.d.tsファイルを書くことが挙げられる。 • TypeScript 5.0以降では、.d.tsファイルをimport typeでインポートすることが可能になった。

Reactコンポーネントが「純粋である」とはどういうことか？　丁寧な解説

Reactの文脈での「副作用」は2種類あるのではという話