Skip to content
Critiq Docs

Search docs

Search documentation pages and rules

performance.ui

Avoid inline functions and bind in JSX props

Creating `function` handlers or `.bind()` calls inside JSX forces new function identities every render and makes memoized children re-render unnecessarily.

#Metadata

Rule ID
ts.react.no-bind-in-jsx-props
Severity
medium
Confidence
0.78
Languages
javascript, typescript
Presets
recommended, strict
Stability
experimental
Applies to
function
Tags
performance, react, rules-catalog, ui

#Why it matters

Stable handler references keep render work predictable and make dependency lists in memoized components meaningful.

#Remediation

Define handlers on the class instance, bind once in the constructor, or use useCallback for function components.

#Repository path

The generated metadata points to critiq-rules/libs/rules/catalog/rules/typescript/ts.react.no-bind-in-jsx-props.rule.yaml.