useStateWithReset — JavaScript Challenge

Implement a real React hook similar to useState, with an additional reset function that restores the initial value. useStateWithReset(initialState) returns [state, setState, reset]. Keep normal React state updates and add a convenient way to start over. JavaScript and TypeScript versions must behave identically.

Requirements

Export useStateWithReset as both a named and default export. Call it at the top level of a React component or another hook.

Accept an initial value or a pure lazy initializer function, and return [state, setState, reset]. Pass undefined explicitly when no initial value is needed.

setState must behave like React useState: accept a replacement value or a functional updater that receives the latest pending state. Multiple queued updates must compose correctly.

reset() restores the resolved initial value from the first mounted render. Later initial arguments do not replace this reset target. State changes appear on the next React render.

A lazy initializer runs only during mounting, subject to React Strict Mode checks. Resetting or rerendering must not rerun it.

Preserve falsy values, objects, arrays, and function-valued state. Store functions using a wrapper initializer. Reset must not invoke function-valued state.

Update objects and arrays immutably. Reset restores the original reference; deep cloning and protection against mutations made by the caller are outside this exercise.

Keep the setter and reset identities stable for a mounted hook. Previously saved callbacks must remain usable, and separate hook instances must be independent.

Respect update order when reset and setState are queued in one event. An updater queued after reset must receive the initial value.

The TypeScript version must infer the state type and return a typed tuple with Dispatch<SetStateAction<T>> and a no-argument reset returning void. Memoizing the tuple is not required.

Examples

Example 1

Input: useStateWithReset(0); setState(5); reset();
Output: State starts at 0, becomes 5 after an update, and returns to 0 after reset.

Example 2

Input: useStateWithReset(() => ({ name: "Ada" })); update the name; reset();
Output: Reset restores the original object reference without calling the initializer again.

Example 3

Input: useStateWithReset(5); setState(100); then queue reset() and setState(previous => previous + 1) together
Output: The next rendered state is 6.

useStateWithReset(initialState) returns [state, setState, reset]. initialState may be a value or a pure initializer. reset restores the resolved initial state of this mounted instance.