Can you explain how to handle basic data fetching in ReactJS?

In ReactJS, data fetching is typically performed inside a component’s lifecycle using the useEffect hook. The pattern involves three main steps: 1) Declare state variables for the data, loading status, and any error using useState. 2) Inside useEffect, define an async function that calls the API (e.g., using fetch or axios). 3) Call the async function, update the state with the response, and handle errors. Example:

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

useEffect(() => {
  const fetchData = async () => {
    try {
      const res = await fetch('https://api.example.com/items');
      if (!res.ok) throw new Error('Network response was not ok');
      const json = await res.json();
      setData(json);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  fetchData();
}, []);

Render logic checks loading and error states before displaying data. This approach keeps the component declarative, ensures cleanup on unmount, and handles asynchronous operations cleanly. For larger apps, consider using libraries like React Query or SWR for caching, refetching, and global state management of server data.