What is response ok in React?

In React applications, response.ok is a crucial boolean property of the global Response object, commonly encountered when performing web requests, typically using the fetch API. It indicates whether the HTTP status code of the response signifies a successful operation.

Understanding response.ok

The response.ok property returns true if the HTTP status code is in the 200-299 range, signifying a successful request. If the status code is outside this range (e.g., 4xx client errors or 5xx server errors), response.ok will be false. This property is fundamental for robust error handling in client-side applications built with React.

It's important to distinguish response.ok from a network error. The fetch API only throws an error (rejects its promise) for network issues (like no internet connection) or cross-origin violations. For HTTP error status codes (e.g., 404 Not Found, 500 Internal Server Error), the fetch promise resolves successfully, but response.ok will be false.

Practical Usage with fetch API

Within a React component or a custom hook for data fetching, response.ok is frequently used to determine whether to proceed with processing the response data or to handle an error.

Consider a common scenario where you fetch data from an API:

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

function DataFetcher() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch('https://api.example.com/data');

        // Check if the response was successful using response.ok
        if (!response.ok) {
          // If not OK, throw an error with the status for detailed handling
          const errorBody = await response.json().catch(() => ({ message: 'Unknown error' }));
          throw new Error(`HTTP error! Status: ${response.status}, Message: ${errorBody.message || 'No specific error message.'}`);
        }

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

    fetchData();
  }, []); // Empty dependency array means this runs once on mount

  if (loading) return <p>Loading data...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h2>Fetched Data</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataFetcher;

In this example:

• The if (!response.ok) check is the first point of failure detection for non-network errors.
• If response.ok is false, a custom error is thrown, which is then caught by the catch block. This allows the application to gracefully handle API errors by displaying an appropriate message to the user.

Common HTTP Status Codes and response.ok

Understanding how response.ok relates to various HTTP status codes is key for effective error management.

Status Code Range	response.ok Value	Description	Examples
200-299	true	Successful request	200 OK, 201 Created, 204 No Content
1xx	false	Informational response	100 Continue, 101 Switching Protocols
3xx	false	Redirection	301 Moved Permanently, 304 Not Modified
4xx	false	Client error (request contains bad syntax)	400 Bad Request, 401 Unauthorized, 404 Not Found, 403 Forbidden
5xx	false	Server error (server failed to fulfill request)	500 Internal Server Error, 502 Bad Gateway, 503 Service Unavailable

Error Handling with response.ok

Properly using response.ok allows you to implement robust error handling patterns in your React applications:

• Distinguishing Errors: Differentiate between network failures (which cause fetch to reject its promise) and HTTP status errors (where fetch resolves, but response.ok is false).
• Granular Feedback: Based on response.status (which provides the exact status code), you can provide specific user feedback (e.g., "Item not found" for 404, "Permission denied" for 403).
• Centralized Error Logic: Encapsulate error handling logic within a function or hook to reuse across multiple API calls, promoting cleaner and more maintainable code.

For more detailed information on the Response interface and the fetch API, refer to the MDN Web Docs on Response.