🪁
taisablog
React 状態管理 超入門
🚘

React 状態管理 超入門

useState

state が更新されるとすべてのコンポーネントが再レンダリングされる

サンプル画面

image

サンプルのコンポーネントツリーイメージ図

App.tsx でのみ useStete を利用する

image

App.tsx

import { useState } from 'react';
import { Child1 } from './components/Chilid1';
import { Child4 } from './components/Chilid4';

const App = () => {
  // App でのみ利用
  const [num, setNum] = useState(0)

  const onClickButton = () => {
    setNum((prev) => prev + 1)
  }

  return (
    <div>
      <p>{num}</p>
      <button onClick={onClickButton}>ボタン</button>
      <Child1 />
      <Child4 />
    </div>
  )
}

export default App

Child1.tsx

import { Child2 } from "./Chilid2"
import { Child3 } from "./Chilid3"

const style = {
  height: "200px",
  backgroundColor: "lightBlue",
  margin: "8px"
}

export const Child1 = () => {
  return (
    <div style={style}>
      <p>Child1</p>
      <Child2 />
      <Child3 />
    </div>
  )
}

Child2.tsx

const style = {
  height: "50px",
  backgroundColor: "lightGray",
  margin: "8px"
}

export const Child2 = () => {
  return (
    <div style={style}>
      <p>Child2</p>
    </div>
  )
}

Child3.tsx

const style = {
  height: "50px",
  backgroundColor: "lightGray",
  margin: "8px"
}

export const Child3 = () => {
  return (
    <div style={style}>
      <p>Child3</p>
    </div>
  )
}

Child4.tsx

const style = {
  height: "200px",
  backgroundColor: "lightBlue",
  margin: "8px"
}

export const Child4 = () => {
  return (
    <div style={style}>
      <p>Child4</p>
    </div>
  )
}

React Developer Tools

Highlight updates when components render. を ON にすると再レンダリングされたコンポーネントが視覚的に確認できる

image

ボタンをクリックすると全コンポーネントが再レンダリングされることが分かる

React.memo

Props に変更がない限り再レンダリングされない

// React.memo 追加
export const Child1 = memo(() => {
  return (
    <div style={style}>
      <p>Child1</p>
      <Child2 />
      <Child3 />
    </div>
  )
})

memo を追加することにより Child1, Child2, Child3 コンポーネントが再レンダリングされなくなる

再レンダリングされるコンポーネントツリーのイメージ図

image

他に、子コンポーネントに Props として渡す関数は useCallback を使いメモ化する

変数設定のロジックが複雑だったり、膨大なループが実行される場合等の変数に useMemo を使いメモ化する

Props のバケツリレー

Props のバケツリレーを使うとどういったデメリットがあるか

  • Props の値が変わるとコンポーネントが再レンダリングされる
    • 該当コンポーネントが Props の値を利用していなくても state 更新時に再レンダリングされる
  • 他の場所で再利用しにくいコンポーネントになる

サンプル画面

管理者の場合は「編集」ボタンをクリックできる

image
image

App.tsx

import { FC, useState } from 'react';
import { Card } from './components/Card';
import { Child1 } from './components/Chilid1';
import { Child4 } from './components/Chilid4';

const App: FC = () => {
  const [num, setNum] = useState(0)
  const onClickButton = () => setNum((prev) => prev + 1)

	// 追加
  const [isAdmin, setIsAdmin] = useState(false)
  const onClickSwitch = () => setIsAdmin(!isAdmin)

  return (
    <>
      <div>
        <p>{num}</p>
        <button onClick={onClickButton}>ボタン</button>
        <Child1 />
        <Child4 />
      </div>
      <div>
        { isAdmin ? <span>管理者です</span>: <span>管理者以外です</span>}
        <button onClick={onClickSwitch}>切り替え</button>
        <Card isAdmin={isAdmin} />
       </div>
    </>
  )
}

export default App

Cart.tsx

import { FC, memo } from "react"
import { EditButton } from "./EditButton"

