docs(readme): update docs (#11)

Author: unadlib

README.md

@@ -33,18 +33,14 @@ Provide you can create immutable state easily with mutable way.
 import { useMutative } from 'use-mutative';
 
 export function App() {
-  const [state, mutateState] = useMutative({
-    foo: 'bar',
-    list: [{ text: 'todo' }],
-  });
+  const [todos, setTodos] = useMutative([{ text: 'todo' }]);
   return (
     <>
       <button
         onClick={() => {
-          // set value with draft mutable
-          mutateState((draft) => {
-            draft.foo = `${draft.foo} 2`;
-            draft.list.push({ text: 'todo 2' });
+          // set todos with draft mutable
+          setTodos((draft) => {
+            draft.push({ text: 'todo 2' });
           });
         }}
       >
@@ -53,10 +49,7 @@ export function App() {
       <button
         onClick={() => {
           // also can override value directly
-          mutateState({
-            foo: 'bar 2',
-            list: [{ text: 'todo 2' }],
-          });
+          setTodos([{ text: 'todo' }, { text: 'todo 2' }]);
         }}
       >
         click
@@ -76,7 +69,6 @@ Provide you can create immutable state easily with mutable way in reducer way.
 import { rawReturn } from 'mutative';
 import { useMutativeReducer } from 'use-mutative';
 
-
 const initialState = {
   count: 0,
 };
@@ -117,7 +109,7 @@ More detail about `use-mutative` can be found in [API docs](https://github.com/m
 In some cases, you may want to get that patches from your update, we can pass `{ enablePatches: true }` options in `useMutative()` or `useMutativeReducer()`, that can provide you the ability to get that patches from pervious action.
 
 ```tsx
-const [state, mutateState, patches, inversePatches] = useMutative(initState, {
+const [state, updateState, patches, inversePatches] = useMutative(initState, {
   enablePatches: true,
 });
 

docs/README.md

@@ -35,7 +35,7 @@ Provide you can create immutable state easily with mutable way.
 import { useMutative } from 'use-mutative';
 
 export function App() {
-  const [state, mutateState] = useMutative({
+  const [state, setState] = useMutative({
     foo: 'bar',
     list: [{ text: 'todo' }],
   });
@@ -44,7 +44,7 @@ export function App() {
       <button
         onClick={() => {
           // set value with draft mutable
-          mutateState((draft) => {
+          setState((draft) => {
             draft.foo = `${draft.foo} 2`;
             draft.list.push({ text: 'todo 2' });
           });
@@ -55,7 +55,7 @@ export function App() {
       <button
         onClick={() => {
           // also can override value directly
-          mutateState({
+          setState({
             foo: 'bar 2',
             list: [{ text: 'todo 2' }],
           });
@@ -118,7 +118,7 @@ More detail about `use-mutative` can be found in [API docs](https://github.com/m
 In some cases, you may want to get that patches from your update, we can pass `{ enablePatches: true }` options in `useMutative` or `useMutativeReducer`, that can provide you the ability to get that patches from pervious action.
 
 ```tsx
-const [state, mutateState, patches, inversePatches] = useMutative(initState, {
+const [state, setState, patches, inversePatches] = useMutative(initState, {
   enablePatches: true,
 });
 

docs/modules.md

@@ -142,9 +142,9 @@ import { act, renderHook } from '@testing-library/react';
 import { useMutative } from '../src/index';
 
 const { result } = renderHook(() => useMutative({ items: [1] }));
-const [state, mutateState] = result.current;
+const [state, setState] = result.current;
 act(() =>
-  mutateState((draft) => {
+  setState((draft) => {
     draft.items.push(2);
   })
 );

src/index.ts

@@ -52,9 +52,9 @@ type Result<S, O extends PatchesOptions, F extends boolean> = O extends
  * import { useMutative } from '../src/index';
  *
  * const { result } = renderHook(() => useMutative({ items: [1] }));
- * const [state, mutateState] = result.current;
+ * const [state, updateState] = result.current;
  * act(() =>
- *   mutateState((draft) => {
+ *   updateState((draft) => {
  *     draft.items.push(2);
  *   })
  * );
@@ -94,11 +94,11 @@ function useMutative<
   currentCount += 1;
   renderCount.current += 1;
   //#endregion
-  const [state, mutateState] = useState(() =>
+  const [state, setState] = useState(() =>
     typeof initialValue === 'function' ? initialValue() : initialValue
   );
   const updateState = useCallback((updater: any) => {
-    mutateState((latest: any) => {
+    setState((latest: any) => {
       const updaterFn = typeof updater === 'function' ? updater : () => updater;
       const result = create(latest, updaterFn, options);
       if (options?.enablePatches) {
@@ -108,7 +108,7 @@ function useMutative<
           renderCount.current === count.current + 1
         ) {
           Array.prototype.push.apply(patchesRef.current.patches, result[1]);
-          // `inversePatches` should be in reverse order when multiple mutateState() executions
+          // `inversePatches` should be in reverse order when multiple setState() executions
           Array.prototype.unshift.apply(
             patchesRef.current.inversePatches,
             result[2]
@@ -277,7 +277,7 @@ function useMutativeReducer<
           renderCount.current === count.current + 1
         ) {
           Array.prototype.push.apply(patchesRef.current.patches, result[1]);
-          // `inversePatches` should be in reverse order when multiple mutateState() executions
+          // `inversePatches` should be in reverse order when multiple setState() executions
           Array.prototype.unshift.apply(
             patchesRef.current.inversePatches,
             result[2]

test/index.0.snap.ts

@@ -3,9 +3,9 @@ import { act, renderHook } from '@testing-library/react';
 import { useMutative } from '../src/index';
 
 const { result } = renderHook(() => useMutative({ items: [1] }));
-const [state, mutateState] = result.current;
+const [state, updateState] = result.current;
 act(() =>
-  mutateState((draft) => {
+  updateState((draft) => {
     draft.items.push(2);
   })
 );