【ReactHooks】カスタムフックの使い方

Copy
import { useState } from 'react';

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

Copy
import React from 'react';
import { useCounter } from './useCounter';

export default function App() {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  );
}

Copy
import { useState, useEffect } from 'react';

export const useCounter = (initial = 0) => {
  const [count, setCount] = useState(initial);

  const increment = () => setCount((c) => c + 1);
  const decrement = () => setCount((c) => c - 1);

  useEffect(() => {
    console.log(`Count changed: ${count}`);
  }, [count]); // count が変わるたびにログを出す

  return { count, increment, decrement };
};

Copy
import React from 'react';
import { useCounter } from './useCounter';

export default function App() {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  );
}

Copy
import { useState, useEffect } from 'react';

export const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!url) {
      return;
    }

    const fetchData = async () => {
      setIsLoading(true);

      try {
        const response = await fetch(url);

        if (!response.ok) {
          throw new Error('Fetch failed: response not OK');
        }

        const json = await response.json();
        setData(json);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, isLoading, error };
};

Copy
import React from 'react';
import { useFetchData } from './useFetchData';

export default function App() {
  const { data, isLoading, error } = useFetchData(
    'https://jsonplaceholder.typicode.com/users'
  );

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <ul>
      {data.map((user) => {
        return <li key={user.id}>{user.name}</li>;
      })}
    </ul>
  );
}