反应警告 useEffect 缺少依赖项

Question

In my React application I have a redux store that contains a user with the following model:

{
  id: "",
  name: "",
  email: "",
  isAdmin: false,
  client: { id: undefined },
  token: "",
  tokenExpiry: null
};

On a simple page, I am querying a database for other data associated to that user. To do so I am taking advantage of the useEffect hook:

  useEffect(() => {
    // Check JWT auth token and refresh if near expiry
    auth.refresh(
      { token: user.token, tokenExpiry: user.tokenExpiry },
      // Request user "field" data
      loadFields(user.client.id, user.token)
    );
  }, [user.client.id, user.token]);

Upon building, React presents the React Hook useEffect has missing dependencies: 'loadFields' and 'user.tokenExpiry'. Either include them or remove the dependency array React Hook useEffect has missing dependencies: 'loadFields' and 'user.tokenExpiry'. Either include them or remove the dependency array warning.

If I understand useEffect correctly, the second parameter is the values which Reach will "watch", upon any change the component will be re-rendered (similar to how componentDidUpdate works)...

Whilst there are other values used within my useEffect call, I only want to reprocess this function when the user.client.id or user.token is changed. This is to avoid unnecessary re-renders when other parts of the user model is changed, so I don't want to add user.tokenExpiry as a dependency.

As the loadFields function is a function also used outside of from the useEffect logic, I cannot place it within useEffect so I've tried adding it as a dependency, but this causes a re-render loop as it has a dispatch call within it:

const loadFields = async (clientId, token) => {
  setIsLoading(true);
  try {
    await dispatch(fetchFields(clientId, token));
    setIsLoading(false);
  } catch (error) {
    setIsLoading(false);
    dispatch(resetFields());
  }
};

So what is the correct way to impelment useEffect in this scenario?

Answer 1

Either add all the dependencies to the array

useEffect(() => {
  // Check JWT auth token and refresh if near expiry
  auth.refresh(
    { token: user.token, tokenExpiry: user.tokenExpiry },
    // Request user "field" data
    loadFields(user.client.id, user.token)
  );
}, [user.client.id, user.token, user.tokenExpiry]);

Or it is likely just being flagged by your react-hooks linter, you can disable it for that line.

useEffect(() => {
  // Check JWT auth token and refresh if near expiry
  auth.refresh(
    { token: user.token, tokenExpiry: user.tokenExpiry },
    // Request user "field" data
    loadFields(user.client.id, user.token)
  );
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [user.client.id, user.token]);

I usually also leave a comment above the override as for the reason for it. Use this with caution as when you make any changes to the effect hook it can change what you want the hook to "watch" changes of.

Suggestion: Add tokenExpry to the array and conditionally call your endpoint if you can tell it is close to needing refreshing.

useEffect(() => {
  // Check JWT auth token and refresh if near expire
  if ( /* tokenExpiry almost expired */ ) {
    auth.refresh(
      { token: user.token, tokenExpiry: user.tokenExpiry },
      // Request user "field" data
      loadFields(user.client.id, user.token)
    );
  }
}, [user.client.id, user.token, user.tokenExpiry]);

Answer 2

To include loadFileds function in the dependency list try to wrap it with React.useCallback hook like this

React.useCallback(async (clientId, token) => { ... }, []);

and add it to dependency list. useCallback "remembers" the function and doesn't create it on every render, thus loadFields stays the same across renders and it doesn't trigger effect , see Documentation .

What about tokenExpiry - well, sometimes such situations happen, I usually leave a comment, that describes why some variable is not in a dependency list.