Summary:

This PR introduces significant refinements to our state management strategy, aimed at simplifying the use of Recoil states within our application. By streamlining the API, we enhance both the developer experience and the readability of our codebase. The changes include the consolidation of State and ComponentState management, elimination of the StateScopeMap naming, and introduction of a unified approach for handling Recoil states (aka States) and component-specific states. (aka ComponentStates)

Rationale:

The core motivation behind these changes is to make state management more intuitive and maintainable. Developers can now use classical Recoil states (State) for general state management and ComponentStates for states that are internal to reusable components. This approach simplifies the API by reducing it to two main concepts: States (classical Recoil states) and ComponentStates (with a slightly different API).

Both will share the same API: useRecoilState(myState())

For ComponentStates, there will be an additional step: myState = extractState(myComponentState, componentId)

Detailed API

State

Declaration:

export const recordIndexSortsState = createState<Sort[]>({
  key: 'recordIndexSortsState',
  defaultValue: [],
});

Usage:
const recordIndexSorts = useRecoilValue(recordIndexSortsState());

ComponentState

Declaration:

export const selectableItemIdsComponentState = createComponentState<string[][]>(
  {
    key: 'selectableItemIdsComponentState',
    defaultValue: [[]],
  },
);

Usage:

const selectableItemIdsState = extractComponentState(
      selectableItemIdsComponentState,
      scopeId,
    );
const selectableItemIds = useRecoilValue(selectableItemIdsState());

How to review

See first commit for POC
The other commits refactor the whole app