react-hooks icon indicating copy to clipboard operation
react-hooks copied to clipboard

Adopt variant underlying state management

Open otakustay opened this issue 3 years ago • 0 comments

Pick useArray as an example, this hook creates a bunch of convenient functions around Array types, it manages a local state by using useState in its implementation:

const [list, {push, removeAt}] = useArray();

<CreateForm onSubmit={push} />
<DeleteButton onClick={index => removeAt(index)} />

In real word, we often create states from variant sources, like recoil's useRecoilState, or a abstract [state, setState] passed via Context, then we are not able to create array functions around these states, this is an important missing functionality of a well designed hooks library.

For this reason, we're preparing to split some hooks into 2 parts:

  1. a useSomethingWith([state, setState]) to wrap an existing state tuple
  2. a useSomething hook depending on the previous useSomethingWith with a local state

After this, we can simple introduce useArrayWith to help us manage global arrays like:

const globalListState = useRecoilState(globalListAtom);
const [globalList, {push, removeAt}] = useArrayWith(globalListState);

otakustay avatar May 19 '21 06:05 otakustay