Prevent Unnecessary Re-renders from Unstable References

'use client'
 
function Dashboard({ userId }: { userId: string }) {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Click: {count}</button>
 
      {/* ❌ Every click re-renders ALL of these children */}
      <UserProfile
        style={{ padding: 16, margin: 8 }}      // New object every render
        options={['edit', 'delete', 'share']}     // New array every render
        onAction={(action) => handleAction(action)} // New function every render
      />
      <ActivityFeed filters={{ userId, limit: 20 }} />  // New object every render
      <Sidebar config={{ theme: 'dark', collapsed: false }} />
    </div>
  )
}

// ❌ Context value creates a new object every render → all consumers re-render
function AppProvider({ children }) {
  const [user, setUser] = useState(null)
  const [theme, setTheme] = useState('light')
 
  return (
    <AppContext.Provider value={{ user, setUser, theme, setTheme }}>
      {children}
    </AppContext.Provider>
  )
}

'use client'
 
// ✅ Move static values outside the component
const profileStyle = { padding: 16, margin: 8 }
const profileOptions = ['edit', 'delete', 'share'] as const
const sidebarConfig = { theme: 'dark', collapsed: false }
 
function Dashboard({ userId }: { userId: string }) {
  const [count, setCount] = useState(0)
 
  // ✅ Memoize dynamic objects that depend on props/state
  const feedFilters = useMemo(() => ({ userId, limit: 20 }), [userId])
 
  // ✅ Stabilize callbacks
  const handleAction = useCallback((action: string) => {
    // ... handle action
  }, [])
 
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Click: {count}</button>
      <UserProfile
        style={profileStyle}
        options={profileOptions}
        onAction={handleAction}
      />
      <ActivityFeed filters={feedFilters} />
      <Sidebar config={sidebarConfig} />
    </div>
  )
}

// ✅ Memoize context value to prevent unnecessary consumer re-renders
function AppProvider({ children }) {
  const [user, setUser] = useState(null)
  const [theme, setTheme] = useState('light')
 
  const value = useMemo(
    () => ({ user, setUser, theme, setTheme }),
    [user, theme]
  )
 
  return (
    <AppContext.Provider value={value}>
      {children}
    </AppContext.Provider>
  )
}

// ✅ Split contexts by update frequency — state that changes together stays together
const UserContext = createContext<{ user: User | null; setUser: SetState }>()
const ThemeContext = createContext<{ theme: string; setTheme: SetState }>()
 
// Now changing theme doesn't re-render components that only use user

# Find inline objects/arrays as JSX props
grep -rn "style={{" src/ --include="*.tsx"
grep -rn "={\\[" src/ --include="*.tsx" | grep -v "import\|const\|let\|var"
# Find context providers with inline value objects
grep -rn "Provider value={{" src/ --include="*.tsx"