react-doctor/no-render-in-render

Extract to a named component: `const ListItem = ({ item }) => <div>{item.name}</div>`

• Category: Architecture
• Severity: warn
• Source: oxlint-plugin-react-doctor
• Framework: global
• Enabled when: always

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Fires on a JSX expression {callee(...)} or {obj.method(...)} where the callee name matches render followed by an uppercase letter (renderItem, renderHeader, renderRow). The returned JSX is reconciled as part of the parent's output rather than as a stable component, breaking memoization and remounting children every render. Confirm the callee actually returns JSX and is not a helper that merely starts with render.

Fix prompt

Use this once validation confirms the diagnostic is real.

Extract the render function into a real named component (const ListItem = ({ item }) => <div>{item.name}</div>) and use it as JSX: <ListItem item={item} />. React can then reconcile by component identity, preserve internal state across renders, and surface it in the DevTools component tree. See https://react.dev/learn/your-first-component

Related rules

More Architecture rules from the rules reference:

• react-doctor/no-render-prop-children: Replace `renderXxx` props with compound subcomponents (e.g. `<Modal.Header>`) or `children` so the parent doesn't dictate every customization point
• react-doctor/no-set-state: Lift state up or use an external store instead of this.setState.
• react-doctor/no-side-tab-border: Use a subtler accent (box-shadow inset, background gradient, or border-bottom) instead of a thick one-sided border
• react-doctor/no-unescaped-entities: Replace bare ' / " / > / } characters in JSX text with HTML entities.
• react-doctor/no-wide-letter-spacing: Reserve wide tracking (letter-spacing > 0.05em) for short uppercase labels, navigation items, and buttons — not body text