- useMemo使う

https://interrupt.co.jp/blog/entry/2021/02/26/130428

React 絶対に再レンダリングしたくない

React　で list 表示をする際には、keyを設定し、その値で rendering の挙動を変えています。

useState で配列が頻繁に変更される場合に、index を使用する場合 rendeing　の挙動がおかしくなります。そのため各要素に緩いユニークを付与します。

```ts
const createId = (): string => {
  const tmpId: string = new Date().getTime().toString(16)
  return `list-${tmpId}`
}

createId()
```

[リストと key – React](https://ja.reactjs.org/docs/lists-and-keys.html#keys)

## 処理が重複する可能性ある場合は、uuidを使う

例)チャット

```ts
import { v4 as uuid } from 'uuid'
uuid()
```


React の List 表示のために緩くユニークなIDを作成する

```.env.development
REACT_APP_AUTHORIZATION_TOKEN=""
REACT_APP_LAMBDA_URL=""
```

- `.env.development`
- `.env.staging`
- `.env.production`

というenvファイルがある。yarn dev時には、`env.development`が適用され、build時には`.env.production`が問答無用で適用されていた。

下記のような npm scriptを書くと、解決できた。

```json
"scripts": {
  "build": "sh -ac '. ./.env.${REACT_APP_ENV}; react-scripts build'",
  "build:dev": "yarn tsc && yarn test && REACT_APP_ENV=development yarn build",
  "build:staging": "yarn tsc && yarn test &&  REACT_APP_ENV=staging yarn build",
  "build:prod": "yarn tsc && yarn test &&  REACT_APP_ENV=production yarn build",
},
```

https://stackoverflow.com/questions/42458434/how-to-set-build-env-variables-when-running-create-react-app-build-script

React ScriptでBuild時に環境ごとのenvを適用させる

