JavaScript, React, プログラミング入門

Reactの関数コンポーネントでlodashのdebounceをそのまま使うと、毎回関数が実行されてしまってうまく機能しません。

これはdebounceが内部的にsetTimeoutを使用していることと、関数コンポーネント ...

JavaScript, React, プログラミング入門

ボタンコンポーネントにonClick時に実行したい関数を渡す場合は、以下のように書くことができます。

<button onClick={this.handleClick}/><button onClick={( ...

JavaScript, React

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

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

JavaScript, React

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

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

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

React

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

このエラーは、ア ...

React

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

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

React, 覚書

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

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

React, TypeScript, 覚書

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

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

React

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

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

React

レンダープロップとは

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

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