useUpdate

Returns an update() function that triggers a re-render when called. Useful as an escape hatch when you need to force a refresh without changing state, such as after external mutations or imperative API calls.

Usage

import { useUpdate } from '@ts-hooks-kit/core'

function Example() {
  const result = useUpdate()
  return <pre>{JSON.stringify(result, null, 2)}</pre>
}

API

function useUpdate(): () => void

Custom hook that returns a function to force a component re-render.

Returns

A function that, when called, will force the component to re-render.

Hook

import { useCallback, useState } from 'react'

/**
 * Custom hook that returns a function to force a component re-render.
 * @returns {() => void} A function that, when called, will force the component to re-render.
 * @public
 * @see [Documentation](https://usehooks-ts.com/react-hook/use-update)
 * @example
 * ```tsx
 * const update = useUpdate();
 *
 * return (
 *   <div>
 *     <p>Current time: {Date.now()}</p>
 *     <button onClick={update}>Update</button>
 *   </div>
 * );
 * ```
 */
export function useUpdate(): () => void {
  const [, setTick] = useState(0)

  const update = useCallback(() => {
    setTick(tick => tick + 1)
  }, [])

  return update
}