Why this matters
Passing dynamic values (like object literals) directly to React Context causes unnecessary re-renders and performance issues. Use memoization to ensure values remain stable.
Identify cases where React Context values are being reassigned dynamically. Unstable context values trigger unnecessary re-renders. Use memoization to stabilize them.
Passing dynamic values (like object literals) directly to React Context causes unnecessary re-renders and performance issues. Use memoization to ensure values remain stable.
Side-by-side examples engineers can pattern-match during review.
function Component() {
return (
<SomeContext.Provider value={{foo: 'bar'}}> { /* Noncompliant: value is an object literal */ }
<SomeComponent />
</SomeContext.Provider>
);
}function Component() {
const obj = useMemo(() => ({foo: 'bar'}), []); // value is cached by useMemo
return (
<SomeContext.Provider value={obj}> { /* Compliant */ }
<SomeComponent />
</SomeContext.Provider>
);
}function Component() {
return (
<SomeContext.Provider value={{foo: 'bar'}}> { /* Noncompliant: value is an object literal */ }
<SomeComponent />
</SomeContext.Provider>
);
}function Component() {
const obj = useMemo(() => ({foo: 'bar'}), []); // value is cached by useMemo
return (
<SomeContext.Provider value={obj}> { /* Compliant */ }
<SomeComponent />
</SomeContext.Provider>
);
}From 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.