recoil async selector cause infinite loop call

[LOGANLEEE]

selector code

export const fetchHospitalAccount = selector<HospitalAccount>({
  key: 'fetchHospitalAccount/sel1',
  get: async ({ get }) => {
    const { idx } = get(hospitalAtom).hospitalInfo;
    return getHospitalAccount({ target_hospital_idx: idx });
  },
});

fetching code in container

const { state, contents } = useRecoilValueLoadable(fetchHospitalAccount);
  const setHospitalAtom = useSetRecoilState(hospitalAtom);

  useEffect(() => {
    if (state === 'hasValue') {
      setHospitalAtom((prev) => ({ ...prev, hospitalAccount: contents }));
    }
  }, [contents, setHospitalAtom, state]);

Screen.Recording.2022-09-14.at.0.16.51.mov

• Temporal solution is switching selector -> selectorFamily

am I using selector in wrong way?

[drarmstr]

It looks like there is an infinite loop here because when the fetchHospitalAccount selector is updated then it will set the hospitalAtom to a new object instance. But, fetchHospitalAccount subscribes to hospitalAtom so it will then re-evaluate thus causing your infinite loop.

If fetchHospitalAccount is intended to query based on the current idx from hospitalAtom then it should not try to go back and update it via a useEffect().

[LOGANLEEE]

thank you.!