Preventing unnecessary FlatList item re-renders

WHAT THIS TESTS Whether you can apply React's memoization correctly so that updating one item or the parent does not re-render every complex row, which is a common cause of feed jank.

A GOOD ANSWER COVERS Extract the row into a dedicated component and wrap it in React.memo so it re-renders only when its own props change by shallow comparison. Make every prop a stable reference: define event handlers with useCallback in the parent so they keep identity across renders, and avoid passing freshly created objects, arrays, or inline arrow functions, since each render produces a new reference that breaks memo. Keep the renderItem function itself referentially stable, ideally defined outside or memoized, and have it pass the item plus the few primitive flags the row needs rather than spreading large parent state. When props legitimately include objects, supply a custom comparator to React.memo that checks only the fields that affect rendering. Combine this with stable keyExtractor so identity is preserved.

COMMON WRONG ANSWERS Wrapping the row in React.memo but still passing inline arrow functions or new objects, so the memo never short-circuits. Defining renderItem inline as a closure that changes every render. Passing the entire parent state object into every row. Over-memoizing trivial rows where the comparison costs more than the render. Forgetting that changing extraData intentionally re-renders rows.

LIKELY FOLLOW-UPS Why does an inline onPress handler defeat React.memo, and how does useCallback fix it? When is a custom memo comparator worth the cost? How do you pass per-item callbacks without recreating them, for example by passing the id and a stable parent handler?

ONE CONCRETE EXAMPLE A feed row is a FeedCard wrapped in React.memo. The parent defines onLike with useCallback so its identity is stable, and the row calls onLike(item.id) rather than receiving a per-item closure. renderItem is a stable function passing item and a primitive isLiked flag. When the user likes one post, only that FeedCard re-renders because its isLiked prop changed; the other cards receive identical prop references and React.memo skips them, keeping the feed smooth.