Skip to content

Rule · Smoothness

React component re-renders with unchanged props

smooth/react-wasted-renderswarnvoid smoothupdated

Why it matters

A component that re-renders when every prop is equal by value, with no state or context change, produced the same output for nothing. Usually the props are rebuilt each render (inline objects, arrays, arrow functions) or a parent re-renders the whole subtree. The check compares values, so treat each hit as a memo candidate to confirm, not proof.

How to fix it

Read changedByReference in the evidence: hoist constant objects out of render, wrap handlers in useCallback and derived values in useMemo, then memo() the component. Better still, move the state that changes down to the component that needs it, or enable the React Compiler.

Example

tsx
const rowStyle = { height: 60 };            // hoisted: same object every render
const onSelect = useCallback(() => pick(i), [i]);
<Row style={rowStyle} onSelect={onSelect} />  // with Row = memo(Row)

References

void smooth reports 18 rules in this category. How the page feels after it loads: dropped frames during a scripted scroll, long animation frames, INP of real clicks, shifts after input, animated layout properties, idle rAF loops and reduced-motion handling.