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?

>Solution :

You should wrap the initialization of your variable with a useMemo.

const variables = useMemo(() => {
  return {
    orgID: org.id,
    projectIDs: projects.map(p => p.id)
  };
, [
// add the necessary dependencies here
]);