How can I handle errors in React 17 using hooks?

How can I handle errors in React 17 using hooks?

In React 17, you can handle errors using the useEffect hook along with a state variable to track errors.

Can you show me a code example?

Sure! Here's a simple example:

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

function MyComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => setData(data))
      .catch(error => setError(error));
  }, []);

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

This code fetches data and handles any errors that occur.

What if I want to retry fetching data after an error?

You can add a retry mechanism by using a button to trigger the fetch again. Here's an updated example:

const [retry, setRetry] = useState(0);

const handleRetry = () => setRetry(prev => prev + 1);

useEffect(() => {
  // Fetch logic here
}, [retry]);

return (
  <div>
    {error ? <><div>Error: {error.message}</div><button onClick={handleRetry}>Retry</button></> : <div>Data: {JSON.stringify(data)}</div>}
  </div>
);