Feedback wanted: New Hot Reloading
See original GitHub issueI’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)
- Replace
react-scripts
dependency withwonky-scripts@0.0.5
- Keep
scripts
the same - Delete
node_modules/.cache
- Run Yarn/npm
- 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
anduseCallback
caches are dropped on every edit (otherwise there wouldn’t be a way to edit them 😅). If this breaks your code, consideruseRef
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!
Issue Analytics
- State:
- Created 4 years ago
- Reactions:243
- Comments:44 (12 by maintainers)
It works perfectly especially with useEffect 😉 Many Thanks 👏🏻
Oh yeah — for now you’d have to move context definition into a separate file (and import it from the component). That should work.