useStep for React

Steps are one based. The first step is 1 and the last step is the maximum you passed, which matches a label like step 2 of 4. The hook starts at 1. canGoToPrevStep is false on step 1. canGoToNextStep is false when the next number would pass the maximum. A step of 0 is not a valid place to be.

The hook does not look at your fields. Check the form in the click handler, and call goToNextStep only when that check passes. If you call it while canGoToNextStep is false, the step stays put. If the flag is true, the call always moves forward by one. Keep validation next to the button, not inside the hook.

The hook state goes back to 1 whenever the component mounts again. Store the number somewhere that survives the reload, read it after mount, and pass it to setStep. Session storage fits a single tab. The stored number still has to be from 1 through the maximum, because setStep throws when the number is outside that range.

setStep throws an error whose message is Step not valid. The number must be greater than or equal to 1 and less than or equal to the maximum. Anything outside that throws, and the current step stays as it was because setState never runs. Catch the error if a typed number should show a message instead of throwing during the click.

Yes. The maximum is an argument, so the next render uses the new one. Next is disabled when the current step plus one would pass that maximum. The hook does not move you backward on its own. Previous still subtracts one, even when you are already above the new maximum, until you land in range or you call reset.

Yes. Pass a number, or a function that receives the current step and returns the next one. That function is called with the step from this render, not with a later update batched inside the setter. The result still has to sit between 1 and the maximum. A legal value is stored. An illegal one throws and leaves the step unchanged.