Avoid inline objects in renderItem: don't create new objects (or style objects) inside renderItem to pass as props; pass the item or primitives so memoization works. See list-performance-inline-objects rule.
- Forbidden:
user={{ id: item.id, name: item.name, ... }}or inlinestyle={{ ... }}in renderItem. - Required: Pass
itemdirectly or pass primitive props; use stable style references or derive inside the child.
work.tsx creates a new object { id: item.id, name: item.name, avatar: item.avatar } inside renderItem. Refactor to pass the item directly (or primitives) instead.
- Run tests:
pnpm test:exercise:list-performance-inline-objectsorpnpm test exercises/13-list-performance-inline-objects - Edit
work.tsxto pass the item (or primitives) without creating an inline object in renderItem. - Run tests again until they pass.
- Compare with
solution.tsx.
pnpm run exercise:list-performance-inline-objects:reset