Interview Preparations

Handling errors when making API calls in a React application is crucial for providing a smooth user experience. To prevent triggering a re-render when an error occurs, you can utilize state management to update the component's state without causing a re-render. Here's an example using the useState hook and try...catch for asynchronous code:

Assuming you are using fetch for API calls, here's how you can structure your code:

import React, { useState, useEffect } from "react";
 
const MyComponent = () => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    const fetchData = async () => {
      try {
        // Make the API call
        const response = await fetch("https://api.example.com/data");
 
        // Check if the response is successful
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
 
        // Parse the response
        const result = await response.json();
 
        // Update the state with the data
        setData(result);
      } catch (err) {
        // Handle the error without triggering a re-render
        setError(err.message);
      }
    };
 
    // Call the function to fetch data
    fetchData();
  }, []); // Empty dependency array ensures the effect runs once on mount
 
  // Render based on the state
  if (error) {
    return <div>Error: {error}</div>;
  }
 
  if (!data) {
    return <div>Loading...</div>;
  }
 
  // Render the component with the data
  return <div>{/* Render your component using the 'data' state */}</div>;
};
 
export default MyComponent;

In this example:

We use the useState hook to manage the data and error states.
The useEffect hook is used to fetch data when the component mounts.
Inside the try block, the API call is made, and if successful, the data is updated in the state.
If there's an error, the catch block is executed, and the error message is stored in the error state without triggering a re-render.
The component renders conditionally based on the data and error states.

By separating the state management and rendering logic, you can handle API call errors gracefully without causing unnecessary re-renders of the component.

Crash Anlytics Expo