[FIX] For component

Author: nDriaDev

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

@@ -4,36 +4,46 @@ Component to optimize the rendering of a list of elements without need to specif
 ## Usage
 
 ```tsx
+const Paragraph = memo(({ index, firstName, lastName }: { index: string, firstName: string, lastName: string }) => {
+	console.log("P render");
+	return <p>{index}: {firstName} - {lastName}</p>
+})
+
 export default function ForComponent() {
-	const arr = useRef([
-		{ id: "1", firstName: "Jhon", lastName: "Doe" },
-		{ id: "2", firstName: "Jona", lastName: "Doe" },
-		{ id: "3", firstName: "Jhonney", lastName: "Doe" }
+	const [arr, setArr] = useState([
+		{ id: "1", firstName: "firstName1", lastName: "lastName1" },
+		{ id: "2", firstName: "firstName2", lastName: "lastName2" },
+		{ id: "3", firstName: "firstName3", lastName: "lastName3" }
 	]);
-	const [, update] = useReducer(t => !t, false);
-
-	const body = useCallback<(item: { id: string, firstName: string, lastName: string }, index: number|string) => JSX.Element>((item, index) => {
-		console.log("body render");
-		return <p>{index}: {item.firstName} - {item.lastName}</p>
-	}, []);
 
 	useEffect(() => {
-		const id = setInterval(() => update(), 1000);
-		return () => clearInterval(id)
+		const id2 = setInterval(() => {
+			setArr(a => {
+				const added = Math.random() > 0.5;
+				console.log(added ? "added" : "removed");
+				const id = Math.max(...[0, ...a.map(el => Number(el.id))])+1
+				return added
+					? [{ id: "" + id, firstName: "firstName" + id, lastName: "lastName" + id }, ...a]
+					: a.filter((_, index) => index !== 0)
+			})
+		}, 3500);
+		return () => {
+			clearInterval(id2)
+		}
 	}, [])
 
 	return <>
 		<For
+			of={arr}
 			elementKey="id"
-			of={arr.current}
 		>
-			{body}
+			{(item, _, key) => <Paragraph index={key as string} firstName={item.firstName} lastName={item.lastName} />}
 		</For>
 	</>
 }
 ```
 
-> The component uses _For_ component to render a p element returned from _body_ memoized function for all objects assigned to _arr_  ref variable. It also specified __id__ property as _elementKey_ prop. A setInverval is executed on mount that on every second force component to rerender. If you open dev tools, you can see that _body_ function logs only three times at first, one for each element of _arr_ variable
+> The component has a _arr_ array state variable of objects that every 3 seconds added or removed an element. It uses _For_ component to iterate _arr_ and to render the memoized _Paragraph_ component, specifing __id__ element property as _elementKey_ prop. _Paragraph_ component logs in console a message before return the tag p. If you open dev tools, you can see that message is displayed only three times at first, and once when an element is added to _arr_ variable.
 
 
 ## API
