useRerender

Hook to force a render.

Demo

INFO

The component has:

• a button that execute the update

The component displays the current time. When button is clicked, it rerenders and current time is updated.

Loading demo…

Show source code

import { useRerender } from "../../../.."

const UseRerender = () => {
	const update = useRerender();

	return (<>
		<button type="button" onClick={update}>Update</button>
		<br />
		<br />
		{new Date().toLocaleTimeString()}
	</>);
}

UseRerender.displayName = "UseRerender";

export { UseRerender };

Types

UseRerenderResult

• @template T - The type of the internal counter value. Only relevant when withValue is true — ignored in the DispatchWithoutAction overload.

Return value of useRerender, which varies based on the withValue argument.

withValue	Return type	Description
false / undefined	DispatchWithoutAction	A bare dispatch function with no state value exposed.
true	[T, DispatchWithoutAction]	A tuple of the render counter value and the dispatch function.

export type UseRerenderResult<T> =
	| DispatchWithoutAction
	| [
		/**
		 * The current render counter value. Incremented each time the dispatch
		 * function is called, allowing consumers to track how many forced re-renders
		 * have occurred or to use the value as a reactive dependency.
		 */
		T,

		/**
		 * A stable dispatch function that increments the internal counter and
		 * triggers a re-render of the component when called.
		 */
		DispatchWithoutAction
	];