const [state, setState] = useState(initialState);

import { useState } from 'react';

function MyComponent() {
　const [age, setAge] = useState(10);
　const [name, setName] = useState('太郎');
　const [todos, setTodos] = useState(() => createTodos());
  〜〜

function handleClick() {
  // 太郎 → 一郎に変更
　setName('一郎');
　// 10 → 11に変更
　setAge(a => a + 1);
};

setTodos(prevTodos => {
　// × これだと書き換えになってしまう
　prevTodos.push(createTodo());
});


setTodos(prevTodos => {
　// 〇 置き換える形なので破壊的ではない
　return [...prevTodos, createTodo()];
});

function handleClick() {
　setName('次郎'); // 更新前のstate："太郎"
　console.log(name); // "太郎"が出力される
};

// ×（参照渡しとなるため再レンダリングは起こらない）
let getItem = newState;

// ⚪︎（値渡しとなるため再レンダリングは起こる）
let getItem = newState.slice(0, newState.length); 

useEffect(setup, dependencies?);

// トップレベルで呼び出し
import { useEffect } from 'react';
import { createConnection } from './chat.js';

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  // useEffectを呼び出し
  // レンダリング後にサーバーへの接続して最後に切断をする
  useEffect(() => {
    // 実行させたい副作用関数を記述
    // 下記はサーバーへのリクエストを行うため外部システムとなる
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    // クリーンアップ関数を定義
    return () => {
      connection.disconnect();
    };
    // 副作用関数の実行タイミングを制御する依存データを記述
    // state変数とroomIDが更新されたときのレンダリング後に動かす
  }, [serverUrl, roomId]);
  // ...
}

import { useState, useRef, useLayoutEffect } from 'react';

function Tooltip() {
  const ref = useRef(null);
  const [tooltipHeight, setTooltipHeight] = useState(0);

  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setTooltipHeight(height);
  }, []);
  // ...

import { useCallback } from 'react';

export default function ProductPage({ productId, referrer, theme }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);
～～

import { createContext } from 'react';
const ThemeContext = createContext('light');

import { useState } from 'react';
import ThemeContext from './ThemeContext';

function App() {
  const [theme, setTheme] = useState('dark');

  return (
    <ThemeContext.Provider value={theme}>
      {/* 子コンポーネント */}
    </ThemeContext.Provider>
  );
};

import ThemeContext from './ThemeContext';

function Button() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ backgroundColor: theme }}>Click me</button>;
  };
};

import { useReducer } from 'react';

function MyComponent() {
  const initialState = { count: 0 };

  function reducerFunc(state, action) {
    switch (action.type) {
      case 'increment':
        return { count: state.count + 1 };
      case 'decrement':
        return { count: state.count - 1 };
      default:
        return state;
    };
  };

  const [state, dispatch] = useReducer(reducerFunc, initialState);

  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

import { useReducer } from 'react';

function MyComponent() {
  const initialState = { count: 0, otherCount: 100 };

  function reducerFunc(state, action) {
    switch (action.type) {
      case 'increment':
        return {
          // 複数のstateを持っている場合は更新前のstateを展開する必要があります
　　　　　　...state,
　　　　　　count: state.count + 1
        };
      case 'decrement':
        return {
　　　　　　...state,
　　　　　　count: state.count - 1
        };
      case 'multiplication':
        return {
　　　　　　...state,
　　　　　　count: state.otherCount * 2
        };
      default:
        return state;
    };
  };

  const [state, dispatch] = useReducer(reducerFunc, initialState);

  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
      <button onClick={() => dispatch({ type: 'multiplication' })}>Multiplication</button>
    </div>
  );
};

import React, { useReducer, useContext } from "react";

export const UserContext = createContext();

const initialState = {
  name: "Ken",
  age: 10
};

funcition reducerFunc(state, action) {
  switch(action.type) {
    case "nameChange":
      return {
        ...state,
        name: state.name = "Ichiro"
      };
    case "addAge":
      return {
        ...state,
        // 子コンポーネントで指定した数値をstateに加算します
        age: state.age + action.payload
      };
    default:
      return state;
  };
};

export function UserProvider({ children }) {
  const [state, dispatch] = useReducer(reducerFunc, initialState);

  return (
    <userContext.Provider value={state, dispatch}>
      {/* 子コンポーネント */}
    </ThemeContext.Provider>
  );
};

import { useId } from 'react';

function MyComponent() {
  const id = useId();

  return (
    <div>
      <label htmlfor="{id}">Username:</label>
      <input id="{id}" type="text" />
    </div>
  );
};

import { useMemo } from 'react';

function MyComponent({ a, b }) {
  const computedValue = useMemo(() => {
    return expensiveCalculation(a, b);
  }, [a, b]);

  return　(
　　<div>{computedValue}</div>
  );
};

import { useRef, useEffect } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <input ref={inputRef} type="text" />
  );
};

