Building Dynamic Web Applications with Next.js/

...

/

Local vs. Global State Management

Local vs. Global State Management

Learn about local and global state management in Next.js.

We'll cover the following...

Let’s take a closer look at the two different types of states that Next.js encompasses.

Local state management

When talking about local state management, we’re referring to the application state that is component-scoped. We can summarize that concept with an elementary Counter component:

Press + to interact
import React, { useState } from "react";
function Counter({ initialCount = 0 }) {
  const [count, setCount] = useState(initialCount);
  return (
    <div>
      <b>Count is: {count}</b><br />
      <button onClick={() => setCount(count + 1)}>
        Increment +
      </button>
      <button onClick={() => setCount(count - 1)}>
        Decrement -
      </button>
    </div>
  )
}
export default Counter;

When we click the “Increment” button, we’ll add 1 to the current count value. Vice-versa, we’ll subtract 1 from that value when we click the “Decrement” button; nothing special!

But while it’s easy for a parent component to pass an initialCount value as a prop for the Counter element, it can be way more challenging to do the opposite: passing the current count value to the parent component. There are many cases where we need to manage just the local state, and the React useState hook can be ...

Ask