## ドキュメント

- [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...

![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を作る

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)

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

ドキュメント

ポイント

実装

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

関連記事

記事のタグ

Share?