external-state

external-state is an easy and lightweight React state management library.

한국어

Installation

npm install external-state

or

yarn add external-state

Usage

1. Creating initial state value

• The initial state value is created using the store() function.

1import { store } from "external-state";
2
3export const countStore = store<number>(0);

2. Using state management hook: useExternalState

• useExternalState() has a similar usage pattern to the react useState() hook.
• It has the same usage pattern as recoil's useRecoilState.

1import { useExternalState } from "external-state";
2
3function Count() {
4  const [count, setCount] = useExternalState(countStore);
5
6  return (
7    <div>
8      <div>{count}</div>
9      <button onClick={() => setCount(count + 1)}>
10        increase
11      </button>
12    </div>
13  )
14}
15
16export default Count;

3. Using state management hook: useSetExternalState

• useSetExternalState() is a function used to update the state.
• It has the same usage pattern as recoil's useSetRecoilState.

1import { useSetExternalState } from "external-state";
2
3function Count() {
4  const setCount = useSetExternalState(countStore);
5
6  return (
7    <div>
8      <button onClick={() => setCount((count) => count + 1)}>
9        increase
10      </button>
11    </div>
12  )
13}
14
15export default Count;

4. Using state management hook: useExternalValue

• useExternalValue() is a function used to subscribe the state value.
• It has the same usage pattern as recoil's useRecoilValue.

1import { useExternalValue } from "external-state";
2
3function Count() {
4  const count = useExternalValue(countStore);
5
6  return (
7    <div>
8      {count}
9    </div>
10  )
11}
12
13export default Count;

5. Accessing/Modifying the store outside of React

• Once a store is created, you can use the .getState() and .setState() methods.
• The .getState() method reads the latest state value at the time of invocation.
• The .setState() method updates the state value.
• All of this can be done directly in a vanilla environment, and even if the state is modified outside of React, all components subscribing to the store through the hook will be accurately re-rendered.
• It is also possible to use async/await.
• You can separate the logic for better reusability, as shown in the example below:

1export const countActions = {
2  increase: () => {
3    const prevCount = countStore.getState();
4    countStore.setState(prevCount + 1);
5  },
6  decrease: () => {
7    const prevCount = countStore.getState();
8    countStore.setState(prevCount - 1);
9  },
10  increaseIfOdd: () => {
11    const prevCount = countStore.getState();
12    if (prevCount % 2 === 1) {
13      countStore.setState(prevCount + 1);
14    }
15  },
16  increaseAsync: async () => {
17    const prevCount = countStore.getState();
18    const response = await fetchCount(1)
19    const amount = response.data;
20    countStore.setState(prevCount + amount)
21  }
22}