仅当我添加第二个依赖项时，才自定义 React 钩子，无限循环。 错误或我无法理解的东西？

Question

I've made a really simple React hook. That's something seen on many guides and websites:

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

export const useFetchRemote = (remote, options, initialDataState) => {
  const [data, setData] = useState(initialDataState);

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios.get(remote, options);
      setData(result.data);
    };

    fetchData();
  }, [remote]);

  return data;
};

Example usage:

import { useFetchRemote } from '../utils';

export const UserList = () => {
  const users = useFetchRemote('/api/users', {}, []);

  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>}
    </ul>
  );
}

This is working . If I understand correctly:

• With no dependencies like useEffect(() => { /*...*/ }) , setting the state into the function would trigger a re-render, calling useEffect again, in an infinite loop.
• With empty dependencies like useEffect(() => { /*...*/ }, []) , my function will be called only the "very first time" component is mounted.

So, in my case, remote is a dependency. My function should be called again if remote changes. This is true also for options . If I add also options , the infinite loop starts. I can't understand... why this is happening?

export const useFetchRemote = (remote, options, initialDataState) => {
  // ...

  useEffect(() => {
      // ...
  }, [remote, options]);

  // ...
};

Answer 1

The infinite loop is caused by the fact that your options parameter is an object literal, which creates a new reference on every render of UserList . Either create a constant reference by defining a constant outside the scope of UserList like this:

const options = {};
const initialDataState = [];

export const UserList = () => {
  // or for variable options instead...
  // const [options, setOptions] = useState({});
  const users = useFetchRemote('/api/users', options, initialDataState);

  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>}
    </ul>
  );
}

or if you intend the options parameter to be effectively constant for each usage of the userFetchRemote() hook, you can do the equivalent of initializing props into state and prevent the reference from updating on every render:

export const useFetchRemote = (remote, options, initialDataState) => {
  const [optionsState] = useState(options);
  const [data, setData] = useState(initialDataState);

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios.get(remote, optionsState);
      setData(result.data);
    };

    fetchData();
  }, [remote, optionsState]);
  // ---------^

  return data;
};

This second approach will prevent a new fetch from occuring though, if the options are dynamically changed on a particular call site of useFetchRemote() .