Open5ヶ月前にコメント追加2

ReactのHookについて備忘録

React

React 19

darmaT0o0

組み込みのReact Hook

useState
useEffect
useContext
useRef
useReducer
useCallback
useMemo

下記のHooksはReact: v19~から使える

useFormStatus
useActionState
useOptimistic
use

上記について取り扱う

useStateの使い方

const [count, setCount] = useState(0)
setCount(count+1) //値の更新

useEffectの使い方
- レンダリングに実行される
- 第二引数で配列を渡すことで、指定したもの状態が更新されるたびに実行タイミングを制限できる

// DOMが描画後、`useEffect`が実行される
useEffect(() => {
    console.log("レンダリング")
},[]);

useContextの使い方
- componentにpropsを渡すことなく、離れた親要素Nodeから情報を取得できる
- コンテキストの値を読み取り、変更を検知し、反映することができる
- createContext,useContexで作成、取得を行う
- <ThemeContext.Provider value="dark">で囲む

Reactの予約語について

// contextの作成
const ThemeContext = createContext(null);

export default function MyApp() {
  return (
/*
- ThemeContext.Providerで囲む
- 内側のコンポーネントはThemeContextを参照することができるようになる
- 内側のコンポーネントに対してThemeを伝搬させる
*/
    <ThemeContext.Provider value="dark">
      <Form />
    </ThemeContext.Provider>
  )
}

function Form() {
  return (
    <Panel title="Welcome">
      <Button>Sign up</Button>
      <Button>Log in</Button>
    </Panel>
  );
}

// 補足: { children }は子コンポーネントを分割代入として受け取る `children`はReactの予約語である
function Panel({ title, children }) {
//  or  function Panel(props) { return <h1>{props.children}</h1> }
// useContex(参照するもの)で取得する
  const theme = useContext(ThemeContext);
  const className = 'panel-' + theme;
  return (
    <section className={className}>
      <h1>{title}</h1>
      {children}
    </section>
  )
}

function Button({ children }) {
  const theme = useContext(ThemeContext);
  const className = 'button-' + theme;
  return (
    <button className={className}>
      {children}
    </button>
  );
}

useRefの使い方
- 再描画も値をリセットすることなく値を保持することができる
- useRef.currentで値が変更しても再描画されることはない
- コンポーネントごとに固有で値を保持している

const intervalRef = useRef(0);
const currentInterval = intervalRef.current // useRefの値を参照することができる
intervalRef.current = 1000 // 値を書き換えることができる

// Example
export default function Counter() {
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1; //  <-- 保持している値に対して +1する
    alert('You clicked ' + ref.current + ' times!');
  }

  return (
    <button onClick={handleClick}>
      Click me!
    </button>
  );
}

darmaT0o0

useReducerの使い方
useFormStatusの使い方
- pending,data, method, actionのオブジェクトを返す
  - pendingは送信状態かどうか?
  - dataは送信した、入力データを保持する
  - methodは<form method="">で指定した値を返す。
  - actionは送信したURLを返す
- フォームを送信中の時は、pending = true になる

const { pending, data, method, action } = useFormStatus();
const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}> // <--- 送信中は、非活性状態になる。
      {pending ? "Submitting..." : "Submit"}
    </button>
  );

useActionStateの使い方
- <form>の送信時に呼び出される関数で、<form>と一緒に使うことが多そう
- <form action={formAction}>のformActionとして使うことができる

import { useActionState } from "react";

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

function StatefulForm({}) {
  const [state, formAction] = useActionState(increment, 0);
//  ^^^^^^^^^^^^^^^^^^^
// stateの初期値はinitial stateになる。
// formActionははincrement処理後の値に書き換わる
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  )
}