const style = {
  width: "300px",
  height: "200px",
  margin: "8px",
  borderRadius: "8px",
  backgroundColor: "#e9dbd0",
  display: "flex",
  justifyContent: "center",
  alignItems: "center"
}

export const Card: FC<{isAdmin: boolean}> = memo(({isAdmin}) => {
  return (
    <div style={style}>
      <p>山田太郎</p>
      {/* isAdmin を受け取って渡しているだけ */}
      <EditButton isAdmin={isAdmin} />
    </div>
  )
})

EditButton.tsx

import { FC, memo } from "react"

export const EditButton: FC<{isAdmin: boolean}> = memo(({isAdmin}) => {
  return (
    <div>
      <button disabled={!isAdmin}>編集</button>
    </div>
  )
})

App, Card, EditButton すべてのコンポーネントが再レンダリングされる

Context を使う

Context を使うとどういった時に再レンダリングが起きるか

  • useContext でその Context を参照しているコンポーネントが再レンダリングされる

※ 1つの Context に属性の異なるいろんな State を詰め込むのを避けるためには Provier をネストする必要あり（Provider Tower！Provider Hell！）

AdminFlgProvider.tsx

import { createContext, FC, ReactNode, useState } from "react";

interface AdminFlgInterface {
  isAdmin: boolean,
  setIsAdmin: (isAdmin: boolean) => void
}

export const AdminFlgContext = createContext({} as AdminFlgInterface)

export const AdminFlgProvider: FC<{ children: ReactNode }> = ({ children }) => {
	// state を Provider で定義
  const [isAdmin, setIsAdmin] = useState(false)
  return (
    <AdminFlgContext.Provider value={{ isAdmin, setIsAdmin }}>
      { children }
    </AdminFlgContext.Provider>
  )
}

App.tsx

import { FC, useContext, useState } from 'react';
import { AdminFlgContext } from './components/AdminFlgProvider';
import { Card } from './components/Card';
import { Child1 } from './components/Chilid1';
import { Child4 } from './components/Chilid4';

const App: FC = () => {
  const [num, setNum] = useState(0)
  const onClickButton = () => setNum((prev) => prev + 1)

  // context から値を取得
  const { isAdmin, setIsAdmin } = useContext(AdminFlgContext)
  const onClickSwitch = () => setIsAdmin(!isAdmin)

  return (
    <>
      <div>
        <p>{num}</p>
        <button onClick={onClickButton}>ボタン</button>
        <Child1 />
        <Child4 />
      </div>
      <div>
        { isAdmin ? <span>管理者です</span>: <span>管理者以外です</span>}
        <button onClick={onClickSwitch}>切り替え</button>
        <Card />
       </div>
    </>
  )
}

export default App

Card.tsx

import { memo } from "react"
import { EditButton } from "./EditButton"

const style = {
  width: "300px",
  height: "200px",
  margin: "8px",
  borderRadius: "8px",
  backgroundColor: "#e9dbd0",
  display: "flex",
  justifyContent: "center",
  alignItems: "center"
}

export const Card = memo(() => {
  return (
    <div style={style}>
      <p>山田太郎</p>
			{/* isAdmin を受け取って渡さなくなる */}
      <EditButton />
    </div>
  )
})

EditButton.tsx

import { memo, useContext } from "react"
import { AdminFlgContext } from "./AdminFlgProvider"

export const EditButton = memo(() => {
  // context から値を取得する
  const isAdmin = useContext(AdminFlgContext)
  return (
    <div>
      <button disabled={!isAdmin}>編集</button>
    </div>
  )
})

App, EditButton が再レンダリングされ、Card は再レンダリングされなくなる

Provider Tower, Provider Hell

UserNameProvider を追加してちょっとした Provider Towerをつくってみる（自分的には Provider タワーの方が好きな名称）

サンプルイメージ

image
image

index.tsx（UserNameProvider 追加）

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <AdminFlgProvider>
      <UserNameProvider>
        <App />
      </UserNameProvider>
    </AdminFlgProvider>
  </React.StrictMode>
);

UserNameProvider.tsx（新規）

import { createContext, FC, ReactNode, useState } from "react";

