React Hooks Patterns

Useful React hooks patterns I use regularly:

Custom Hook for API Calls

const useApi = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

useCallback for Event Handlers

const MyComponent = ({ onSave }) => {
  const [value, setValue] = useState('');

  const handleSubmit = useCallback((e) => {
    e.preventDefault();
    onSave(value);
  }, [value, onSave]);

  return (
    <form onSubmit={handleSubmit}>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
    </form>
  );
};

Cleanup with useEffect

Always cleanup subscriptions, timers, and event listeners to prevent memory leaks.