import { useOptimistic } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const increment = useOptimistic((prevCount) => {
    setCount(prevCount + 1);
    return fetch('/increment', {
      method: 'POST',
      body: JSON.stringify({ count: prevCount + 1 })
    }).then(res => 
      res .json()
    ).then(data => {
      setCount(data.count);
    }).catch(error => {
      setCount(prevCount);
    });
  });

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={increment}>カウントアップ</button>
    </div>
  );
};

const [state, formAction, isPending] = useActionState(action, initialState, permalink?);

import { useActionState } from 'react';

async function increment(previousState, formData) {
  return previousState + 1;
};

function StatefulForm() {
  // フォーム送信時にincrementを実行・初期値は0
  const [formState, formAction, isPending] = useActionState(increment, 0);

  return (
    // ボタンクリックをするとformActionにより指定の関数が動きます
    <form onSubmit={formAction}>
      // フォーム送信後のデータ処理が終わるまではLoadingが表示され完了後にstateが表示されます
      {isPending ? "Loading..." : state}
      // disabled={isPending}によりフォーム送信時は一時的にボタン操作を保留中にします
      <button type="submit" disabled={isPending}>Increment</button>
    </form>
  );
};

"use server";

export async function searchProducts(_prevState, formData) {
  const query = formData.get("name");
  const res = await fetch(`https://dummyjson.com/products/search?q=${name}`);
  const { products } = await res.json();
  return products;
};

"use client";

import { useActionState } from "react-dom";
import { searchProducts } from "./actions";

export default function Form() {
  const [products, action] = useActionState(searchProducts, []);

  return (
    <>
      <form action={action}>
        <label htmlFor="name">
          商品検索
          <input type="text" id="name" name="name" />
        </label>
        <button type="submit">Submit</button>
      </form>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.title}</li>
        ))}
      </ul>
    </>
  );
}

import { useState, useDebugValue } from 'react';

// MyCustomHookを読み出すコンポーネントをReact Dev Toolでインスペクトするとstateが表示される
function MyCustomHook(initialValue) {
  const [count, setCount] = useState(initialValue);
  useDebugValue(count);

  return { count, setCount };
}

import { useState, useDeferredValue } from 'react';

function MyComponent() {
  const [text, setText] = useState('');
  // 遅延表示させたいstateを第1引数に入れると返り値のdeferredTextは遅延表示される
  const deferredText = useDeferredValue(text);
  return (
    <div>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      // 即時更新
      <p>{text}</p>
      // 遅延更新
      <p>{deferredText}</p>
    </div>
  );
};

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

// 子コンポーネント
// refを渡す必要があるためforwardRefでラップする
const Child = forwardRef((props, ref) => {
  // useRefを宣言する
  const inputRef = useRef(null);
  // フォームにフォーカスをするsetFocus関数を定義
  useImperativeHandle(ref, () => ({
    setFocus: () => {
      inputRef.current.focus();
    }
  }));

  return (
    <input ref="{inputRef}" props="" type="text" />
  );
});

// 親コンポーネント
const Parent = () => {
  const inputRef = useRef(null);

  const handleClick = () => {
    // 子コンポーネントに定義したsetFocus関数を呼び出す
    inputRef.current.setFocus();
  };

  return (
    <div>
      <Child ref={inputRef} />
      <button onClick={handleClick}>inputにフォーカスする</button>
    </div>
  );
}

import { useInsertionEffect } from 'react';

// CSS in JS
function useCSS(rule) {
  useInsertionEffect(() => {
    // ここにCSSを記述
  });
  return rule;
};

const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?);

import { useSyncExternalStore } from 'react';

// ①初期レンダリング時に外部ストアから状態を参照
// ④再レンダリング時に再び呼び出されて最新の状態を取得する
const getSnapshot = () => {
  return /* 外部ストアのデータ */;
};

// ②外部ストアの状態が変更されたときに呼び出されるコールバック関数を登録
// ③呼び出されると再レンダリングをする
const subscribe = (callback) => {
  // ...
};

function MyComponent() {
  const value = useSyncExternalStore(subscribe, getSnapshot);

  return (
    <div>{value}</div>
  );
};

const [isPending, startTransition] = useTransition();

import { useTransition, startTransition } from 'react';

function MyComponent() {
  const [isPending, startTransition] = useTransition();
  const [data, setData] = useState([]);

  const fetchData = () => {
    // 時間のかかる処理にstartTransitionをラップする
    startTransition(() => {
      fetch('/data').then(response =>
        response.json();
      ).then(newData =>
　　　　　// 取得したデータをset関数に渡して状態更新
        setData(newData);
      );
    });
  };

  return (
    <div>
      // isPendingがtrueであれば「Loading...」を表示して、falseならDOM表示
      // つまりfetchDataが走っている間はペンディング状態になり、終わると解除される
      {isPending ? 'Loading...' : <ul>{data.map(item => <li key={item}>{item}</li>)}</ul>}
      <button onClick={fetchData}>Fetch data</button>
    </div>
  );
};