如何避免 React.js 中的 useEffect 和 useCallback 依赖循环

Question

I am working on converting a React component from a class component to a functional component with hooks.

I want to get a list of group members from my database. I hold the array in component state.

const [members, setMembers] = useState([]);

Once the members are downloaded, I want to get each member's profile picture asynchronously.

1) The component is mounted, and the following useEffect() is called. Note the dependency to getMembers .

useEffect(() => {
    getMembers();
}, [getMembers]);

2) The useEffect callback calls the function getMembers() . Note the dependency to getMembersProfilePictures .

const getMembers = useCallback(() => {
    fetchMembersFromDatabase()
        .then((data) => {
            setMembers(data);

            getMembersProfilePictures();
        })
}, [getMembersProfilePictures]);

3) Once the members are retrieved from the database, the members state is updated and getMembersProfilePictures() is called. Note the dependency to members .

const getMembersProfilePictures = useCallback(() => {
    for (let i = 0; i < members.length; i++) {
        const member = { ...members[i] };

        if (member.has_picture) {
            firebase
                .storage()
                .ref()
                .child("<childUrl>")
                .getDownloadURL()
                .then((url) => {
                    member.picture_url = url;
                    const membersCopy = [...members];
                    membersCopy[i] = member;
                    setMembers(membersCopy);
                });
        }
    }
}, [members]);

Because the useEffect() depends on getMembers() , getMembers() depends on getMembersProfilePictures() , and getMembersProfilePictures() depends on members , as soon as the members state is updated, the chain of useCallback() s is re-created, and the useEffect() is called. This becomes an infinite loop of data fetching.

My current thought is to pass the data retrieved from fetchMembersFromDatabase() directly to getMembersProfilePictures() as an argument. This removes the dependency of members from getMembersProfilePictures() , and therefore removes the infinite loop.

Ignoring listening to changes in the members list in the database and ignoring caching of members and their respective profile picture, it appears that there are no drawbacks to this solution. I am wondering what other's thoughts are to this solution. Thanks!

Answer 1

• You are calling fetchMembersFromDatabase() in the useCallback but not using it as a dependency.
• You are setting members inside getMembersProfilePictures() which is using members as dependency. This is causing infinite loop in my opinion.

Proposed solution

1. useEffect without any dependency
2. useEffect for member and call the get member images function. maintain another object for member thumbnails.

Answer 2

EDIT: It's become clear you're trying to do too much in one component.

What you really want to do is

1. Get your list of members and render Member components and then
2. Have your Member components download their own pictures.

The below is semi-pseudo code, take the async/await stuff with a grain of salt and do it the proper way that works for you:

const MemberList = ({maybeWithAProp}) => {

   const [members,setMembers] = useState([]);
   useEffect(async () => {
       setMembers((await someCallToGetMembers(maybeWithAProp));
   },[maybeWithAProp]);

   return members.map(m => <Member {...m}/>

}

const Member = ({memberId}) => {

  const [pic,setPic] = useState();

  useEffect(async () => {
     setPic(null); // you're about to download a new one, probably get rid of the old one first
     setPic((await fetchPicForMember(memberId));
  },[memberId]);

  return (...)

}

Original answer:

Ever consider separating your state?

const [members, setMembers] = useState([]);
const [membersPics,setMembersPics] = useState([]);

// run on mount only
useEffect(async () => {
  const data = await fetchMembersFromDatabase();
  setMembers(data);
,[]);

useEffect(async () => {
  const pics = await Promise.all(members.map(m => fetchProfilePic(m)));
  setMembersPics(pics);
},[members]);


return <SomeComponent members={useMemo(members.map((m,i) => ({...m,url:membersPics[i]})),[members,memberPics])}/>

The major issue with your original code is that you were calling setMembers twice, which is a big indicator that what you think is one piece of state, is probably better served as being two pieces of state.