'ESLint: to fix this, wrap the initialization of constant in its own useMemo()

I get this eslint warning:

ESLint: The 'variables' object makes the dependencies of useEffect Hook (at line 36) change on every render. To fix this, wrap the initialization of 'variables' in its own useMemo() Hook.(react-hooks/exhaustive-deps

for the following piece of code:

const MyComponent = () => {
  // ...
  const variables = {
    orgID: org.id,
    projectIDs: projects.map(p => p.id)
  };
  const { data, error, loading } = myGraphqlQuery({ variables });

  useEffect(
    () => myOtherFunction(client, channel, query, variables),
    [variables, channel, client],
  );
  // ...
}

I don't get it, what should I do here? What's the point of using useMemo for the const?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source