useBoolean — JavaScript Challenge | FineFrontend

Practice workspaceSign in

JavaScript/useBooleaneasy

00:00

Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.

JavaScript interview question

useBoolean

easy10 min

Implement a real React hook that manages boolean state and exposes convenient methods to enable, disable, toggle, or directly update it. Use the JavaScript or TypeScript variant and keep the interface identical.

Call this hook inside a React component. The supplied tests render React components and inspect the hook again after updates.

Requirements

Export useBoolean(initialValue = false) as the default function. initialValue is a boolean and only initializes state on the first render.
Return { value, setValue, setTrue, setFalse, toggle }, where value is the current boolean state.
setTrue sets true, setFalse sets false, and toggle reverses the latest pending state. Batched calls must compose correctly.
setValue must accept either a boolean or an updater (previous: boolean) => boolean, matching React state setter behavior.
Updates must trigger React rerenders. All four method identities must remain stable between renders.
Each hook instance owns independent state. Changing initialValue after mount must not reset existing state.
Use React state and callbacks. A plain mutable object, external store, or mock hook is not a valid solution. Invalid non-boolean initial values are outside scope.

Examples

Example 1

Input: useBoolean()
Output: value is false on the first render.

Example 2

Input: setTrue(); then rerender
Output: value is true.

Example 3

Input: toggle(); toggle() in one event
Output: The value is unchanged after the two toggles.

Returns a live-on-rerender object with boolean state and four stable utility methods.

What the tests check

Defaults to false
Accepts initial true
Accepts initial false
setTrue updates state and rerenders
setFalse updates state and rerenders
Repeated setTrue remains true
Repeated setFalse remains false
toggle flips false to true
toggle flips true to false
Batched toggles use pending state
setValue accepts a direct boolean
setValue supports updater functions
Mixed batched methods execute in order
Methods have stable identities
Changing initialValue does not reset state
Separate hook instances stay independent

References

React useState React useCallback

React HooksStateFunctionsuseStateuseCallbackFunctional updatesStable callbacks

Back

Preparing your workspace…