diff --git a/text/0000-use-global-state.md b/text/0000-use-global-state.md new file mode 100644 index 00000000..d1bb73d1 --- /dev/null +++ b/text/0000-use-global-state.md @@ -0,0 +1,99 @@ +- Start Date: 2022-08-25 +- RFC PR: (leave this empty) +- React Issue: (leave this empty) + +# Summary + +Implement an easy-to-use global state hook with unique keys and batch updates. No need for createContext, provider, useContext, it is as simple as using useState, the difference is that there is a unique key. + +# Basic example + +#### 1.First set a unique `key` for the global state, and can also set an initial value. + +```tsx +const initStep = 1; +const key = 'global-step'; +const [step, setStep] = useGlobalState(key, initStep); +``` +##### Or encapsulate a `useGlobalStep` twice + +```tsx +const useGlobalStep = (initStep: number = 0) => { + const key = 'global-step'; + useGlobalState(key, initStep); +} +``` + +#### 2.Introduce `useGlobalState` in other components or pages and use the same `key`. + +```tsx +const PageA = () => { + const key = 'global-step'; + const [step, setStep] = useGlobalState(key, 1); + return
+ {step} + +
+} + +const PageB = () => { + const key = 'global-step'; + const [step, setStep] = useGlobalState(key, 1); + return
+ {step} + +
+} +``` + +##### Or use the secondary encapsulated `useGlobalStep`. + +```tsx +const PageA = () => { + const [step, setStep] = useGlobalStep(); + return
+ {step} + +
+} + +const PageB = () => { + const [step, setStep] = useGlobalStep(); + return
+ {step} + +
+} +``` + +# Motivation + +Context is easy to be abused. In actual development, developers may put a lot of things in it, which makes management difficult and performance difficult to optimize. The design of useGlobalState is consistent with useState, which can avoid this problem. + +The current react needs to use the context api to achieve state sharing. This may not be suitable and easy in terms of semantics and usage. + +It is applied to pages or components that require the same state, and does not require context and provider reuse scenarios. + +It can be implemented using unique keys and batch updates, which is much simpler, as easy as using useState, the only difference is an additional key parameter. + +# Detailed design + +![architecture diagram](https://bojuematerial-prudcut-public.oss-cn-guangzhou.aliyuncs.com/fdsafdsfdggfhfhgfgds.png?t=1) + +# Drawbacks + +- keys in use may conflict. +- when several places are used at the same time, the setting of the initial value may be confusing to the user. +- the user does not know the difference with the context. + +# Alternatives + +The saved state needs to be cleaned up immediately, otherwise it will cause a memory leak. Consider adding a throw error when the key is duplicated. + +# Adoption strategy + +This is a new api, the usage method is similar to useState, it does not require too much learning cost, and there is no historical burden. + +# How we teach this + +Tell the user that useGlobal has no provider, cannot be reused, and how to use it differently from context.