I started a new blog with my brother over at http://goldsaucer.co.uk that will mostly deal with technical topics related to our soon to be announced project. This post is from that blog, and you can find the original here: Simplest way to hot reload your React Components with RequireJS.

For our current project Nations Online I’m using a React-based GUI on top of a WebGL 3D scene. Since the 3D scene is rather complex I don’t want to reload the page every time to see the changes of the React components.

For this reason I was looking into hot reloading of React components, or JavaScript in general. Unfortunately, all of the solutions I looked into didn’t work on my system (amokjs), or they required me to change my module loader / were complicated (react-hot-loader), or they required me to make changes in the way I write my components and involved changes to the server (react hot loading with requirejs).

So what’s the simplest way to hot reload your React components with RequireJS? We can just use require.undef to remove modules from the cache and then require them again!

My GUI has one stateless root component called Root which has one property for the current game state. Since the state is kept outside of the React components entirely, I do not have to worry about that and can simply reload components whenever they change on the filesystem.

So the simplest way to achieve my goal just consists of these steps:

1. Unload the used GUI modules:
   guiModuleNames.forEach(m => require.undef(m))
2. Reload the root component:
   require([“gui/root”], Root => { … })
3. Rerender the GUI:
   ReactDOM.render(<Root game={game}/>, document.querySelector(“#root”))

That’s it. I wrapped this into one small function that I can call whenever I don’t want to reload the page:

function refreshGui(game) {
    var guiModuleNames = ["gui/root", "gui/panels", ...]
    guiModuleNames.forEach(m => require.undef(m))
    require(["gui/root"], Root => ReactDOM.render(<Root game={game}/>, document.querySelector("#root"))
}

Now each time I changed one of the components’ code, I can just call the refresh function rather than having to reload the entire page and – voilà – I can see my changes immediately. It doesn’t get simpler than that!

To make it more comfortable you can bind it to the focus event of the window, or even construct your own automatic trigger based on a file watcher and websockets as described by [@the1mills](https://medium.com/@the1mills/hot-reloading-with-react-requirejs-7b2aa6cb06e1).