The best approach for data fetching in React depends on the app’s complexity and needs. 1. For simple cases, useEffect is straightforward and effective, especially on component mount or dependency changes. 2. Custom hooks help reuse logic, centralize error/loading handling, and clean up components. 3. As complexity grows, libraries like React Query manage caching, background updates, and shared data efficiently. 4. In Next.js, server-side or static generation methods like getStaticProps improve SEO and performance by pre-fetching data during build or on the server. Each method has tradeoffs, so choose based on scalability, maintainability, and project requirements.

When building React apps, fetching data is a core part of most components — whether it's pulling user info, loading content from an API, or syncing with a backend. The trick is knowing which pattern fits your use case best.

There are a few standard approaches people use, and each has its pros and cons depending on complexity, reusability, and performance needs.

Using useEffect for Basic Data Fetching

This is the most straightforward and commonly used method in functional components. You call your fetch function inside useEffect, usually on mount or when certain dependencies change.

How it works:

• Call an async function inside useEffect
• Set up cleanup if needed (like aborting a fetch)
• Store the result in component state using useState

Example:

useEffect(() => {
  const fetchData = async () => {
    const res = await fetch('/api/data');
    const data = await res.json();
    setData(data);
  };

  fetchData();
}, []);

Tips:

• Don’t forget to add proper dependencies in the array
• Handle loading and error states too (setLoading(true) before fetch, etc.)
• If you're fetching based on user input or route changes, include those as dependencies

This works great for simple cases, but can get messy if you’re doing a lot of data fetching across many components.

Extracting Logic into a Custom Hook

Once you find yourself repeating the same fetch patterns in multiple places, it’s time to move that logic into a custom hook.

Why do this?

• Keeps your components clean
• Reuses loading/error handling logic
• Makes testing easier

A basic example might look like:

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(url);
        const json = await res.json();
        setData(json);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

Then in your component:

const { data, loading } = useFetch('/api/users');

You can expand this further by adding caching, retry logic, or even support for POST requests.

Using a State Management Library or Query Tool

If your app grows in size or complexity, managing data fetching manually gets harder. That’s where tools like React Query, SWR, or Redux Toolkit Query come in.

These libraries handle:

• Caching responses
• Background refetching
• Pagination and infinite scrolling
• Optimistic updates
• Sharing fetched data between components

React Query Example:

import { useQuery } from 'react-query';

function useUserData(userId) {
  return useQuery(['user', userId], async () => {
    const res = await fetch(`/api/users/${userId}`);
    return res.json();
  });
}

Benefits:

• Built-in retries, caching, and stale-while-revalidate behavior
• Simplifies state management in components
• Handles edge cases out of the box

But don’t reach for them unless you actually need these features — for small apps or one-off components, they can be overkill.

Server-Side or Static Generation (Next.js / SSG)

In frameworks like Next.js, you have additional options such as getServerSideProps, getStaticProps, or async server components.

These are useful when:

• SEO matters and content should be rendered on the server
• You want to avoid client-side waterfalls
• You need to pre-fetch data before rendering

For example, using getStaticProps:

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
  };
}

This approach moves data fetching out of the component entirely and into the build process or server layer.

Depending on your project, any of these methods can make sense. For small apps, useEffect custom hooks work fine. As things scale, query libraries or SSR/SSG techniques become more valuable.

At the end of the day, pick what keeps your code readable and maintainable — and don't over-engineer unless you really need to.

The above is the detailed content of What are common patterns for fetching data in React components?. For more information, please follow other related articles on the PHP Chinese website!