For

Component to optimize the rendering of a list of elements without need to specify a key value for all elements, and other options.

Demo

INFO

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.

Loading demo…

Show source code

import { memo, useEffect, useState } from "react";
import { For } from "../../..";

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, setArr] = useState([
		{ id: "1", firstName: "firstName1", lastName: "lastName1" },
		{ id: "2", firstName: "firstName2", lastName: "lastName2" },
		{ id: "3", firstName: "firstName3", lastName: "lastName3" }
	]);

	useEffect(() => {
		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"
		>
			{(item, _, key) => <Paragraph index={key as string} firstName={item.firstName} lastName={item.lastName} />}
		</For>
	</>
}

Types

ForProps

• @template T - The type of the elements in the source array of.
• @template S - The mapped element type after applying map. Defaults to T when map is omitted.

Props accepted by the For component

Property	Type	Required	Description
of	Array<T>	✓	The source array to iterate over. Each element is passed to children after optional filter, sort, and map transformations are applied.
elementKey	(T \| S) extends object ? keyof (T \| S) \| ((item: T \| S) => Key) : Key \| ((item: T \| S) => Key)		Determines the React key assigned to each rendered element: - When T (or S) is an object — a key of that object or a function (item) =&gt; Key deriving a key from the item. - When T (or S) is a primitive — a direct Key value or a function (item) =&gt; Key. When omitted, the element's index is used as the key.
children	(item: T\|S, index: number, key: Key) => ReactNode	✓	A render function called for each element in the (optionally transformed) array. Receives the current item, its index, and the computed React key.
fallback	ReactNode		Content rendered when the source array of is empty (after any filter has been applied). Accepts any valid React node.
filter	Parameters<Array<T>["filter"]>[0]		An optional filter predicate applied to the source array before rendering, following the same signature as Array.prototype.filter. Elements for which the predicate returns false are excluded.
sort	true \| Parameters<Array<T>["sort"]>[0]		An optional sort configuration applied after filtering: - true — Uses the default sort order. - comparator function — A custom (a, b) =&gt; number comparator, following the same signature as Array.prototype.sort.
map	(...args: Parameters<Parameters<Array<T>["map"]>[0]>) => S		An optional mapping function applied after filtering and sorting, transforming each element from T to S before passing it to children. When omitted, elements are passed as-is (S equals T).