Hot Reloading + create-react-app
--
Without pressing that big shiny red eject button
One of the caveats to using create-react-app is that you don’t get true hot reloading via Webpack. The page will reload if you make edits, not the application itself. This is usually fine for when you’re starting out, but once you want to get down to the nitty gritty it can be a pain.
Do not despair. You can get almost true hot reloading without having to yarn eject, by hooking into Webpack’s module.hot in your index.js.
By replacing the contents of your app with each edit, you no longer need to wait on a page refresh. What a time to be alive!
If you’re looking to avoid hot reloading on certain elements (for example, Three.js doesn’t love WebGLRenderer being fired up too many times) you can initialise them in your index.js, and then pass them as a prop to your application. Do I have an example? Why yes, I do. Here’s one I prepared earlier.
And there you have it. Speedy hot reloading with create-react-app. You can see it in action on React Three Playground, if you’re looking for a proper example.
PS: You’re doing a great job. Even Beyoncé says so.
