From 8a7ae56ce9272ca6ec862e0034a4492753a61123 Mon Sep 17 00:00:00 2001
From: chungheon_yi <chungheon_yi@tmax.co.kr>
Date: Tue, 19 Nov 2024 21:39:01 +0900
Subject: [PATCH] docs: update readme

---
 README.md | 45 ++++++++++++++++++++++++++++++++++++---------
 1 file changed, 36 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 224bb2f..f6cf737 100644
--- a/README.md
+++ b/README.md
@@ -40,20 +40,23 @@ useContext() always looks for the closest provider above the component that call
 
 <https://react.dev/reference/react/useContext#passing-data-deeply-into-the-tree>
 
-During development, I encountered situations where:
-
-1. Tabs nested within tabs needed to manipulate the state of the top-level tab.
-2. Tables nested within tables required control over the outermost table.
-
-3. While building a design system, I wanted to address the issue of re-renders caused by state changes when using the Context API. However, other libraries felt too cumbersome to use.
-
 Inspired by Radix UI's concept of scopes ([Radix Context](https://github.com/radix-ui/primitives/tree/main/packages/react/context)), I aimed to create a global state library that:
 
 - Provides a more flexible and scalable approach to state management.
 - Reduces unnecessary re-renders.
 - Simplifies implementation for deeply nested components.
 
-These use cases caused significant challenges and motivated me to create this library.
+
+### Main purpose
+
+The main purpose of this library is not so much for global state management (although it can be used that way too!) but rather for managing state in a flexible, simple, and efficient manner when developing component-based applications, much like its name 'namespace' suggests.
+
+It is recommended for use in the following cases:
+
+- Developing design system components (I use it with radix-ui)
+- Large and complex components such as features, widgets, and pages in the FSD architecture, or organisms in the atomic design pattern
+- Recursive structures like nested tabs, especially when there is a need to manipulate them mutually
+- When external components need to manipulate the state within a context
 
 ## Installation
 
@@ -373,7 +376,6 @@ export const ScopeExample = () => {
 
   return (
     <>
-      {/*"Does this seem crazy? The requirements at my workplace are quite similar to this!"*/}
       <AlertDialogProvider scope={scope.__scopeAlertDialog}>
         <AlertDialogProvider scope={scope2.__scopeAlertDialog}>
           <DialogProvider scope={scope2.__scopeAlertDialog}>
@@ -476,6 +478,31 @@ const {
 </ComposedProvider>;
 ```
 
+### reset State
+
+you can reset states with reset function in useNamespaceAction or useNamespaceStores
+
+```jsx
+const TestComponent = () => {
+  const { count } = useNamespaceStores((state) => ({ count: state.count }))
+  const { increment, decrement, reset } = useNamespaceAction()
+
+  return (
+    <div>
+      <button type="button" data-testid="reset-button" onClick={reset}>
+        Reset
+      </button>
+      <button type="button" data-testid="increment-button" onClick={increment}>
+        Increment
+      </button>
+      <button type="button" data-testid="decrement-button" onClick={decrement}>
+        Decrement
+      </button>
+    </div>
+  )
+}
+```
+
 ## License
 
 MIT License