javascript / intermediate
Snippet
Gruppieren tabellarischer Daten nach Kategorie mittels Array-Reduce in Custom Hooks
Mit Array.prototype.reduce kann eine flache Liste von Objekten in ein strukturiertes Lookup-Dictionary nach dynamischen Schlüsseln transformiert werden. Die Kapselung dieser Datenverarbeitung in einem Custom Hook mit useMemo verhindert unnötige Neuberechnungen bei Re-Rendern.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import { useMemo } from 'react';function useGroupedInventory(items) {return useMemo(() => {return items.reduce((accumulator, currentItem) => {const category = currentItem.category ?? 'Unassigned';if (!accumulator[category]) {accumulator[category] = [];}accumulator[category].push(currentItem);return accumulator;}, {});}, [items]);}export function InventoryList({ items }) {const grouped = useGroupedInventory(items);return (<div>{Object.entries(grouped).map(([category, list]) => (<section key={category}><h3>{category} ({list.length})</h3><ul>{list.map(item => <li key={item.id}>{item.name}</li>)}</ul></section>))}</div>);}
react
Erklärung
1
return items.reduce((accumulator, currentItem) => {
Iteriert über das Ausgangs-Array und sammelt kategorisierte Untergruppen in einem Objekt an.
2
const category = currentItem.category ?? 'Unassigned';
Nutzt Nullish Coalescing als sicheren Fallback, falls ein Kategorie-Schlüssel undefined oder null ist.
3
accumulator[category].push(currentItem);
Fügt das aktuelle Element der entsprechenden Kategorie-Liste im Akkumulator hinzu.
4
Object.entries(grouped).map(([category, list]) => (
Wandelt das gruppierte Objekt in Schlüssel-Wert-Paare zur deklarativen JSX-Ausgabe um.