React

useStateのsetState()は非同期

はじめに Reactを使用している方なら以下のようなコードは数え切れないほどに書いていることでしょう。 const [state, setState] = useState(0); 今回は、useState()から返されるステート更新用関数は非同期で実行される、という点について書いていきます。 …

カスタムフックの戻り値は配列かオブジェクトか

結論 どっちでもいい。 が、以下の方針に従うのがいいような気がします。 返却される値を全て利用する場合が多い→配列 返却される値の一部を利用する場合が多い→オブジェクト 例えばReact標準フックのuseStateを考えてみます。 useStateは値とその更新関数を…

react-collapsibleを使ってアコーディオンを作成する

アコーディオン、Webでよく見かけますよね。 今回はreact-collapsibleを使用してFAQのようなアコーディオンを作成してみようと思います。 完成形 最初に完成形だけ置いときます。 とりあえずソースを見せろという方はこちらをご覧ください。 準備 まずは必要…

typed-css-modulesを使用して型定義ファイルを作成する

この記事の目的 typed-css-modulesをインストールし、*.module.css.d.tsファイルが自動作成されるようにする。 はじめに ReactにはCSS modulesという機能があり、これを使用するとコンポーネントとCSSファイルを1対1で紐付けられるようになります。例えば、 …

useStateに型情報を付与する

useStateに型情報を付与する TypeScript + Reactでフロントエンド開発するなら、最大限型による恩恵は受けたいですよね。 ということで、以下のようにすると型情報を付与したuseStateが定義できます。 booleanなどの場合 この場合は型推論が働く(多分)ので…

フック

React16.8から導入されたフックの基本を学びます。 概要 簡単に言うと、関数型のコンポーネントにstateを持たせる仕組みのことです。以下、公式ドキュメントからの引用です。 フックとは、関数コンポーネントに state やライフサイクルといった React の機能…

warning: Can't call setState on a component that is not yet mounted

React開発中に出現したワーニングを対処しました。 ワーニングなのでそこまでクリティカルではないと思いますが備忘として残します。 調査 ワーニングメッセージを直訳すると、 まだマウントされていないコンポーネントでsetState()は呼び出すことができませ…

React勉強します

近年のフロントエンド全くわからんのです。 公式ページにチュートリアルもありますので、まずはここからですね。