![Snackbar](//images.ctfassets.net/0jyj5pjwic68/4PFpSF3I3EXVkgWGq0DExa/577e3883fdb2feec002c591d07b0621f/____________________________2022-06-04_23.18.59.png)

## Snackbarコンポーネント

```Snackbar.tsx
import { Fragment } from "react";
import { Transition } from "@headlessui/react";
import {
  CheckCircleIcon,
  ExclamationIcon,
  InformationCircleIcon,
  BanIcon,
} from "@heroicons/react/outline";
import { XIcon } from "@heroicons/react/solid";

interface Props {
  open: boolean;
  setOpen: (show: boolean) => void;
  variant?: "success" | "error" | "info" | "warning" | undefined;
  message?: string;
}

export function Snackbar({
  open,
  setOpen,
  variant = "success",
  message,
}: Props) {
  const icon = () => {
    switch (variant) {
      case "success":
        return <CheckCircleIcon className="h-6 w-6 text-green-400" />;
      case "error":
        return <BanIcon className="h-6 w-6 text-red-400" />;
      case "info":
        return <InformationCircleIcon className="h-6 w-6 text-blue-400" />;
      case "warning":
        return <ExclamationIcon className="h-6 w-6 text-orange-400" />;
      default:
        return <CheckCircleIcon className="h-6 w-6 text-green-400" />;
    }
  };

  return (
    <>
      <div
        aria-live="assertive"
        className="z-[9999] fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start"
      >
        <div className="w-full flex flex-col items-center space-y-4 sm:items-end">
          <Transition
            show={open}
            as={Fragment}
            enter="transform ease-out duration-300 transition"
            enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
            enterTo="translate-y-0 opacity-100 sm:translate-x-0"
            leave="transition ease-in duration-100"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="max-w-sm bg-white w-full shadow-lg rounded-lg pointer-events-auto overflow-hidden">
              <div className="p-4">
                <div className="flex items-start">
                  <div className="flex-shrink-0">{icon()}</div>
                  <div className="ml-3 w-0 flex-1 pt-0.5">
                    <p className="text-sm font-medium">{message}</p>
                  </div>
                  <div className="ml-4 flex-shrink-0 flex self-center">
                    <button
                      type="button"
                      className="rounded-md inline-flex text-gray-800"
                      onClick={() => {
                        setOpen(false);
                      }}
                    >
                      <span className="sr-only">Close</span>
                      <XIcon className="h-5 w-5" aria-hidden="true" />
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </Transition>
        </div>
      </div>
    </>
  );
}
```

## SnackbarContext

```SnackbarContext.tsx
import React, { useState, createContext, useContext } from "react";
import { Snackbar } from "@/components/shared/Snackbar";

interface ContextValues {
  openSnackbar: (
    message: string,
    variant: "success" | "error" | "info" | "warning"
  ) => void;
  closeSnackbar: () => void;
  showSuccess: (message: string, ms?: number) => void;
  showError: (message: string, ms?: number) => void;
  showWarning: (message: string, ms?: number) => void;
  showInfo: (message: string, ms?: number) => void;
}

export const SnackbarContext = createContext<ContextValues>({
  openSnackbar: () => console.error("No context."),
  closeSnackbar: () => console.error("No context."),
  showSuccess: () => console.error("No context."),
  showError: () => console.error("No context."),
  showWarning: () => console.error("No context."),
  showInfo: () => console.error("No context."),
});

export const SnackbarProvider: React.FC = ({ children }) => {
  const [open, setOpen] = useState(false);
  const [message, setMessage] = useState("");
  const [variant, setVariant] = useState<
    "success" | "error" | "info" | "warning"
  >("success");

  // NOTE: 共通でSnackbarを削除する場合
  // useEffect(() => {
  //   if (open) {
  //     setTimeout(() => {
  //       setOpen(false);
  //     }, 3000);
  //   }
  // }, [open]);

  const openSnackbar = (
    message: string,
    variant: "success" | "error" | "info" | "warning"
  ) => {
    setMessage(message);
    setVariant(variant);
    setOpen(true);
  };

  const showSuccess = (message: string, ms?: number) => {
    openSnackbar(message, "success");
    if (ms) {
      setTimeout(() => {
        setOpen(false);
      }, ms);
    }
  };

  const showError = (message: string, ms?: number) => {
    openSnackbar(message, "error");
    if (ms) {
      setTimeout(() => {
        setOpen(false);
      }, ms);
    }
  };

  const showWarning = (message: string, ms?: number) => {
    openSnackbar(message, "warning");
    if (ms) {
      setTimeout(() => {
        setOpen(false);
      }, ms);
    }
  };

  const showInfo = (message: string, ms?: number) => {
    openSnackbar(message, "info");
    if (ms) {
      setTimeout(() => {
        setOpen(false);
      }, ms);
    }
  };

  const closeSnackbar = () => {
    setOpen(false);
  };

  return (
    <SnackbarContext.Provider
      value={{
        openSnackbar,
        closeSnackbar,
        showSuccess,
        showError,
        showWarning,
        showInfo,
      }}
    >
      {children}
      <Snackbar
        open={open}
        setOpen={setOpen}
        message={message}
        variant={variant}
      />
    </SnackbarContext.Provider>
  );
};

export const useSnackbar = () => {
  return useContext(SnackbarContext);
};
```

## app.tsx

```app.tsx
function MyApp({ Component, pageProps }: any) {
  return (
    <SnackbarProvider>
      <Component {...pageProps} />
    </SnackbarProvider>
  );
}
```

## API Call

### 自動的にSnackbarを非表示にする

```tsx
import { useSnackbar } from "@/contexts/SnackbarContext";

const { showSuccess, closeSnackbar } = useSnackbar();

const handleClick = () => {
  // 1秒後に自動的にSnackbarを非表示にする
  showSuccess('メールアドレスを送信しました', 1000);
}
```

### マニュアル

```tsx
import { useSnackbar } from "@/contexts/SnackbarContext";

const { showSuccess, closeSnackbar } = useSnackbar();

const handleClick = () => {
  showSuccess('メールアドレスを送信しました');
  closeSnackbar();
}
```

## 注意点

- `useEffect`などで呼び出す際に無限ループしないように気をつける
- 呼び出し方によっては、`Warning: Cannot update a component Context...`が発生するので注意->コンポーネント内で`showError`などを呼び出す場合、呼び出し元のコンポーネントのレンダリングが完了していなければならない。SnackbarContext内で`useState`などのhooksを呼び出しているので、

ReactContextでSnackbarContextの作成と使い方

```jsx
<div>
  <Comeponent />
  {() => {
    if (条件式) {
      return <></>
    }
    return <></>
  }}
</div>
```

Reactのjsx内でしっかりとしたif文を書く

## 解決方法

`TextFieldProps`ではなく、`StandardTextFieldProps`を使用する。

[Cannot pass underline class through TextField as InputProps · Issue #13794 · mui/material-ui](https://github.com/mui/material-ui/issues/13794)

## 問題

```tsx
import React from 'react'
import { TextField, TextFieldProps } from '@material-ui/core'

type Props = TextFieldProps & {
  classes: Record<string, string>
}
export function renderInput(inputProps: Props) {
  const { InputProps } = inputProps
  return (
   // 👇　TypeError
    <TextField
      InputProps={{
        classes: {
          underline: classes.inputUnderline,
        },
      }}
    />
  )
}
```

## 修正

```tsx
import React from 'react'
// 👇 StandardTextFieldProps に変更
import { TextField, StandardTextFieldProps } from '@material-ui/core'

type Props = StandardTextFieldProps & {
  classes: Record<string, string>
}
export function renderInput(inputProps: Props) {
  const { InputProps } = inputProps
  return (
    <TextField
      InputProps={{
        classes: {
          underline: classes.inputUnderline,
        },
      }}
    />
  )
}
```

MuiでTextFieldにunderlineを設定しようとしたらType Errorが発生する

## mermaid Install

```bash
yarn add -D mermaid @types/mermaid
```

## Custom Markdownの作成

※あまりキレイではない

`mermaid`の場合の処理

```tsx
export const CustomMarkdown = {
  code({ node, inline, className, children, ...props }: any) {
    const code = String(children).replace(/\n$/, '');
    const [_, filename] = /language-([\w./]*)/.exec(className) || [];

    if (filename === 'mermaid') {
      return <div className="mermaid">{code}</div>;
    }
  },
  ...略
};
```

React Markdown

```tsx
import ReactMarkdown from 'react-markdown';
import { CustomMarkdown } from './CustomMarkdown';

interface Props {
  source: string;
}

export default function Markdown({ source }: Props) {
  return (
    <ReactMarkdown
      components={CustomMarkdown}
      children={source}
    />
  );
}
```

表示

```tsx
import { Markdown } from './Markdown';
import mermaid from 'mermaid';

export default function SomePage({}: Props) {
  // 👇　mermaidをレンダリング
  useEffect(() => {
    mermaid.init('.mermaid');
  }, []);
  return (
    <Markdown ..../>
  )
```

静的出力時に吐くようにしたいけども
refとかでいい感じにレンダリングされるようにしたほうが良いかも

## 確認

```
```mermaid``` な感じで囲んで書く
```

```mermaid
flowchart LR
    id1>This is the text in the box]
```

```mermaid
pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
```

mermaidjsとReact Markdownの統合

## Intro

`target`ステートを変更した時の副作用として、`target.id`を持つ要素までスクロールする機能を作る。
`useRef`を使用せず、idを使用した方が単純だったので、idを使用している。
（特に調査はしていない。）

## scrollTo

```tsx
  // ⚠️ target と item は同じデータ構造
  useEffect(() => {
    if (!target) {
      return
    }
    const targetEl = document.getElementById(target?._id)
    const containerEl = document.getElementById('container')
    const targetTop = targetEl?.getBoundingClientRect().top || 0
    const containerTop = containerEl?.getBoundingClientRect().top || 0
    const containerScrollTop = containerEl?.scrollTop || 0
    const marginTop = 36 // 👈 スクロールの位置36px下に調整する
    const scrollSize = targetTop - containerTop + containerScrollTop - marginTop
    containerEl?.scrollTo({ top: scrollSize, behavior: 'smooth' })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [target])
```

 ```tsx
 <div className="container overflow-y-auto">
  {items.map((item, index) => (
    <div id={item.id}>
     {item.name}
    </div>
  ))}
 </div>
 ```

## 改良する scrollIntoView

 `scroll-padding`をという便利なcssプロパティがあったので使用したら、スッキリした。

 [scroll-padding - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/scroll-padding)

 また、スクロールさせるコンテナのidも消すことができた。

```tsx
  useEffect(() => {
    if (!target) {
      return
    }
    const targetEl = document.getElementById(target?._id)
    targetEl?.scrollIntoView({ behavior: 'smooth' })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [target])
 ```

 ```tsx
 // ⚠️ overflow-y-autoは必須
 <div className="scroll-py-[36px] overflow-y-auto">
  {items.map((item, index) => (
    <div id={item.id}>
     {item.name}
    </div>
  ))}
 </div>
 ```


React 対象の要素までScrollさせる

## 問題

重い処理と軽い処理が混在するケースで、いい感じにローディングを表示させたいが、__処理が早い場合、ローディングがチラついてしまう。__

## 解決策

処理が早すぎる場合を考慮して、`1000ms(1秒)　-　実行時間`表示を遅延させ、`1000ms以上`実行時間がある場合は、遅延時間`0ms`にする。

## コード

```tsx
const [isLoading, setIsLoading] = useState(false)

const handleUpdate = () => {
  setIsLoading(true) // ローディング状態にする
  const startTime = new Date().getTime()　// 計測開始時間
  dispatch(update())
    .then(() => {})
    .catch(() => {})
    .finally(() => {
      const currentTime = new Date().getTime()　// 計測終了時間
      const executionTime = currentTime - startTime　// 実行時間
      const delayTime = 1000 - executionTime　// 表示を遅延させる時間
      // ローディング状態を解除する
      setTimeout(() => setIsLoading(false), Math.max(delayTime, 0))
    })
}
```

### ショートコード

```tsx
setTimeout(() => setIsLoading(false), Math.max(1000 - (currentTime - startTime), 0))
```

## hooksを作る

凝縮性

[javascript-useStatesetメソッドは変更をすぐには反映しません-StackOverflow](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately)

```ts
import { useState } from 'react'

export const useLoading = () => {
  const [isLoading, setIsLoading] = useState(false)
  let startTime = 0

  const startLoading = () => {
    setIsLoading(true)
    startTime = new Date().getTime()
  }

  /**
   * ローディングを終了する
   * @param minWaitTime ローディングが完了するまでの最小待ち時間
   */
  const endLoading = (minWaitTime: number = 1000) => {
    const currentTime = new Date().getTime()
    const executionTime = currentTime - startTime
    const delayTime = minWaitTime - executionTime
    setTimeout(() => {
      setIsLoading(false)
      startTime = 0
    }, Math.max(delayTime, 0))
  }

  return { isLoading, startLoading, endLoading }
}

```

## 解説

実行時間が1000ms以下の場合、`delayTime`は、`0 ~ 999`の値になる。

実行時間が1000ms以上の場合、`delayTime`は、`-(マイナス)`になるので、`Math.max(delayTime, 0))`で0が返され、遅延時間が0msになる。

## 参考

- [Math.max() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/max)
- [javascript-useStatesetメソッドは変更をすぐには反映しません-StackOverflow](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately)

JavaScript 実行時間・遅延時間の計算

※配列の変更を見れてない可能性あり

## 問題

> React は再レンダー間で setState 関数の同一性が保たれ、変化しないことを保証します。従って useEffect や useCallback の依存リストにはこの関数を含めないでも構いません

レンダリングが完了する間に、複数回stateを変更したとしても、一番最後に指定した値が適用される。

この問題は、 Class ComponentのsetStateでは発生しないが、useState Hookでは発生する。

## 問題のコード

大体こんな感じ

```tsx
const [items, setItems] = useState<string[]>([])

const handleSubmit = (text: string) => {
  append(text)
  send(text)
}

const append = (text: string) => {
  setItems([...items, text])
}

const send = (text: string) => {
  client.post('/api/post')
    .then(res => {
      append(res.data)
    })
}
```

### Code Sandbox

<iframe src="https://codesandbox.io/embed/usestatenomin-1-ue1n22?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="useStateの罠-1"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

## 解決策

__関数型のsetStateを使用する。__

> クラスコンポーネントの setState メソッドとは異なり、useState は自動的な更新オブジェクトのマージを行いません。この動作は関数型の更新形式をスプレッド構文と併用することで再現可能です：

### Code Sandbox

<iframe src="https://codesandbox.io/embed/usestatenomin-2-ff627v?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="useStateの罠-2"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

また、createRefとuseRefでも高い現象が起こるので、注意。
クラスコンポーネントと関数コンポーネントで、挙動が異なる

## 参考

- [フック API リファレンス – React](https://ja.reactjs.org/docs/hooks-reference.html#usestate)

useStateの罠


## Intro

`debounce`は、負荷対策として利用され、一定時間経過した後に、処理を実行させる。

クライアント側での検索で、使えそうなので、作ってみる。

## Custom Hooks

```useDebounce.ts
import { useEffect, useState } from 'react';

export function useDebounce(value: string, delay: number) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);
  return debouncedValue;
}
```

## 使い方

```index.tsx
export function Index() {
  const [searchText, setSearchText] = useState('');
  const debouncedSearchText = useDebounce(searchText, 200); // 👈 msで遅延させる。
...略
```

React Hooks useDebounceを作る

```js
// ❌
// const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY);

// 🙆‍♂️
const [stripePromise, setStripePromise] = useState(() => loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY))
```

Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it

## 環境
- Next.js: v11.x

## Reduxを一言で

**「アプリのグローバル状態を管理するフレームワーク」**

親子間のコンポーネント程度であれば、`props` と `callback`で完結しますが、より大きな用途で使用する場合、`props` をバケツリレ−のように渡していくのは非常に辛いです。
その解決策として出ててくるのが、**グローバル状態** です。グローバル状態は、アプリのどのコンポーネントでも呼び出すことができ、更新することができます。そのフレームワークの1つが、 **Redux** です。

## Redux以外のフレームワークは？
- [Recoil](https://recoiljs.org/)
- SWR
- React.useContext
- [react-hooks-global-state](https://www.npmjs.com/package/react-hooks-global-state)

## インストール

## 参考
- [FAQ | Next.js](https://nextjs.org/docs/faq)
- [vercel/next.js/tree/canary/examples/with-redux](https://github.com/vercel/next.js/tree/canary/examples/with-redux): Next.jsのReduxサンプル
- [Getting Started with React Redux](https://react-redux.js.org/introduction/getting-started)
- [Reduxを分かりやすく解説してみた](https://future-architect.github.io/articles/20200429/)
- [Next.js の状態管理 2020](https://zenn.dev/takepepe/articles/state-manegement-in-nextjs-2020)
- [Global state using only React Hooks with the Context API (No Redux)](https://codeburst.io/global-state-with-react-hooks-and-context-api-87019cc4f2cf)

Reduxについて勉強

## ドキュメント

- [コンテクスト – React](https://ja.reactjs.org/docs/context.html) : 公式のドキュメント
- [Context API with TypeScript and Next.JS - DEV Community 👩‍💻👨‍💻](https://dev.to/shareef/context-api-with-typescript-and-next-js-2m25)

## 課題

Recoilによる、開発体験は非常によかったが、下記のエラーに悩まされた。

```bash
app_1    | Duplicate atom key "isLoading". This is a FATAL ERROR in
app_1    |       production. But it is safe to ignore this warning if it occurred because of
app_1    |       hot module replacement.
```

Issueはこちら

[[SSR][NextJS] Duplicate atom key during development and during production build in nextjs · Issue #733 · facebookexperimental/Recoil](https://github.com/facebookexperimental/Recoil/issues/733)

やりたいこととしては、シンプルなので、React Context APIを使用する。

## やりたいこと

- **ローディングコンポーネントの呼び出し**
- **メッセージ（アラート）の呼び出し**

などの状態をグローバルステート（React Context API）で管理し、開発体験を向上させる。

## ポイント

> コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリー内でデータを渡す方法を提供します。

## React Context 実装

```context/state.js
import { useState, createContext, useContext } from 'react';
import Loading from '@/components/atoms/loading'; // 👈 使用するローディングコンポーネント

// 👇 Contextの作成
const AppContext = createContext({
  loading: false,
  setLoading: (_) => {},
});

// 👇 _app.tsxでコンポーネントツリーの上の方に追加する
export const AppWrapper = ({ children }) => {
  const [loading, setLoading] = useState(false);

  const value = {
    loading,
    setLoading,
  };

  return (
    <AppContext.Provider value={value}>
      <Loading loading={loading} />
      {children}
    </AppContext.Provider>
  );
};

// 👇 Pageコンポーネントなどで読み込む
export const useAppContext = () => useContext(AppContext);
```

```pages/_app.tsx
import React from 'react';
import { AppProps } from 'next/app';
import { AppWrapper } from '@/context/state';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
			{/* 👇 Context を コンポーネントツリーに追加 */}
      <AppWrapper>
        <Component {...pageProps} />
      </AppWrapper>
    </>
  );
}

export default MyApp;
```

## コンポーネント呼び出し

```pages/index.tsx
import { useAppContext } from '@/context/state';

export default function Index() {
  const { setLoading } = useAppContext();

	const func = () => {
		setLoading(true); // 👈 ローディングの表示
		setLoading(false); // 👈 ローディングの非表示
	}
}
```

### ⚠️ SWRでデータがfetchできていない場合のローディング

```jsx
import { useAppContext } from '@/context/state';

const { setLoading } = useAppContext();
const { data: user, error } = useSWR('/api/user');

if (!user) {
	setLoading(true)
	return <></>;
}

setLoading(false)
```

上記の実装だと、下記のエラーが発生する。

```bash
react-dom.development.js:67 Warning: Cannot update a component (`AppWrapper`) while rendering a different component (`Index`). To locate the bad setState() call inside `Index`,
```

レンダリングできていない状態で、Index以外のHooksを呼び出すと警告される。（実行はできるが）

💡 **回避手段:** staticなローディングコンポーネントを返す。（もっといい方法があるかもしれない）

```jsx
import StaticLoading from '@/components/atoms/static-loading';
const { data: user, error } = useSWR('/api/user');

if (!user) return <StaticLoading />;
```

Next.js Context API を使用してローディング呼び出し

## ドキュメント

- [フック API リファレンス – React](https://ja.reactjs.org/docs/hooks-reference.html#useeffect)

> useEffectは、コンポーネントがレンダリング後に何かを行う必要があることをReactに伝えます。

## 実装

レンダリング時に一度実行する

```jsx
useEffect(() => {
  someFunc(); // 実行
}, []);
```

値が入ってきた時に、実行する

```jsx
const { data: user, error } = useSWR('/api/user');

// userが存在すれば実行する
useEffect(() => {
  someFunc(); // 実行
}, [user]);
```