useUpdate

Returns a function that forces a re-render.

Import

import { useUpdate } from '@kamod-ch/hooks'

Live demo

Basic demo

Returns a function that forces a re-render.

Tracked value: 1

import { useState } from 'preact/hooks'
import { useUpdate } from '@kamod-ch/hooks'

export default function UseUpdateDemo() {
  const [renders, setRenders] = useState(1)
  const forceUpdate = useUpdate()

  return (
    <div>
      <p><strong>Tracked value:</strong> {renders}</p>
      <div class="demo-actions">
        <button type="button" onClick={() => setRenders((value) => value + 1)}>Change state</button>
        <button type="button" onClick={forceUpdate}>Force render</button>
      </div>
    </div>
  )
}

API

TypeScript signature

declare const useUpdate: () => (this: unknown) => void;
export default useUpdate;
/

SSR considerations

This hook is safe to import during SSR. If your effect body touches the DOM, keep that work inside the effect callback.

Browser compatibility

Works in any modern browser supported by Preact.