为什么一些导入的 React-Native Redux 操作会多次更改值并触发 onEffects？

Question

Here is my setup:

// store/actions/user.js

export const discoverFollowingStatus = followsId => {
  return (dispatch, getState) => {
    const userId = getState().user.user.id;
    findFollowingFromTo(userId, followsId).then(following => {
      dispatch({
        type: UPDATE_FOLLOWING_STATUS,
        payload: {
          followsId,
          following: following !== null,
        },
      });
    });
  };
};

// component.js

import {
  discoverFollowingStatus,
} from '../store/actions/user';
...
useEffect(() => {
    discoverFollowingStatus(followedUserId);
    console.log(discoverFollowingStatus);
  }, [followedUserId, discoverFollowingStatus]);

The console is printing lots of functions that aren't grouping together:

The big problem is that the screen is constantly re-rendering because the useEffect is triggering. Why would that imported constant change and trigger it?

Answer 1

The issue here is that you have two objects/values inside [] at the end of your useEffect. This should fix it if you want to keep watching those two values.

 import { discoverFollowingStatus, } from '../store/actions/user'; ... useEffect(() => { if(followedUserId && discoverFollowingStatus){ discoverFollowingStatus(followedUserId); console.log(discoverFollowingStatus); } }, [followedUserId, discoverFollowingStatus]);

Note here that discoverFollowingStatus will only be triggered if both discoverFollowingStatus and followedUserId are defined this time.

Otherwise it is recommended in the documentation to split your useEffect for separation of concerns. You should be using a useEffect to set a state when followedUserId is defined and safe to use by discoverFollowingStatus