React Hooks完全ガイド

2024/01/10

#react#javascript#hooks

React Hooks完全ガイド

React HooksはReact 16.8で導入された機能で、関数コンポーネントでstate管理や副作用を扱えるようになりました。

基本的なHooks

useState

import { useState } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

useEffect

import { useEffect, useState } from 'react';
 
function DataFetcher() {
  const [data, setData] = useState(null);
 
  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(setData);
  }, []);
 
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}

カスタムHooks

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
 
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialValue);
 
  return { count, increment, decrement, reset };
}

HooksによってReactの開発がより関数型になり、コードの再利用性が向上しました。