use-hot-module-reload

use-hot-module-reload

React hook that triggers a callback after hot-module reloading has been performed (for any module, not just the one it was used in).

Works with modern versions of Webpack and Vite. Other bundlers may be added if they expose a way to listen for updates.

Installation

npm install --save use-hot-module-reload

Usage

import {useState, useCallback} from 'react'
import {useHotModuleReload} from 'use-hot-module-reload'

export function MyComponent() {
  const [lastHMRed, setLastHMRed] = useState('')
  const updateHMRTime = useCallback(() => setLastHMRed(new Date().toISOString()), [])
  useHotModuleReload(updateHMRTime)

  return <div>{lastHMRed && `Last hot module reload at: ${lastHMRed}`}</div>
}

License

MIT © Espen Hovlandsdal

Changelog

2.0.0 (2024-03-22)

⚠ BREAKING CHANGES

• Changed the way ESM/CJS is handled, defaulting to ESM mode with type: 'module' and using the .js extension by default. CommonJS imports are now done through a .cjs extension implicitly. While this shouldn't be breaking, getting bundlers and environments conditional loading "just right" is a complex and sometimes brittle process. If you run into issues, please let us know.

Bug Fixes

• correct hasHMR check in ESM mode (92a69e2)