React useEffect添加options至依赖数组触发无限循环问题咨询

Great question! The root issue here boils down to how React checks for dependency changes and how JavaScript handles object references. Let me break it down step by step:

1. Object Reference Equality in JavaScript #

React uses reference equality to determine if a dependency in the useEffect array has changed. When your Example component re-renders (which happens every time setResponse updates the response state), the { method: 'GET' } object you pass to useMyFetch is recreated as a brand new object. Even though its contents are identical, it lives at a different memory address—so React sees it as a completely different dependency.

2. The Loop Cycle #

Here's exactly how the infinite loop plays out:

• Component renders initially, passes a new options object to useMyFetch.
• useEffect runs, triggers the fetch request.
• When the fetch completes, setResponse updates the response state, which causes the Example component to re-render.
• On re-render, a new { method: 'GET' } object is created again.
• useEffect detects that the options dependency has changed (because the reference is new), so it runs the fetch logic again.
• This process repeats indefinitely: fetch → state update → re-render → new options → fetch again...

3. How to Fix It #

To stop the loop, you need to ensure the options object maintains the same reference across component re-renders. Here are two common solutions:

Option 1: Cache with useMemo #

Use React's useMemo hook to memoize the options object, so it only re-creates it if its dependencies change (in this case, never, since we pass an empty dependency array):

function Example() {
  // Memoize the options object to keep a consistent reference
  const options = React.useMemo(() => ({ method: 'GET' }), []);
  const res = useMyFetch("https://dog.ceo/api/breeds/image/random", options);
  
  if (!res) {
    return <div>loading...</div>;
  }
  return <img src={res} alt="an image" />;
}

Option 2: Move Options Outside the Component #

If your options are static (like this GET method), you can define them outside the component entirely. This way, the reference never changes:

// Define once outside the component
const STATIC_GET_OPTIONS = { method: 'GET' };

function Example() {
  const res = useMyFetch("https://dog.ceo/api/breeds/image/random", STATIC_GET_OPTIONS);
  
  if (!res) {
    return <div>loading...</div>;
  }
  return <img src={res} alt="an image" />;
}

Key Takeaway #

The core problem is that objects in JavaScript are compared by reference, not by their content. By making sure your options object has a stable reference across re-renders, you'll avoid triggering unnecessary useEffect runs and the infinite loop that comes with them.

内容的提问来源于stack exchange，提问作者Sébastien D