Inline Context Value (ARCH3306)

Key typescript.react.inline-context-value · Severity warning · Category performance

React: flags a context Provider whose value is an object or array literal built inline - every consumer re-renders whenever the provider does.

Incorrect

<ThemeContext.Provider value={{ theme, setTheme }}>

Correct

const value = useMemo(() => ({ theme, setTheme }), [theme]);

<ThemeContext.Provider value={value}>