From 97076d44a0dae56b25c6efdcf43e27864570fe4b Mon Sep 17 00:00:00 2001
From: mushan <mushan0x0@gmail.com>
Date: Thu, 25 Aug 2022 21:00:45 +0800
Subject: [PATCH 1/3] useGlobalState()

---
 text/0000-use-global-state.md | 44 +++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 text/0000-use-global-state.md

diff --git a/text/0000-use-global-state.md b/text/0000-use-global-state.md
new file mode 100644
index 00000000..81b9c1b7
--- /dev/null
+++ b/text/0000-use-global-state.md
@@ -0,0 +1,44 @@
+- 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
+
+If the proposal involves a new or changed API, include a basic code example.
+Omit this section if it's not applicable.
+
+# 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)
+
+# 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.

From ec43d43e6e73207d996c77558cf57b5844db359e Mon Sep 17 00:00:00 2001
From: mushan <mushan0x0@gmail.com>
Date: Thu, 25 Aug 2022 21:06:09 +0800
Subject: [PATCH 2/3] Add Basic example.

---
 text/0000-use-global-state.md | 59 +++++++++++++++++++++++++++++++++--
 1 file changed, 57 insertions(+), 2 deletions(-)

diff --git a/text/0000-use-global-state.md b/text/0000-use-global-state.md
index 81b9c1b7..3ba19329 100644
--- a/text/0000-use-global-state.md
+++ b/text/0000-use-global-state.md
@@ -8,8 +8,63 @@ Implement an easy-to-use global state hook with unique keys and batch updates. N
 
 # Basic example
 
-If the proposal involves a new or changed API, include a basic code example.
-Omit this section if it's not applicable.
+#### 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 <div>
+    {step}
+    <Button onClick={() => setStep(step + 1)}>step + 1</Button>
+  </div>
+}
+
+const PageB = () => {
+  const key = 'global-step';
+  const [step, setStep] = useGlobalState(key, 1);
+  return <div>
+    {step}
+    <Button onClick={() => setStep(step - 1)}>step - 1</Button>
+  </div>
+}
+```
+
+##### Or use the secondary encapsulated `useGlobalStep`.
+
+```tsx
+const PageA = () => {
+  const [step, setStep] = useGlobalStep();
+  return <div>
+    {step}
+    <Button onClick={() => setStep(step + 1)}>step + 1</Button>
+  </div>
+}
+
+const PageB = () => {
+  const [step, setStep] = useGlobalStep();
+  return <div>
+    {step}
+    <Button onClick={() => setStep(step - 1)}>step - 1</Button>
+  </div>
+}
+```
 
 # Motivation
 

From 8303ed63877c1fa5c8fd4507ebef8f7c62c8d2c5 Mon Sep 17 00:00:00 2001
From: mushan <mushan0x0@gmail.com>
Date: Thu, 25 Aug 2022 21:09:07 +0800
Subject: [PATCH 3/3] Fix architecture diagram not showing.

---
 text/0000-use-global-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/text/0000-use-global-state.md b/text/0000-use-global-state.md
index 3ba19329..d1bb73d1 100644
--- a/text/0000-use-global-state.md
+++ b/text/0000-use-global-state.md
@@ -78,7 +78,7 @@ It can be implemented using unique keys and batch updates, which is much simpler
 
 # Detailed design
 
-![architecture diagram](https://bojuematerial-prudcut-public.oss-cn-guangzhou.aliyuncs.com/fdsafdsfdggfhfhgfgds.png)
+![architecture diagram](https://bojuematerial-prudcut-public.oss-cn-guangzhou.aliyuncs.com/fdsafdsfdggfhfhgfgds.png?t=1)
 
 # Drawbacks