1

I have a React functional component subscribed to a Recoil atomFamily. The intent is that the atomFamily will update one item in the parent state, and then another component depending on the parent state will re-render via useEffect. However, this does not appear to be happening. Why could this be? From what it would look like (and my own experimentation) changing part of the parent state using a Recoil selector should automatically propagate back to the parent.

The selector state item looks like this:

import { atomFamily, selectorFamily } from "recoil";
import { GroupInterface } from './../interfaces/GroupInterface';
import { GroupList } from './GroupList';

export const GroupSelector = atomFamily({
    key: "GroupSelector",
    default: selectorFamily({
        key: "GroupSelector/default",
        get: id => ({get}): GroupInterface => {
            const groupList = get(GroupList);

            return groupList.find((group) => group.id === id) as GroupInterface
        }
    })
})

The parent state item looks like this:

import { atom } from 'recoil';
import { GroupInterface } from '../interfaces/GroupInterface';

export const GroupList = atom({
    key: "GroupList",
    default: [] as GroupInterface[]
})

The component that needs to be updated after the atomFamily is set is done as follows:

useEffect(() => {
    setCurrentActiveSwaps(getCurrentActiveSwaps(groupList));
    // eslint-disable-next-line
}, [groupList])
James Harrison
  • 323
  • 4
  • 12

1 Answers1

0

To start with, you assigned an atomFamily to GroupSelector,

GroupSelector = atomFamily({

then its default value of that atom is set to a selectorFamily,

 default: selectorFamily({

Normally, you would have an array or object as the default value. Using a selectorFamily as default value is interesting, not sure where it will lead though.

Here is a good example,

How to get all elements from an atomFamily in recoil?

tigerpaw
  • 135
  • 4