unnecessary re-trigger of selectors

[getayush96]

consider the following three selectors:

// async selector
export const selector3 = selectorFamily({
  key: 'selector3',
  get:
    (config) =>
    async ({ get }) => {
      // change in dependent atom retriggers this selector
      const dependencyValue = get(dependentAtom);
      return dependencyValue;
    },
});

const staticResponse = { static: true };
//sync selector
export const selector2 = selectorFamily({
  key: 'selector2',
  get:
    (config) =>
    ({ get }) => {
      get(selector3(''));
      // returning static response from this selector such that selector1 should not re trigger upon any change in value returned by selector3
      return staticResponse;
    },
});

// async selector
export const selector1 = selectorFamily({
  key: 'selector1',
  get:
    (queryConfig) =>
    async ({ get }) => {
      get(selector2(queryConfig));
      // mimicking a api call
      await new Promise((res) => setTimeout(res, 5000));
    },
});

In the above example, we have three selectors i.e. selector1, selector2, selector3 respectively. selector1(async) has a dependency of selector2(sync) and selector2 has a dependency for selector3(async). Let's assume that selector1 is used in a react component. Ideally when selector1 is trigerred and is waiting for the api call response, any change in the selector2(due to change in dependentAtom in selector3) should not retrigger theselector1 as selector2 always returns a static response. But in actutal implementation the synchronous selector2 is not able to handle errors well due to asynchronous selector3 as its dependency, and cause re trigger of selector1, which make the apis to be called multiple times instead of once. This should not have happened as none of the dependencies values for selector1 has changed.

Sandbox: https://codesandbox.io/s/unruffled-fog-p96t6m

[SivaGanesh56]

+1

[drarmstr]

Related to #1606