React

Reduxでコンポーネントを作成する際には、コンテナーとプレゼンテーションに分けるのが良いとされています。

これはコンテナーではconnectのみを書く、つまり、Propsとして渡すデータをstoreから取得し、それをプレ ...

Redux を使っていて非同期にアクションをディスパッチするためのMiddlewareとしてはRedux-thunkやSagaなどが有名である。

しかし、実はこういったミドルウエアを使わなくても非同期のアクションのディスパ ...

Reduxでアクションを作成するときに、どういった単位で作成するか迷いことがあります。

それに関して考える上で一つの指標があります。

アクションを細かく分割するのか、もしくは一つにまとめるかは状況によるというの ...

Reduxを使っていて、mapStateToProps や mapDispatchToProps を介して、コンポーネントへ Props を渡す際に、実はコンポーネント側で使用されていないものがあったります。

そういったゴ ...

Reduxを使って数年になりますが、最近ある利点に気が付きました。

アプリケーションの状態をReduxに持つことで、storeの構造をみればなんとなくそのアプリケーションの全体像が分かります。

どういった機能が ...

React MUI の Dialog や Modal は内部的に Portal が使われています。

Portal は指定したDOMの位置にコンポーネントをマウントする仕組みです。

そのため、Dialog や M ...

React MUI の TextField を使っていて、value の値が更新されているのに画面に反映されない場合は、defaultValue を使ってしまっていないか確認します。

defaultValue を使っている ...

Next.jsで.envに定義した定数をクライアントサイドのコードで参照する場合は、NEXT_PUBLIC_ というプレフィックスを付ける必要があります。

NEXT_PUBLIC_HOGE=HOGE

またもう一つの落とし穴と ...

next/imageを使って画像を表示するときに、親要素のサイズを満たすように画像を表示したい場合です。

例えば、親要素が300*300で、画像が300*350だったとします。

縦横の比率は同じままで、親要素を ...

引っ越しが落ち着いてきました。

Reactの状態管理ライブラリとしてはReduxがありますが、実は他にもいくつかあります。

おなじみの npm trend でダウンロード数を比較してみました。

意外 ...