Feedback wanted: New Hot Reloading

I’m working on hot reloading again. Got a very raw alpha version working. It preserves state but only for function components. Works with Hooks.

You can try the alpha version (not production ready, super experimental):

Trying in a New Project (NOT FOR PRODUCTION)

npx create-react-app demo --scripts-version wonky-scripts

Trying in an Existing Project (NOT FOR PRODUCTION)

1. Replace react-scripts dependency with wonky-scripts@0.0.5
2. Keep scripts the same
3. Delete node_modules/.cache
4. Run Yarn/npm
5. Start the project and try editing your React components

What It Looks Like

It’s expected that it will work something like on this gif: https://twitter.com/dan_abramov/status/1139876172903395329

Constraints (Library Authors, Read This!)

If your Hook or Component doesn’t work with hot reload, keep in mind that:

• useMemo and useCallback caches are dropped on every edit (otherwise there wouldn’t be a way to edit them 😅). If this breaks your code, consider useRef which gives you a semantics guarantee about not getting re-created. Like here. Usually there’s a way to restructure the code to be more resilient.
• Same goes for useEffect. During hot reload, dependency array will be ignored, and even effects with [] dependencies will re-run. If this breaks your component or Hook, there’s likely a way to restructure it to fix this. As a bonus, this will make it easier for you to later add more dependencies to it if needed.
• However, state and refs get preserved between edits. (As an escape hatch for quickly editing mounting animations and similar, note that users can add // @hot reset to the file they’re editing, and this will force state reset. This is not a final syntax but we’ll document some way to do it.)

If you need help getting your library working, please post in this thread.

Known issues

• Hot reload gets stuck if you save a file without changing it
• Editing a file that declares Context doesn’t preserve state, currently you need to move Context definition to another module and import it
• Errors after hot reload don’t always get reported (e.g. try importing a non-existent component and then adding a file without exports)
• Lint warnings are confusingly duplicated on save
• Some libraries don’t work with it (please post which ones in this thread)

Please Share Feedback!

In this thread I’d love to hear first feedback from the brave folks who are willing to try this version on their projects. (Remember: it’s NOT usable in production, it’s just an experiment. This is why it has a funny name.)

Does it work for you? Can you make a gif of how it feels in your app, assuming it’s not a secret?

Thanks!

[le-du6]

It works perfectly especially with useEffect 😉 Many Thanks 👏🏻

[gaearon]

Oh yeah — for now you’d have to move context definition into a separate file (and import it from the component). That should work.