Collection Helpers

Utilinent has two primitives for repeated rendering, but they solve different problems.

• For is for existing collections.
• Repeat is for a fixed positive count.

For

For is the “map with a fallback” primitive.

import { For } from '@ilokesto/utilinent';

function ProductList({ products }: { products: Array<{ id: string; name: string }> | null }) {
  return (
    <For each={products} fallback={<li>No products found</li>}>
      {(item) => <li key={item.id}>{item.name}</li>}
    </For>
  );
}

Important behavior:

• each accepts an array, null, or undefined.
• fallback renders when the collection is empty or missing.
• children receives (item, index).

For does not invent key management for you. You still own stable keys inside the rendered child.

Repeat

Repeat is for count-based rendering.

import { Repeat } from '@ilokesto/utilinent';

function SkeletonRows() {
  return (
    <Repeat times={3} fallback={<p>Nothing to show</p>}>
      {(index) => <div key={index}>Loading row {index + 1}</div>}
    </Repeat>
  );
}

Implementation detail that matters: Repeat only renders when times is a positive integer. Otherwise it falls back.

Like For, it is proxy-backed, so forms like Repeat.ul are available.

Choosing between them

• Use For when the source is already a collection.
• Use Repeat when the source is just a count.

If repetition is not the problem and visibility or lazy loading is, continue with Async & Visibility.