Local State vs Global State in React & Next.js — When to Use What (and How to Avoid Unnecessary Re-renders)

🧠 Introduction

State management in React and Next.js isn’t about picking a single “best” approach — it’s about using the right tool for the right job. Poor state placement leads to performance issues, messy code, and unnecessary re-renders.

In this post, we’ll break down:

• When to use local state
• When to use global state
• How to avoid unnecessary re-renders
• A simple decision guide you can follow in real projects

✅ When to Use Local State (useState)

Local state belongs in a component when:

• The data is needed only in that component
• It does not affect other parts of the UI
• It is short-lived or UI-specific

Example 1 — Form input state

js
const [email, setEmail] = useState("");

This should stay local because only this form needs it.

Example 2 — Modal visibility

js
const [isOpen, setIsOpen] = useState(false);

No need to store this globally unless multiple components control the same modal.

Rule of thumb: If lifting the state to a parent or global store doesn’t provide any benefit — keep it local.

🌍 When to Use Global State (Redux, Zustand, Recoil, Context API)

Use global state when:

• Multiple components need the same data
• State must persist across Next.js pages
• Data is shared across unrelated components

Example 1 — User authentication

js
const user = useStore(state => state.user);

Used in Navbar, Dashboard, Profile, and API calls — perfect for global state.

Example 2 — Theme (dark/light mode)

js
const theme = useStore(state => state.theme);

Accessed across the entire app.

Example 3 — Shopping cart

js
const cartItems = useStore(state => state.cart);

Used in Navbar, Checkout, and Product pages.

Rule of thumb: If three or more components need the same data — make it global.

⚡ How to Avoid Unnecessary Re-renders (Performance Tips)

1. Avoid overusing Context for frequently changing state

❌ Bad:

js
const App = () => (
  <AppContext.Provider value={{ count, setCount }}>

This makes every consumer re-render when count changes.

✅ Better: Use Zustand or Redux for high-frequency updates.

2. Use memoization where needed

js
const MemoizedComponent = React.memo(Component);

Prevents re-rendering when props haven’t changed.

3. Split state properly

❌ Bad:

js
const [state, setState] = useState({ name: "", age: 0 });

✅ Better:

js
const [name, setName] = useState("");
const [age, setAge] = useState(0);

This prevents re-renders when only one value changes.

4. Avoid passing new object references

❌ Bad:

js
<Component config={{ theme: "dark" }} />

✅ Better:

js
const config = useMemo(() => ({ theme: "dark" }), []);
<Component config={config} />

🧭 Simple Decision Guide

• Component-only UI behavior → Local state
• Shared across pages/components → Global state
• Rapidly changing data → Avoid Context, prefer Zustand/Redux
• Rarely changing data → Context is fine