I am working on a React/Next.js component that has a large number of independent useState hooks (potentially 50–100). A simplified version looks like this:

const [name, setName] = useState("");
const [count, setCount] = useState(0);
const [active, setActive] = useState(false);

const resetAll = () => {
  setName("");
  setCount(0);
  setActive(false);
};

Manually resetting each state variable works, but it becomes very hard to maintain once the component grows and more states are added.

Question:
Is there a scalable way to reset all useState values in a component without having to call each setter individually?

I’m looking for recommended patterns or best practices in React for resetting complex state structures. Ideally something that works even if the component contains many state variables.

I have considered:

• Using a single object in useState

• Using useReducer

• Forcing a component remount with a key

But I am unsure which approach is idiomatic or if React offers a built-in mechanism for this scenario.

What is the best practice for resetting a large number of useState variables at once?