Why this matters
Using .bind() or arrow functions in JSX props creates new functions on every render, which negatively impacts performance and can trigger unnecessary re-renders. Use useCallback or predefine functions instead.
Detect the use of .bind() or inline arrow functions inside JSX props. These create new functions on every render, impacting performance. Suggest moving function definitions outside the render method.
Using .bind() or arrow functions in JSX props creates new functions on every render, which negatively impacts performance and can trigger unnecessary re-renders. Use useCallback or predefine functions instead.
Side-by-side examples engineers can pattern-match during review.
<Component onClick={this._handleClick.bind(this)}></Component>
<Component onClick={() => handleClick()}></Component>function handleClick() {
//...
}
<Component onClick={handleClick}></Component<Component onClick={this._handleClick.bind(this)}></Component>
<Component onClick={() => handleClick()}></Component>function handleClick() {
//...
}
<Component onClick={handleClick}></ComponentFrom the same buckets as this rule.
All static JS/CSS/font/image files MUST use content-hashed filenames (e.g., app.9c1a7b.js) and be served with "Cache-Control: public, max-age=31536000, immutable". HTML and other non-fingerprinted documents MUST be served with "Cache-Control: no-cache" (or equivalent) to enable conditional revalidation.