[ESLint rule] prevent useRecoilCallback without a dependency array

[lucasbordeau]

trafficstars

Scope & Context

We can currently use useRecoilCallback without passing it a dependency array, this is the source of many silent errors.

Technical inputs

We want to enforce the usage of dependency arrays for each useRecoilCallback with a new ESLint rule in our package.

[FelixMalfait]

Hint: Use https://www.npmjs.com/package/eslint-plugin-react-hooks which as exhaustive-deps deps rule (set additionalHooks config)

Also import rules-of-hooks? It seem that eslint-plugin-react-hooks is already in package.json but not in eslint config? Or maybe I missed something

[anoopw3bdev]

I would like to work on this

[FelixMalfait]

@anoopw3bdev assigned! thanks

[anoopw3bdev]

I had a look at this issue, the configurations for custom hooks is already added in the eslint configuration file.

I couldn't find anything on the internet that might cause the issue, other than these existing configuration. Appreciate additional inputs and thoughts.

[charlesBochet]

I took a look and it seems that the following piece of code is not detected by the linter:

const deleteSelectedBoardCards = useRecoilCallback(
    ({ snapshot }) =>
      async () => {
        const selectedCardIds = snapshot
          .getLoadable(selectedCardIdsSelector)
          .getValue();

        await deleteManyOpportunities?.(selectedCardIds);
        removeCardIds(selectedCardIds);
        selectedCardIds.forEach((id) => {
          apolloClient.cache.evict({ id: `Opportunity:${id}` });
        });
      },
  );

If you use, the dependencies are checked

const deleteSelectedBoardCards = useRecoilCallback(
    ({ snapshot }) =>
      async () => {
        const selectedCardIds = snapshot
          .getLoadable(selectedCardIdsSelector)
          .getValue();

        await deleteManyOpportunities?.(selectedCardIds);
        removeCardIds(selectedCardIds);
        selectedCardIds.forEach((id) => {
          apolloClient.cache.evict({ id: `Opportunity:${id}` });
        });
      },
    [
      selectedCardIdsSelector,
      deleteManyOpportunities,
      removeCardIds,
      apolloClient.cache,
    ],
  );

@lucasbordeau do you confirm that this is the issue?

[lucasbordeau]

@charlesBochet Yes !

[gitstart-app[bot]]

Here is the GitStart Ticket for this issue: https://clients.gitstart.com/twenty/5449/tickets/TWNTY-2570