[ADD] useProxyState hook docs

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useProxyState/UseProxyState.tsx

@@ -2,7 +2,12 @@ import { memo, useCallback } from "react";
 import { useProxyState } from "../../../../../../packages/react-tools/src";
 
 /**
-DEMO
+The component has:
+- a state created with _useProxyStore_, that is a object with _num_ property, a number, and _nested_ property that is a object with _random_ property that is a string.
+- a useCallback function _increment_ that increment _num_ property.
+- a useCallback function _random_ that generate random number, assigned to _nested.random_ property.
+- a _Child1_ component that receives _num_ and _increment_ as props.
+- a _Child2_ component that receives _nested.random_ and _random_ as props.
  */
 const Child1 = memo(({ state, onClick }: { state: number, onClick: ()=>void }) => {
 	return (<>

apps/react-tools-demo/src/markdown/useLocalStorageState.md

@@ -4,15 +4,15 @@ Custom _useState_ hook implementation using _LocalStorage_, with immutable _gett
 ## Usage
 
 ```tsx
-const Child = () => {
+const Child = memo(() => {
 	const [state] = useLocalStorageState<string>({key:"demo", opts: {mode: "read"}});
 	return (<>
 		<h3>Child component 1</h3>
 		<p>State is {state}</p>
 	</>)
-}
+})
 
-const Child2 = () => {
+const Child2 = memo(() => {
 	const [setState] = useLocalStorageState<string>({key:"demo", opts: {mode: "write"}});
 	return (<>
 		<h3>Child component 2</h3>
@@ -23,7 +23,7 @@ const Child2 = () => {
 			<input type="text" />
 		</form>
 	</>)
-}
+})
 
 const UseLocalStorageState = () => {
 	const [, , , remove] = useLocalStorageState({ key: "demo", initialState: "prova" });

apps/react-tools-demo/src/markdown/useProxyState.md

@@ -1,5 +1,5 @@
 # useProxyState
-Hook to handle component state that allows you to use an object for your state and mutating it in a way more idiomatic for JS.
+Hook to handle component state that allows you to use an object for your state and mutating it in a way more idiomatic for JS. __N.B.__
 
 ## Usage
 
@@ -40,7 +40,12 @@ UseProxyState.displayName = "UseProxyState";
 export { UseProxyState };
 ```
 
-> DEMO
+> The component has:
+> - a state created with _useProxyStore_, that is a object with _num_ property, a number, and _nested_ property that is a object with _random_ property that is a string.
+> - a useCallback function _increment_ that increment _num_ property.
+> - a useCallback function _random_ that generate random number, assigned to _nested.random_ property.
+> - a _Child1_ component that receives _num_ and _increment_ as props.
+> - a _Child2_ component that receives _nested.random_ and _random_ as props.
 
 
 ## API

packages/react-tools/README.md

@@ -12,7 +12,7 @@
 	- [x] useMap
 	- [x] useSet
 	- [x] useArray
-	- [-] useProxyState (manca docs)
+	- [x] useProxyState
 	- [ ] useProxyStore
 	- [ ] createProxyStore
 - __EFFECTS__

packages/react-tools/src/hooks/useProxyState.ts

@@ -1,7 +1,7 @@
 import { useReducer, useRef } from "react"
 
 /**
- * __`useProxyState`__: Hook to handle component state that allows you to use an object for your state and mutating it in a way more idiomatic for JS.
+ * __`useProxyState`__: Hook to handle component state that allows you to use an object for your state and mutating it in a way more idiomatic for JS. __N.B.__: not destructure state, otherwise break changes updated.
  * @param {T | () => T} initialState - value or function
  * @param {boolean} [proxyInDepth=false] - if true, it creates proxy for nested object also.
  * @returns {T} state