Rendering lists:
1function TodoList({ todos }) {2 return (3 <ul>4 {todos.map(todo => (5 <li key={todo.id}>{todo.text}</li>6 ))}7 </ul>8 );9}
Key rules: Must be unique among siblings, should be stable, use data IDs not index.
filter/map chaining:
1{todos.filter(t => !t.completed).map(t => <Todo key={t.id} {...t} />)}
Performance: Virtualize for 1000+ items, memoize list items.