React

React の hook の一つである useCallback は、子コンポーネントに渡す関数をキャッシュ化することで無駄なレンダーを避けるために使います。

useCallbak を使わない場合、コンポーネントのレンダーの ...

useEffectで関数をreturnしていると、副作用のクリーンアップのタイミングでその関数が実行されます。

例えばsetIntervalをクリーンアップする時などに使用します。

このクリーンアップタイミング ...

ポーリング処理などを行っている時に遭遇する「Can’t perform a React state update on an unmounted component.」の対処方法についてです。

このエラーは、ア ...

私が初めてReactで開発を行った時は、Reduxを使うのがデファクトスタンダードだよ、という風潮があったために、特に何も考えずにReduxを使い始めました。

結局、Reduxのメリットが分かったのは実際に使い始めてからで ...

Reduxの7.1.0からuseDispatchが追加されました。

これまでは dispatch をする際には、connectを使う必要がありましたが、useDispatchを使うことでよりシンプルに書けるようになりました ...

React(jsxファイル)で、以下のようにアロー関数にTypeScriptのジェネリクスを使うとエラーになります。

//関数の中身は適当ですconst getValue = <T>(v: T): T => { ...

onSubmitの引数に渡される resetForm を使用します。

<Formik ... onSubmit={(values, { resetForm }) => { alert(JSON.stringify(v ...

レンダープロップとは

レンダープロップの公式の説明は以下です。

“レンダープロップ (render prop)”という用語は、値が関数である props を使って、コンポーネント間でコードを共有するためのテクニックを指します ...

使い方は二通り

onSubmitに使うか

<form onSubmit={handleSubmit}>

onClickに使うか

<button onClick={handleSubmit} ...