How to Fix useState Not Working in Next.js: Simple Solutions

In Next.js, useState may not work if used outside a React component or in server-side code. Always use useState inside functional components that run on the client side to fix this issue.

Why This Happens

The main reason useState does not work in Next.js is because it is used outside of a React functional component or in server-side code where React hooks are not supported. Hooks like useState must be called only inside React components during rendering on the client side.

javascript

import { useState } from 'react';

// This is NOT a React component
function getCount() {
  const [count, setCount] = useState(0); // ❌ Incorrect usage
  return count;
}

export default function Page() {
  const count = getCount();
  return <div>{count}</div>;
}

Output

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

The Fix

To fix this, ensure useState is called directly inside a React functional component, not in regular functions or outside components. This way, React can manage the state properly during rendering.

javascript

import { useState } from 'react';

export default function Page() {
  const [count, setCount] = useState(0); // ✅ Correct usage

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

Output

A page showing 'Count: 0' and a button labeled 'Increase'. Clicking the button increments the count number.

Prevention

Always use React hooks like useState inside functional components. Avoid calling hooks in regular functions, conditionals, or loops. Use linting tools like eslint-plugin-react-hooks to catch incorrect hook usage early.

• Keep hooks at the top level of components.
• Do not call hooks inside nested functions or outside components.
• Test components in client-side environments.

Related Errors

Similar errors include:

• Invalid hook call: Happens when hooks are used outside components.
• Hydration mismatch: Occurs if state differs between server and client.
• useState not updating UI: Usually caused by mutating state directly instead of using setter functions.

Key Takeaways

Use useState only inside React functional components in Next.js.

Never call hooks in regular functions or outside component bodies.

Use ESLint with react-hooks plugin to catch hook misuse early.

Ensure state updates use setter functions to trigger UI changes.

Avoid using hooks in server-side code or outside client rendering.