react-hot-loader

What is react-hot-loader?

react-hot-loader is a tool that allows React components to be live reloaded without losing their state. This is particularly useful during development as it speeds up the feedback loop by allowing developers to see changes in real-time without refreshing the entire application.

What are react-hot-loader's main functionalities?

Hot Module Replacement

This feature allows you to wrap your root component with the `hot` function from react-hot-loader. This enables Hot Module Replacement (HMR) for the component, meaning that changes to the component will be applied in real-time without a full reload.

import { hot } from 'react-hot-loader/root';
import App from './App';

const HotApp = hot(App);

export default HotApp;

Preserve Component State

By using react-hot-loader, the state of your React components is preserved even when the component code is updated. This is particularly useful for maintaining the current state of your application during development.

import { hot } from 'react-hot-loader/root';
import App from './App';

const HotApp = hot(App);

export default HotApp;

Error Handling

react-hot-loader provides better error handling during development. When an error occurs, it does not break the entire application but instead shows the error in the console, allowing you to fix it without losing the application state.

import { hot } from 'react-hot-loader/root';
import App from './App';

const HotApp = hot(App);

export default HotApp;

Other packages similar to react-hot-loader

react-refresh

react-refresh is a more modern alternative to react-hot-loader, developed by the React team. It provides a more integrated and reliable hot reloading experience by leveraging React's new Fast Refresh feature. It is recommended for use with Create React App and other modern React setups.

webpack-hot-middleware

webpack-hot-middleware is a middleware for Webpack that enables hot module replacement (HMR) for any JavaScript application. While it is not specific to React, it can be used in conjunction with React to achieve similar hot reloading capabilities.

react-hot-toast

react-hot-toast is a lightweight package for showing toast notifications in React applications. While it does not provide hot reloading, it is often used in development environments to display real-time notifications, which can complement the hot reloading experience.

README

react-hot-loader

This is a highly experimental proof of concept of React live code editing.

It marries React with Webpack Hot Module Replacement by wrapping React.createClass calls in a custom function that updates components' prototypes when the changes come in.

Inspired by react-proxy-loader.

Installation

npm install react-hot-loader

Usage

Documentation: Using loaders

var Button = require('react-hot!./button');

When a component is imported that way, changes to its code should be applied without unmounting it or losing its state.

You can also specify loader in config before jsx-loader:

    module: {
        loaders: [
            { test: /\.jsx$/, loaders: ['react-hot', 'jsx-loader'] }
        ]
    }

This will enable hot reload for all JSX files.

Options

• notify: Loader can use desktop Notification API to show notifications when a module has been reloaded, or if it loads with an error. By default, this feature is disabled because it doesn't work well with webpack-dev-server iframe mode used in the example. If you don't use webpack-dev-server's iframe mode, you might want to enable notifications. Valid values are none (default), errors and all. If notify is errors or all, module load errors won't cause page refresh.

Running Example

npm install
cd example
webpack-dev-server --hot
open http://localhost:8080/webpack-dev-server/bundle

Then edit example/a.jsx and example/b.jsx.
Your changes should be displayed live, without unmounting components or destroying their state.

Implementation Notes

Currently, it keeps a list of mounted instances and updates their prototypes when an update comes in.

A better approach may be to make monkeypatch createClass to return a proxy object as suggested by Pete Hunt:

The problem is that references to component descriptors could be stored in any number of places. What we could do is wrap all components in "proxy" components which look up the "real" component in some mapping

License

MIT (http://www.opensource.org/licenses/mit-license.php)