interface UserNameInterface {
  userName: string,
  setUserName: (userName: string) => void
}

export const UserNameContext = createContext({} as UserNameInterface)

export const UserNameProvider: FC<{ children: ReactNode}> = ({ children }) => {
  const [userName, setUserName] = useState("山田太郎")
  return (
    <UserNameContext.Provider value={{ userName, setUserName }}>
      { children }
    </UserNameContext.Provider>
  )
}

App.tsx

import React, { useCallback, useContext, useState } from 'react';
import { AdminFlgContext } from './components/AdminFlgProvider';
import { Card } from './components/Card';
import { Child1 } from './components/Chilid1';
import { Child4 } from './components/Chilid4';
import { UserNameContext } from './components/UserNameProvider';

const App = () => {
  const [num, setNum] = useState(0)
  const onClickButton = () => setNum((prev) => prev + 1)

  const { isAdmin, setIsAdmin } = useContext(AdminFlgContext)
  const onClickSwitch = useCallback(() => setIsAdmin(!isAdmin), [isAdmin, setIsAdmin])

  // 追加
  const { userName, setUserName } = useContext(UserNameContext)
  const onChangeName: React.ChangeEventHandler<HTMLInputElement> = useCallback((e) => setUserName(e.target.value), [setUserName])

  return (
    <>
      <div>
        <p>{num}</p>
        <button onClick={onClickButton}>ボタン</button>
        <Child1 />
        <Child4 />
      </div>
      <div>
        { isAdmin ? <span>管理者です</span>: <span>管理者以外です</span>}

				{/* 追加 */}
        <button onClick={onClickSwitch}>切り替え</button>
        <input type="text" value={userName} onChange={onChangeName} />
        <Card />
       </div>
    </>
  )
}

export default App

Card.tsx

import { memo, useContext } from "react"
import { EditButton } from "./EditButton"
import { UserNameContext } from "./UserNameProvider"

const style = {
  width: "300px",
  height: "200px",
  margin: "8px",
  borderRadius: "8px",
  backgroundColor: "#e9dbd0",
  display: "flex",
  justifyContent: "center",
  alignItems: "center"
}

export const Card = memo(() => {
  // 追加
  const { userName } = useContext(UserNameContext)
  return (
    <div style={style}>
      <p>{ userName }</p>
      <EditButton />
    </div>
  )
})

EditButton.tsx（変更なし）

import { memo, useContext } from "react"
import { AdminFlgContext } from "./AdminFlgProvider"

export const EditButton = memo(() => {
  const { isAdmin } = useContext(AdminFlgContext)
  return (
    <div>
      <button disabled={!isAdmin}>編集</button>
    </div>
  )
})

名前変更時は App, Card コンポーネントが再レンダリングされる

Recoil 導入

2022年10月時点のバージョンは 0.7.6

インストール

$ yarn add recoil

使い方 Getting Started

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { RecoilRoot } from 'recoil';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    {/* <AdminFlgProvider> */}
      {/* <UserNameProvider> */}
      <RecoilRoot>
        <App />
      </RecoilRoot>
      {/* </UserNameProvider> */}
    {/* </AdminFlgProvider> */}
  </React.StrictMode>
);

reportWebVitals();

useIsAdminSelect.tsx（AdminFlgProvier の代わり）

import { atom, useRecoilState } from "recoil"

export const isAdminState = atom({
  key: "isAdminState",
  default: false
})

useUserNameSelect.tsx（UserNameProvier の代わり）

import { atom, useRecoilState } from "recoil"

export const userNameState = atom({
  key: "userName",
  default: "山田太郎"
})

App.tsx

import React, { FC, useState } from 'react';
import { Card } from './components/Card';
import { Child1 } from './components/Chilid1';
import { Child4 } from './components/Chilid4';
import { isAdminState } from './components/hooks/useIsAdminSelect';
import { useRecoilState } from 'recoil';
import { userNameState } from './components/hooks/useUserNameSelect';

