List items should be as inexpensive as possible to render. Minimize hooks, avoid queries, and limit React Context access. Virtualized lists render many items du
This skill ensures list items render as efficiently as possible by minimizing hooks, avoiding data fetching, and limiting React Context usage inside each item. It emphasizes moving data queries and expensive computations to parent components, enabling smoother scrolling and faster rendering, especially in virtualized lists that render many items on demand. The focus is on transforming list items into lightweight, simple components that receive only pre-computed primitives as props.
This skill is essential for front-end engineers and performance marketers who manage high-volume product or content lists in web or mobile apps. It also benefits growth leads working with agencies to optimize e-commerce or marketplace platforms where rendering speed directly affects conversion rates and user retention. SEO and PPC operators relying on fast, interactive lists to showcase dynamic inventory will find this skill improves perceived performance and reduces jank during user interactions.
Practitioners start by auditing list item components to identify hooks, queries, or context consumers that cause unnecessary re-renders or expensive computations. Next, they refactor by moving data fetching to the parent component or a centralized store and pass only the minimal needed props down. Then, they replace React Context usage with more selective Zustand selectors to avoid broad re-rendering when unrelated parts of the state update. Finally, they test scroll performance and smoothness, verifying that list virtualization benefits from the lightweight item components.
How do I handle data updates for list items without queries inside? Data fetching should happen once in the parent, with updated props passed down on changes. Can I still use React Context for shared state in list items? Prefer Zustand selectors to React Context to limit re-renders to relevant item updates. What if I need to compute values per item? Move expensive computations to the parent or memoize at the parent level before passing results as props.
Attach this skill to any Metaflow agent task responsible for rendering or optimizing list components in your UI pipeline. Expect the skill to guide refactoring efforts toward removing queries and hooks from list items and improving virtualization performance. This will help reduce scroll jank and improve user experience on pages with large or dynamic lists. For additional context and examples, consult the internal documentation on UI rendering optimization and state management.
For broader context, see our roundup of claude skills marketing, and read Claude Code workflows for marketing agencies for related setup guidance.