How can I implement error handling in my React hooks?

How can I implement error handling in my React hooks?

You can use a try-catch block within your hook to catch errors. Would you like an example?

Yes, please provide an example of a custom hook with error handling.

Sure! Here's a simple custom hook that fetches data and handles errors:

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error);
      }
    };
    fetchData();
  }, [url]);

  return { data, error };
};

This hook fetches data and sets an error state if something goes wrong.

How can I display the error message in my component?

You can check the error state returned by the hook and conditionally render the error message in your component. For example:

const MyComponent = () => {
  const { data, error } = useFetch('https://api.example.com/data');

  if (error) {
    return <div>Error: {error.message}</div>;
  }
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};