const App: FC = () => {
  const [num, setNum] = useState(0)
  const onClickButton = () => setNum((prev) => prev + 1)

	// recoil に変更
  const[ isAdmin, setIsAdmin ] = useRecoilState(isAdminState)
  const onClickSwitch = useCallback(() => setIsAdmin(!isAdmin), [isAdmin, setIsAdmin])

	// recoil に変更
  const [ userName, setUserName ] = useRecoilState(userNameState)
  const onChangeName: React.ChangeEventHandler<HTMLInputElement> = (e) => setUserName(e.target.value)

  // useSetRecoilState で Setter だけ取得も可能
  // Setter だけ利用しているコンポーネントは再レンダリングされない
  // const setUserName = useSetRecoilState(userNameState)

  return (
    <>
      <div>
        <p>{num}</p>
        <button onClick={onClickButton}>ボタン</button>
        <Child1 />
        <Child4 />
      </div>
      <div>
        { isAdmin ? <span>管理者です</span>: <span>管理者以外です</span>}

        <button onClick={onClickSwitch}>切り替え</button>
        <input type="text" value={userName} onChange={onChangeName} />
        <Card/>
      </div>
    </>
  )
}

export default App

Cart.tsx

import { memo } from "react"
import { EditButton } from "./EditButton"
import { userNameState } from "./hooks/useUserNameSelect"
import { useRecoilState } from "recoil"

const style = {
  width: "300px",
  height: "200px",
  margin: "8px",
  borderRadius: "8px",
  backgroundColor: "#e9dbd0",
  display: "flex",
  justifyContent: "center",
  alignItems: "center"
}

export const Card = memo(() => {
  // recoil に変更
  const [ userName ] = useRecoilState(userNameState)
  return (
    <div style={style}>
      <p>{ userName }</p>
      <EditButton />
    </div>
  )
})

EditButton.tsx

import { memo } from "react"
import { useRecoilState } from "recoil"
import { isAdminState } from "./hooks/useIsAdminSelect"

export const EditButton = memo(() => {
  // recoil に変更
  const [ isAdmin ] = useRecoilState(isAdminState)
  return (
    <div>
      <button disabled={!isAdmin}>編集</button>
    </div>
  )
})

再レンダリングされるコンポーネントは Context 利用時と変わらない

参考

モダンJavaScriptの基本から始める React実践の教科書 （最新ReactHooks対応）

絶対に挫折しない最高の1冊！ ※この電子書籍は、「固定レイアウト型」で配信されております。説明文の最後の「固定レイアウト型に関する注意事項」を必ずお読みください。 固定レイアウト型に関する注意事項（必ずお読みください） Reactをイチから学びたい方にオススメの1冊です！ 【本書のポイント】この電子書籍は、全ページ画像の「固定レイアウト型」で配信されております。以下の点にご注意し、購入前にプレビュー表示をご確認の上、ご購入ください。 ■使用できない機能・文字拡大（ピンチイン・ピンチアウトは可能ですが、画面におさまらない場合は画面をスワイプ）／文字のコピー／マーク／ハイライト／文字列検索／辞書の参照／Web検索／引用 ■推奨環境・タブレットなど大きいディスプレイを備えた端末・Wi-Fiネットワーク経由でのダウンロード（Kindle端末の場合） UdemyのReactコースで最高評価獲得の著者がモダンJavaScriptの基礎からTypeScriptの実践的な内容までしっかり解説！ 著者が2年以上勉強会を主催し初学者と話す中で分かった、多くの人が感じるReactの挫折ポイントを解決する構成！ 現場のシチュエーションベースのストーリーで技術解説をしているので、実務で必要となる知識を意識しながら学習を進められる！ 「#挫折しないReact本」で学習した感想をシェア！！ ●目次Chapter1 Reactを始める前に知っておきたいモダンJavaScriptの基礎 1-1 モダンJavaScript概説 1-2 DOM、仮想DOM 1-3 パッケージマネージャー（npm/yarn） 1-4 ECMAScript 1-5 モジュールバンドラー、トランスパイラ 1-6 SPAと従来のWebシステムの違い Chapter1 まとめChapter2 モダンJavaScriptの機能に触れる 2-1 const、letでの変数宣言 2-2 テンプレート文字列 2-3 アロー関数 （ ）＝＞｛ ｝ 2-4 分割代入 ｛ ｝ ［ ］ 2-5 デフォルト値 ＝ 2-6 スプレッド構文 2-7 オブジェクトの省略記法

