[FIX] replace useStateGetter with useStateGetReset

root · root · commit 88483bd19fcd · 2023-10-16T10:39:55.000+02:00
diff --git a/apps/react-tools-demo/src/components/hooks/useStateGetReset/InputMemo.tsx b/apps/react-tools-demo/src/components/hooks/useStateGetReset/InputMemo.tsx
diff --git a/apps/react-tools-demo/src/components/hooks/useStateGetReset/UseStateGetReset.tsx b/apps/react-tools-demo/src/components/hooks/useStateGetReset/UseStateGetReset.tsx
@@ -1,18 +1,19 @@
 import { BaseSyntheticEvent, useCallback, useState } from 'react';
-import { useStateGetter } from '../../../../../../packages/react-tools/src/hooks/useStateGetter';
+import { useStateGetReset } from '../../../../../../packages/react-tools/src/hooks/useStateGetReset';
 import { Input } from './InputMemo';
 
 /**
 The component has:
-- A _useStateGetter_ that receives an object, with three properties _id_, _name_, _eta_, and returns a tuple with _stateG_, _setterG_ and _getter_.
+- A _useStateGetReset_ that receives an object, with three properties _id_, _name_, _eta_, and returns a tuple with _stateG_, _setterG_, _getter_ and _resetter_.
 - A _useState_ that receives same object of useStateGetter and returns a tuple with _state_ and _setter_.
 - Each property of _state_ and _stateG_ is rendered an Input component that renders the input and label fields and the _component's number of renders_.
 - A _onChangeGetter_ function made with useCallback to handle stateGetter input onChange, reading other values with getter function.
 - A _onChange_ function made with useCallback to handle stater input onChange, reading other values by state variable.
+- A button that executes the _resetter_ function on _stateG_.
 The two functions onChange and onChange Getter update their respective _state_ every time they are executed. Since the _onChange_ function depends on the state, every time this changes it will be reevaluated and this will also trigger the rerender of the input components that have not undergone a change to their _value_ variable. The _onChangeGetter_ doesn't have this behavior: since the _getter_ function isn't reevaluated even if the _stateG_ changes, so the _onChangeGetter_ is never reevaluated and only the input component that has a change in the _value_ variable is rerendered.
  */
