## ドキュメント

- [Introducing Hooks – React](https://reactjs.org/docs/hooks-intro.html)

## ポイント

- React Hooks を使用し、状態を監視します
    - 状態が変化することで、DOMを更新します
    - 配列を使用した場合、少し工夫が必要です

## 実装

`[...arr]`は同じ配列をコピーしています。Reactはそれが異なっていることを確認し、再レンダリングします。

```jsx
setArr([...arr])
```

### 配列の要素を追加する場合

```jsx
const [arr, setArr] = useState([{ id: 1 }])

let newArr = { id: 2 }
setArr((arr) => [...arr, newArr])
```

React Hooks 配列の再レンダリング

<h2>ドキュメント</h2>
<ul>
<li><a href="https://reactjs.org/docs/hooks-intro.html">Introducing Hooks – React</a></li>
</ul>
<h...

- 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)

React Hooks 配列の再レンダリング

ドキュメント

ポイント

実装

配列の要素を追加する場合

Related

TAGS

SHARE