www.amazon.co.jp

モダンJavaScriptの基本から始める React実践の教科書 （最新ReactHooks対応）

Reactの色々。recoilとかレンダリング最適化とか。｜UnBlog

今日もReactを勉強する上で新しく学んだ概念をいい感じにまとめていきたいと思います！ Contextを使用したグローバルなstate管理よりも、簡単にグローバルなstate管理を行えるライブラリとしてRecoilというものがある。 recoilは2020年にfacebookが発表したグローバルなstate管理を簡単に行えるようにするライブラリ。 まずはインストール npm install recoil 使い方としては以下のような感じ。コンポーネントを作るわけではないので、ファイルの拡張子は.jsでおっけい。 import { atom } from "recoil"; //atomをインポート export const testState = atom({ key: "modalState", //どのファイルでもこのstateを参照できるキーとなる、一意の値を設定。（ファイル名と揃えるのが自然） default: {　false } //デフォルトの値を渡しておく }); 以上のコードのみで、グローバルなstateを定義することが可能になる。ここで定義したstateは、ルートのコンポーネントをRecoilRoot要素で囲ってやることで、グローバルにどこからでも呼び出せるようになる。 import { RecoilRoot } from "recoil"; export default function App() { return( いろんなコンポーネントが入るで~ ) } recoilで定義したstateを参照するにはまずuseRecoilStateをインポートする必要がある。 import { useRecoilState } from

unblog.unreact.jp

Reactの色々。recoilとかレンダリング最適化とか。｜UnBlog

あとで試す用の参考

Vite+React+TypeScript＋EsLintに Reciolを導入して Stateをローカルストレージで永続化する

今回はVite+React+TypeScript+EsLintにRecoilを導入して、RecoilのStateをローカルストレージで永続化してみるまでの手順です。 特に難しいことはなく、Recoil公式の通りです。 Recoilインストールです。 「eslint-plugin-react-hooks」プラグインを導入している場合は、Recoil用の設定を追加することが推奨されています。 「eslint-plugin-react-hooks」プラグインはEsLintの初期化コマンド「npx eslint --init」でインストールされています。 設定がまだであれば追加しておいた方がよいでしょう。 例えば、「eslint-plugin-react-hooks」の設定を以下のようにしている場合、 RecoilのuseRecoilCallbackの設定を追加することが推奨されています。 useRecoilCallback() に渡された依存関係が正しく指定されていない場合は警告されます。 動作確認用に簡単なプログラムを作成します。 テキストボックスに入力した値を、ボタンクリックで登録します。 Recoilを使用するコンポーネントは、親ツリーのどこかに を配置する必要があります。ここではAppコンポーネントに配置しています。 「登録した値」を管理するためのAtomを作成します。 登録ボタンのクリックで、先ほど作成した「登録した値」Atom にテキストボックスに入力した値をセットします。 先ほど作成したプログラムですが、リロードすると登録したAtomの値が消えてしまいます。 そこで、Atomの値をローカルストレージに保存します。 方法はいくつかあるようです。 今回は公式サイトの AtomEffect を使用する方法で、実装します。 コチラのサイトにtypescript用がありましたので、そのままいただきました。 参考： https://github.com/facebookexperimental/Recoil/issues/6 Atom Effects は Atom に値がセットされたときに、別の処理を実行させることができます。 setSelf には Atom の値を設定またはリセットするためのコールバック関数を指定します。 onSet は Atom の値が変化したときのコールバック関数を指定します。 リロードしても値が保持されるようになりました。 AtomEffect には、他にも Atom の値がセットされたら、ログを記録したり、変更履歴を記録したりもできるようです。

zenn.dev

Vite+React+TypeScript＋EsLintに Reciolを導入して Stateをローカルストレージで永続化する

FacebookXGitHub