useDefault — JavaScript Challenge | FineFrontend

Practice workspaceSign in

JavaScript/useDefaulteasy

00:00

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

JavaScript interview question

useDefault

easy15 min

Implement a React hook that behaves like useState but exposes a default value whenever its raw state is null or undefined. Other falsy values, including false, 0, and an empty string, remain unchanged.

The default is derived during rendering. The returned setter still manages the underlying raw state.

Requirements

Export useDefault(defaultValue, initialValue?) as the default function. Return [value, setValue].
Use React state. Initial state can be omitted, null, undefined, a value, or a lazy zero-argument initializer. It only initializes on mount.
Expose the latest defaultValue only when raw state is null or undefined. Preserve false, 0, empty strings, NaN, and object references.
setValue accepts a direct nullable value or a functional updater and triggers a rerender. Updaters receive raw state, not the displayed fallback.
Batched functional updates must compose correctly and setter identity must stay stable.
Changing defaultValue changes the displayed fallback while state is nullish. It must not overwrite non-nullish state or reset state from a changed initialValue.
Each hook instance maintains independent state. Do not implement this as a mutable standalone object.
Function-valued default data, asynchronous initialization, custom subscriptions, and external stores are outside scope.

Examples

Example 1

Input: useDefault("Anonymous", null)
Output: ["Anonymous", setValue]

Example 2

Input: useDefault(10, 0)
Output: [0, setValue]

Example 3

Input: setValue("Ada"); then setValue(null)
Output: Renders "Ada", then the default on subsequent updates.

useDefault(defaultValue, initialValue?) returns a rendered value and a React-compatible setter for raw nullable state.

What the tests check

Uses default when initial state is omitted
Uses default for initial null
Uses default for initial undefined
Keeps a provided non-nullish initial value
Preserves false rather than using the default
Preserves zero
Preserves an empty string
Preserves NaN
Direct setter updates and rerenders
Setter switches back to default with null
Setter switches back to default with undefined
Supports functional updates
Batched functional updates compose
Updater receives raw null instead of fallback
Tracks changed defaults while raw state is nullish
Changed default does not replace non-nullish state
Setter has a stable identity
Supports lazy initial state without rerunning initializer
Preserves object references
Independent hook instances do not share state

References

React useState Nullish coalescing

React HooksStateFunctionsNullish fallbackGeneric typesLazy initializationFunctional updates

Back

Preparing your workspace…