My experiences with hot code reloading (loading modified code during development into a web application while retaining the application state) with React. I'm covering approaches for plain React and for Redux. These are the slides for a presentation I gave at the ReactJS Usergroup Munich (October 2015).

1. Hot Reloading with React –
Experiences
Heribert Schütz
webXcerpt Software GmbH
hs@webxcerpt.com, www.webxcerpt.com
ReactJS Usergroup Munich, 2015-10-08

2. Hot Reloading
Development utility:
● Load new code versions, ...
● … but keep your application state.

3. Dan Abramov at React Europe 2015
● „Live React“
● Hot reloading
● Time travel
● Redux
● https://www.youtube.com/watch?v=xsSnOQynTHs

4. Hot Reloading for React
● github.com/gaearon/react-hot-loader
– @gaearon = Dan Abramov
– react-hot-loader is deprecated.
● Instead use
github.com/gaearon/react-transform-boilerplate.
● No Redux needed!

5. Demo
react-transform-boilerplate

6. Make Your React App Hot-
Reloadable in 5 Simple Steps
1. git clone git@github.com:gaearon/
react-transform-boilerplate.git
2. Make your own project configuration look similar.
(You're anyway using webpack and babel, aren't you?)
3. npm start
4. Point your browser to localhost:3000

7. Make Your React App Hot-
Reloadable in 5 Simple Steps
5. Figure out why it doesn't work.
– Does your server process crash or report an error?
– Does your server run, but your app doesn't work?
– Does your app run, but doesn't auto-reload?
(I got stuck here.)
– Does your app auto-reload but loses the state?
– ...

8. A Different Approach:
Persist App State in the Browser
● Store your state upon each update in
localStorage or indexedDB.
● Retrieve that state upon app startup
and use it as the initial state.
● You might want that anyway.
● Or you just enable it for debugging.

9. Persisting App State with Redux
(DIY Version)
const persistMiddleware = key =>
({getState}) => next => action => {
const result = next(action);
localStorage.setItem(
key, JSON.stringify(getState())
);
return result;
};
const getInitialState =
key => localStorage.getItem(key);

10. Persisting App State with Redux
(Toolkit Version)
● Use github.com/gaearon/redux-devtools as a
dev-dependency.
● Use "store enhancer" persistState(...).
● Append „?debug_session=session_key“ to
URL.
● Hit "Commit" in the side bar to actually store.
● Try it with github.com/hcschuetz/15-puzzle.

11. Demo
redux-devtools

12. Summary: My Experience
● React/babel/webpack-based approach
(react-transform-boilerplate)
– Very cool idea
– Does not require Redux
– Was hairy for me
● Redux/localStorage-based approaches
(DIY and redux-devtools)
– Worked reliably
– Easy to understand