prefresh

Prefresh is a tool that speeds up development of Preact applications by automatically reloading only the code you just changed, without losing your app's current state. Instead of refreshing the entire page and starting over, your changes appear instantly while your app keeps running.

Think of it like editing a document in real-time: normally when you save a file, you'd have to close and reopen the whole document. Prefresh is like having the document update in place, with your cursor and scroll position still right where you left them. For Preact developers, this means if you're testing a form with filled-in values, you can tweak the styling or logic and see the result without re-typing everything.

The project works by monitoring your code files as you edit them and sending just the changed component back to your running app, rather than reloading the whole page. It plugs into popular build tools like Webpack, Vite, Next.js, and others—so it works alongside the tools you're already using. The core package handles the reloading logic, and separate packages make it compatible with different build systems.

To use Prefresh effectively, you follow a few naming conventions that help it identify what's a component and what's not. Components need clear names starting with a capital letter, custom hooks should start with "use," and shared hooks should be kept in separate files from your components. These practices aren't unique to Prefresh—they're standard patterns in the Preact ecosystem—but they're essential for the hot-reloading to work smoothly. Without them, Prefresh can't reliably track what changed and what needs updating.

This is marked as an experimental package, so while it works, it's still being refined and may change. It's most useful for developers actively building Preact apps who want a faster feedback loop during development.