## ドキュメント

- [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><h2>ポイ...

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 の List 表示のために緩くユニークなIDを作成する

```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]);
```

Next.js ページのレンダリング時に関数を実行する

## 実装

```jsx
import { useState } from 'react'
const [user, setUser] = useState(initUser)

const handleChange = (e) => {
  const target = e.target
  const value = e.value
  const name = e.name

  if (name in user) {
    const updateItem = {...user, [name]: value} // 👈 ポイント
    setUser(updateItem)
  }
}
```

```jsx
<input
  type="text"
  name="username"
  value={user?.username || ''}
  onChange={handleChange}
  id="username"
/>
```

`onBlur`で保存とかしても良いかも

React Hooks でオブジェクトを気持ちよく扱う

## ドキュメント

[Hacker0x01/react-datepicker: A simple and reusable datepicker component for React](https://github.com/Hacker0x01/react-datepicker)

[date-fns/date-fns: ⏳ Modern JavaScript date utility library ⌛️](https://github.com/date-fns/date-fns)

## インストール

```bash
yarn add react-datepicker date-fns
```

TypeScript

```bash
yarn add -D @types/react-datepicker
```

## 実装

若干TailwindでCSS当ててる。

```js
import { useState } from 'react'
import DatePicker, { registerLocale } from 'react-datepicker'
import ja from 'date-fns/locale/ja'
import 'react-datepicker/dist/react-datepicker.css'
registerLocale('ja', ja)

export default function Index () {
	const [targetDate, setTargetDate] = useState(new Date())

	return (
		<DatePicker
          className="p-1 border border-gray-400 rounded-md cursor-pointer"
          locale="ja"
          selected={targetDate}
          onChange={(date) => setTargetDate(date)}
        />
	)
}
```

![ReactDatepicker](//images.contentful.com/0jyj5pjwic68/36AYtOMYpW34SB4Rt5L7Gf/b2569f682ebaee8f7e7bc761afb08d5d/ReactDatepicker.png)

React

React Datepicker で日付の入力（日本語化）

Next.jsの中で使うReact.jsの記法やよく使う方法をまとめていきます。

## 値の変更を検知して実行する

### 例 Firebase auth

```js
import { auth } from '@/lib/firebase.js'

useEffect(async () => {
  if (auth.currentUser) {
    // 処理
  }
}, [auth.currentUser])
```

[reactjs - Detecting Firebase user change with useEffect vs onAuthStateChanged - what's the difference? - Stack Overflow](https://stackoverflow.com/questions/66764936/detecting-firebase-user-change-with-useeffect-vs-onauthstatechanged-whats-the)

## 値があれば表示する値がなければ表示しない

[reactjs - React Redux Store updating, but component not re-rendering - Stack Overflow](https://stackoverflow.com/questions/41964204/react-redux-store-updating-but-component-not-re-rendering/55167119)

```js

function Index () {
  const boardList = () => {
    return items.length < 1 ? null : items && <div>
      {items.map((item) => 
        <div key={item.id}>
          {item.name}
        </div>
      )}
    </div>
  }

  return (
    <>
      {boardList()}
    </>
  )
}

export default Index
```

## Valueの変更を検知してDOM変更

React Hooksを使用する。

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

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

const [articles, setArticles] = useState([])

useEffect(async () => {
  if (auth.currentUser) {
    const data = await ArticleModel.get()
    setArticles(data)
  }
}, [auth.currentUser])
```

以下だと検知してくれません。

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

let articles = []

useEffect(async () => {
  if (auth.currentUser) {
    articles = await ArticleModel.get()
  }
}, [auth.currentUser])
```