@@ -48,18 +58,18 @@ For = memo(<T extends unknown>({ of, children, filter, map, sort, elementKey, fa
 component properties object.
 > - __props.of__: _T[]_  
 array of elements.
-> - __props.elementKey?__: _T extends object ? keyof T | ((item: T) => string | number) : string | number | ((item: T) => string | number)_  
-if the elements are objects, this prop is a key of the array elements or a function with one parameter which type is the type of the elements in __of__ prop and returns a string or a number, otherwise this prop can be the function described before, a string or a number.
-> - __props.children__: _(item: T, index: T extends object ? number | T[keyof T] | string : number) => ReactNode_  
-it's a function that takes the current item as first argument and optionally a second argument that is number if element of array aren't object, otherwise it can be a number or the value of the element key specified in the _elementKey_ prop.
+> - __props.elementKey?__: _T extends object ? keyof T | ((item: T) => Key) : Key | ((item: T) => Key)_  
+if the elements are objects, this prop can be a key of the elements in __of__ prop, or a function with one parameter which type is the type of the elements in __of__ prop and returns a __React.Key__ type, otherwise this prop can be the function described before or a __React.Key__. If it isn't specified, element index in __of__ props will be used as key.
+> - __props.children__: _(item: T, index: number, key: Key) => ReactNode_  
+it's a function that takes the current item as first argument and optionally a second argument that is the index of element in _of_ prop and a third element that is the key specified in the _elementKey_ prop.
 > - __props.fallback?__: _ReactNode_  
 optional element to render when _of_ prop is an empty array.
 > - __props.filter?__: _<S extends T>(val: T, index: number, arr: T[]) => val is S_  
 callback executed to filter _of_ elements.
 > - __props.map?__: _<U extends T>(val: T, index: number, arr: T[]) => U_  
 callback executed to map _of_ elements.
-> - __props.sort?__: _(a: T, b: T) => number_  
-callback executed to sort _of_ elements.
+> - __props.sort?__: _true | ((a: T, b: T) => number)_  
+callback executed to sort _of_ elements or __`true`__ to use native sort.
 >
 
 

apps/react-tools-demo/src/pages/components/for/For.tsx

@@ -1,33 +1,43 @@
-import { useCallback, useEffect, useReducer, useRef } from "react";
+import { memo, useEffect, useState } from "react";
 import { For } from "../../../../../../packages/react-tools-lib/src";
 
 /**
-The component uses _For_ component to render a p element returned from _body_ memoized function for all objects assigned to _arr_  ref variable. It also specified __id__ property as _elementKey_ prop. A setInverval is executed on mount that on every second force component to rerender. If you open dev tools, you can see that _body_ function logs only three times at first, one for each element of _arr_ variable
+The component has a _arr_ array state variable of objects that every 3 seconds added or removed an element. It uses _For_ component to iterate _arr_ and to render the memoized _Paragraph_ component, specifing __id__ element property as _elementKey_ prop. _Paragraph_ component logs in console a message before return the tag p. If you open dev tools, you can see that message is displayed only three times at first, and once when an element is added to _arr_ variable.
  */
+const Paragraph = memo(({ index, firstName, lastName }: { index: string, firstName: string, lastName: string }) => {
+	console.log("P render");
+	return <p>{index}: {firstName} - {lastName}</p>
+})
+
 export default function ForComponent() {
-	const arr = useRef([
-		{ id: "1", firstName: "Jhon", lastName: "Doe" },
-		{ id: "2", firstName: "Jona", lastName: "Doe" },
-		{ id: "3", firstName: "Jhonney", lastName: "Doe" }
+	const [arr, setArr] = useState([
+		{ id: "1", firstName: "firstName1", lastName: "lastName1" },
+		{ id: "2", firstName: "firstName2", lastName: "lastName2" },
+		{ id: "3", firstName: "firstName3", lastName: "lastName3" }
 	]);
-	const [, update] = useReducer(t => !t, false);
-
-	const body = useCallback<(item: { id: string, firstName: string, lastName: string }, index: number|string) => JSX.Element>((item, index) => {
-		console.log("body render");
-		return <p>{index}: {item.firstName} - {item.lastName}</p>
-	}, []);
 
 	useEffect(() => {
-		const id = setInterval(() => update(), 1000);
-		return () => clearInterval(id)
+		const id2 = setInterval(() => {
+			setArr(a => {
+				const added = Math.random() > 0.5;
+				console.log(added ? "added" : "removed");
+				const id = Math.max(...[0, ...a.map(el => Number(el.id))])+1
+				return added
+					? [{ id: "" + id, firstName: "firstName" + id, lastName: "lastName" + id }, ...a]
+					: a.filter((_, index) => index !== 0)
+			})
+		}, 3500);
+		return () => {
+			clearInterval(id2)
+		}
 	}, [])
 
 	return <>
 		<For
+			of={arr}
 			elementKey="id"
-			of={arr.current}
 		>
-			{body}
+			{(item, _, key) => <Paragraph index={key as string} firstName={item.firstName} lastName={item.lastName} />}
 		</For>
 	</>
 }