Try to use custom hooks to update recoil state. Is it good?

[percy507]

In a real scenario, we usually need update state with a little complex logic and maybe in many pages.
To reuse the update logic, I try to use custom hooks to update recoil state. Is it good?
If not good, is there any better solutions?

// src/recoil/map.ts
import { atom } from 'recoil';
export { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';

type MapDataConfig = {
  attr1?: string;
  attr2?: number;
  pointGroups: any[];
};

export const atomMapDataConfig = atom<MapDataConfig>({
  key: 'mapDataConfig',
  default: {
    pointGroups: [],
  },
});

// src/hooks/map.ts
import { atomMapDataConfig, useSetRecoilState } from '@/recoil/map';

/** add a point group in append mode */
export function useAddMapPointGroup() {
  const setMapDataConfig = useSetRecoilState(atomMapDataConfig);

  return (payload: any) => {
    setMapDataConfig((currVal) => {
      const { pointGroups } = currVal;
      return {
        ...currVal,
        pointGroups: [...(pointGroups || []), payload],
      };
    });
  };
}

[BenjaBobs]

We use our own equivalent of https://github.com/luisanton-io/recoil-nexus to access Recoil state outside of React, and then define our data like this:

// src/recoil/map.ts
import { atom } from 'recoil';
import { RecoilSet } from 'our-access-recoil-from-outside-library';

type MapDataConfig = {
  attr1?: string;
  attr2?: number;
  pointGroups: any[];
};

const atomMapDataConfig = atom<MapDataConfig>({
  key: 'mapDataConfig',
  default: {
    pointGroups: [],
  },
});

function addMapPointGroup(payload: any) {
    RecoilSet(atomMapDataConfig, (currVal) => {
      const { pointGroups } = currVal;
      return {
        ...currVal,
        pointGroups: [...(pointGroups || []), payload],
      };
    });
}

// export this object as the "api" for accessing map data
export const s_map_data {
  mapData: atomMapDataConfig,
  addMapPoint: addMapPointGroup,
}

[mondaychen]

You can also wrap your atom with a selector, see examples in https://recoiljs.org/docs/api-reference/core/selector