useDefault
A custom React hook that manages a stateful value with a default fallback.
useDefault is a helpful custom React hook designed to manage stateful values with a default fallback when the value is set to null or undefined.
This hook is particularly useful when you need to maintain state values that might be reset or cleared, but should fall back to a predefined default rather than being null or undefined.
Current value
10
10
Initial: 10 | Default: 0 | Custom: 5
Note: When setting to null or undefined, the hook automatically falls back to the default value (0).
API
▸ useDefault(initialValue, defaultValue): [T, (newValue: Nullable<T>) => void]
| Name | Type | Required | Description |
|---|---|---|---|
| initialValue | T | Yes | The initial value of the state. |
| defaultValue | T | Yes | The fallback value when state is null or undefined. |
Returns [value, setValue]:
value(T): The current state value.setValue(function): A function that updates the state value. If called withnullorundefined, it will use the default value instead.
Hook
/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState } from 'react'
/**
* A type alias representing a value that can be of type T, null, or undefined.
*/
type Nullable<T> = T | null | undefined
/**
* A custom hook that manages a stateful value with a default fallback.
* @template T - The type of the value being managed.
* @param {T} initialValue - The initial value of the state.
* @param {T} defaultValue - The default value to fall back to when the state is null or undefined.
* @returns {[T, (newValue: Nullable<T>) => void]} - A tuple containing the current value and a setter function.
*/
export const useDefault = <T = any>(
initialValue: T,
defaultValue: T
): [T, (newValue: Nullable<T>) => void] => {
const [value, setValue] = useState<Nullable<T>>(initialValue)
/**
* Sets the state to a new value or falls back to the default value if the new value is null or undefined.
* @param {Nullable<T>} newValue - The new value to set, or null/undefined to reset to the default value.
*/
const setValueWithDefault = (newValue: Nullable<T>) => {
setValue(newValue ?? defaultValue)
}
return [value, setValueWithDefault] as [T, (newValue: Nullable<T>) => void]
}