-const UseStateGetter = () => {
-	const [stateG, setStateG, getState] = useStateGetter({ id: "", name: "", eta: "" });
+const UseStateGetReset = () => {
+	const [stateG, setStateG, getState, resetState] = useStateGetReset({ id: "", name: "", eta: "" });
 	const [state, setState] = useState({ id: "", name: "", eta:"" });
 
 	const onChangeGetter = useCallback((e: BaseSyntheticEvent) => {
@@ -33,15 +34,16 @@ const UseStateGetter = () => {
 	return (
 		<div style={{ display: "grid", gridTemplateColumns: "auto auto", justifyContent: "center", gap: 50 }}>
 			<div>
-				<p><strong>With getter</strong></p>
-				<div style={{ gridTemplateRows: "auto auto auto", justifyContent: 'center', display: 'grid', gap: '10px' }}>
+				<p><strong>With get and reset</strong></p>
+				<div style={{ gridTemplateRows: "auto auto auto auto", justifyContent: 'center', display: 'grid', gap: '10px' }}>
 					<Input id="idG" name="id" value={stateG.id} onChange={onChangeGetter} />
 					<Input id="nameG" name="name" value={stateG.name} onChange={onChangeGetter} />
 					<Input id="etaG" name="eta" value={stateG.eta} onChange={onChangeGetter} />
+					<button onClick={resetState}>Reset State</button>
 				</div>
 			</div>
 			<div>
-				<p><strong>Without getter</strong></p>
+				<p><strong>Without get and reset</strong></p>
 				<div style={{ gridTemplateRows: "auto auto auto", justifyContent: 'center', display: 'grid', gap: '10px' }}>
 					<Input id="id" name="id" value={state.id} onChange={onChange} />
 					<Input id="name" name="name" value={state.name} onChange={onChange} />
@@ -52,6 +54,6 @@ const UseStateGetter = () => {
 	);
 };
 
-UseStateGetter.displayName = "UseStateGetter";
+UseStateGetReset.displayName = "UseStateGetReset";
 
-export { UseStateGetter };
+export { UseStateGetReset };
diff --git a/apps/react-tools-demo/src/constants/components.ts b/apps/react-tools-demo/src/constants/components.ts
@@ -1,7 +1,7 @@
 export const COMPONENTS = [
 	[
 		"usePrevious",
-		"useStateGetter",
+		"useStateGetReset",
 		"useStateHistory",
 		"useStateHistoryGetter",
 		"useMemoCompare",
diff --git a/apps/react-tools-demo/src/markdown/UseStateGetReset.md b/apps/react-tools-demo/src/markdown/UseStateGetReset.md
@@ -1,11 +1,11 @@
-# useStateGetter
-Custom useState with getter state function.
+# useStateGetReset
+Custom useState with get and reset state functions.
 
 ## Usage
 
 ```tsx
-const UseStateGetter = () => {
-	const [stateG, setStateG, getState] = useStateGetter({ id: "", name: "", eta: "" });
+const UseStateGetReset = () => {
+	const [stateG, setStateG, getState, resetState] = useStateGetReset({ id: "", name: "", eta: "" });
 	const [state, setState] = useState({ id: "", name: "", eta:"" });
 
 	const onChangeGetter = useCallback((e: BaseSyntheticEvent) => {
@@ -26,15 +26,16 @@ const UseStateGetter = () => {
 	return (
 		<div style={{ display: "grid", gridTemplateColumns: "auto auto", justifyContent: "center", gap: 50 }}>
 			<div>
-				<p><strong>With getter</strong></p>
-				<div style={{ gridTemplateRows: "auto auto auto", justifyContent: 'center', display: 'grid', gap: '10px' }}>
+				<p><strong>With get and reset</strong></p>
+				<div style={{ gridTemplateRows: "auto auto auto auto", justifyContent: 'center', display: 'grid', gap: '10px' }}>
 					<Input id="idG" name="id" value={stateG.id} onChange={onChangeGetter} />
 					<Input id="nameG" name="name" value={stateG.name} onChange={onChangeGetter} />
 					<Input id="etaG" name="eta" value={stateG.eta} onChange={onChangeGetter} />
+					<button onClick={resetState}>Reset State</button>
 				</div>
 			</div>
 			<div>
-				<p><strong>Without getter</strong></p>
+				<p><strong>Without get and reset</strong></p>
 				<div style={{ gridTemplateRows: "auto auto auto", justifyContent: 'center', display: 'grid', gap: '10px' }}>
 					<Input id="id" name="id" value={state.id} onChange={onChange} />
 					<Input id="name" name="name" value={state.name} onChange={onChange} />
@@ -45,24 +46,25 @@ const UseStateGetter = () => {
 	);
 };
 
-UseStateGetter.displayName = "UseStateGetter";
+UseStateGetReset.displayName = "UseStateGetReset";
 
-export { UseStateGetter };
+export { UseStateGetReset };
 ```
 
 > The component has:
-> - A _useStateGetter_ that receives an object, with three properties _id_, _name_, _eta_, and returns a tuple with _stateG_, _setterG_ and _getter_.
+> - A _useStateGetReset_ that receives an object, with three properties _id_, _name_, _eta_, and returns a tuple with _stateG_, _setterG_, _getter_ and _resetter_.
 > - A _useState_ that receives same object of useStateGetter and returns a tuple with _state_ and _setter_.
 > - Each property of _state_ and _stateG_ is rendered an Input component that renders the input and label fields and the _component's number of renders_.
 > - A _onChangeGetter_ function made with useCallback to handle stateGetter input onChange, reading other values with getter function.
 > - A _onChange_ function made with useCallback to handle stater input onChange, reading other values by state variable.
+> - A button that executes the _resetter_ function on _stateG_.
 > The two functions onChange and onChange Getter update their respective _state_ every time they are executed. Since the _onChange_ function depends on the state, every time this changes it will be reevaluated and this will also trigger the rerender of the input components that have not undergone a change to their _value_ variable. The _onChangeGetter_ doesn't have this behavior: since the _getter_ function isn't reevaluated even if the _stateG_ changes, so the _onChangeGetter_ is never reevaluated and only the input component that has a change in the _value_ variable is rerendered.
 
 
 ## API
 
 ```tsx
-useStateGetter <T>(initialState: T | (() => T)): [T, Dispatch<SetStateAction<T>>, () => T] 
+useStateGetReset <T>(initialState: T | (() => T)): [T, Dispatch<SetStateAction<T>>, () => T, () => void] 
 ```
 
 > ### Params
@@ -73,5 +75,5 @@ value or a function.
 
 > ### Returns
 >
-> - __array__: _[T, Dispatch<SetStateAction<T>>, () => T]_
+> - __array__: _[T, Dispatch<SetStateAction<T>>, () => T, ()=>void]_
 >
diff --git a/apps/react-tools-demo/src/router/Router.tsx b/apps/react-tools-demo/src/router/Router.tsx
@@ -4,7 +4,7 @@ import ComponentLayout from '../layout/ComponentLayout';
 import MarkdownLayout from '../layout/MarkdownLayout';
 import HomeWrapper from '../components/home/HomeWrapper';
 import usePreviousMD from '../markdown/UsePrevious.md?url';
-import useStateGetterMD from '../markdown/UseStateGetter.md?url';
+import useStateGetResetMD from '../markdown/UseStateGetReset.md?url';
 import useStateHistoryMD from '../markdown/UseStateHistory.md?url';
 import useStateHistoryGetterMD from '../markdown/useStateHistoryGetter.md?url';
 import useCallbackCompareMD from '../markdown/UseCallbackCompare.md?url';
@@ -27,7 +27,7 @@ import { UseMemoCompare } from '../components/hooks/useMemoCompare/UseMemoCompar
 import { UseMemoDeepCompare } from '../components/hooks/useMemoDeepCompare/UseMemoDeepCompare';
 import { UseEffectCompare } from '../components/hooks/useEffectCompare/UseEffectCompare';
 import { UseEffectDeepCompare } from '../components/hooks/useEffectDeepCompare/UseEffectDeepCompare';
-import { UseStateGetter } from '../components/hooks/useStateGetter/UseStateGetter';
+import { UseStateGetReset } from '../components/hooks/useStateGetReset/UseStateGetReset';
 
 function Router() {
     const router = createBrowserRouter([
@@ -47,10 +47,10 @@ function Router() {
                     />
 				},
 				{
-					path: "/useStateGetter",
+					path: "/useStateGetReset",
 					element: <ComponentLayout
-						component={<UseStateGetter />}
-						markdown={useStateGetterMD}
+						component={<UseStateGetReset />}
+						markdown={useStateGetResetMD}
 					/>
 				},
 				{
diff --git a/packages/react-tools/README.md b/packages/react-tools/README.md
@@ -1,13 +1,11 @@
 # TODO
 - __STATE__
 	- [x] usePrevious
-	- [x] useStateGetter
-	- [ ] useStateRestore
+	- [x] useStateGetReset
 	- [x] useStateHistory
 	- [x] useStateHistoryGetter
+	- [ ] useReducerGetReset
 	- [ ] useReducerHistory
-	- [ ] useReducerGetter
-	- [ ] useReducerRestore
 	- [ ] useLocalStorage
 	- [ ] useSessionStorage
 	- [ ] useMap
diff --git a/packages/react-tools/src/hooks/useStateGetReset.ts b/packages/react-tools/src/hooks/useStateGetReset.ts
@@ -1,21 +1,26 @@
 import { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from "react"
 
 /**
- * **`useStateGetter`**: custom useState with getter state function.
+ * **`useStateGetReset`**: custom useState with get and reset state functions.
  * @param {T | () => T} initialState - value or a function.
- * @returns {[T, Dispatch<SetStateAction<T>>, () => T]} array
+ * @returns {[T, Dispatch<SetStateAction<T>>, () => T, ()=>void]} array
  */
-export const useStateGetter = <T>(initialState: T | (() => T)): [T, Dispatch<SetStateAction<T>>, () => T] => {
+export const useStateGetReset = <T>(initialState: T | (() => T)): [T, Dispatch<SetStateAction<T>>, () => T, () => void] => {
 	const [state, setState] = useState<T>(initialState);
 	const getterRef = useRef<() => T>(() => state);
+
 	const getter = useCallback(() => getterRef.current(), []);
+
+	const resetter = useCallback(() => setState(initialState), [initialState]);
+
 	useEffect(() => {
 		getterRef.current = () => state
 	});
 
 	return [
 		state,
 		setState,
-		getter
+		getter,
+		resetter
 	];
 }

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`export const COMPONENTS = [`
`2`	`2`	`[`
`3`	`3`	`"usePrevious",`
`4`		`- "useStateGetter",`
	`4`	`+ "useStateGetReset",`
`5`	`5`	`"useStateHistory",`
`6`	`6`	`"useStateHistoryGetter",`
`7`	`7`	`"useMemoCompare",`