react-refresh

What is react-refresh?

The react-refresh package is used to enable fast refresh capabilities in React applications. Fast Refresh is a feature that allows you to get instant feedback for changes in your React components. With Fast Refresh enabled, most edits should be visible within a second, without losing component state. This leads to a more productive development experience by allowing developers to see changes almost instantly.

What are react-refresh's main functionalities?

Hot Reloading

This code enables hot reloading for a React component. When changes are made to the 'App' component, it will be reloaded without refreshing the entire page, preserving the application state.

if (module.hot) {
  module.hot.accept('./App', () => {
    const NextApp = require('./App').default;
    ReactDOM.render(<NextApp />, document.getElementById('root'));
  });
}

Other packages similar to react-refresh

react-hot-loader

React Hot Loader is a plugin that allows React components to be live reloaded without the loss of state. It is similar to react-refresh but was more commonly used before the introduction of Fast Refresh. React Hot Loader is now considered largely obsolete in favor of react-refresh, which is more robust and has better support from the React team.

webpack-hot-middleware

Webpack Hot Middleware is a middleware for webpack that allows hot reloading of modules in development mode. It is similar to react-refresh in that it helps with live reloading of changes. However, it is more generic and not specific to React. It requires more manual setup compared to react-refresh, which is more integrated with React's development environment.

README

react-refresh

This package implements the wiring necessary to integrate Fast Refresh into bundlers. Fast Refresh is a feature that lets you edit React components in a running application without losing their state. It is similar to an old feature known as "hot reloading", but Fast Refresh is more reliable and officially supported by React.

This package is primarily aimed at developers of bundler plugins. If you’re working on one, here is a rough guide for Fast Refresh integration using this package.

Changelog

0.10.0 (March 21, 2014)

React Core

New Features

• Added warnings to help migrate towards descriptors
• Made it possible to server render without React-related markup (data-reactid, data-react-checksum). This DOM will not be mountable by React. Read the docs for React.renderComponentToStaticMarkup
• Added support for more attributes:
  • srcSet for <img> to specify images at different pixel ratios
  • textAnchor for SVG

Bug Fixes

• Ensure all void elements don’t insert a closing tag into the markup.
• Ensure className={false} behaves consistently
• Ensure this.refs is defined, even if no refs are specified.

Addons

• update function to deal with immutable data. Read the docs

react-tools

• Added an option argument to transform function. The only option supported is harmony, which behaves the same as jsx --harmony on the command line. This uses the ES6 transforms from jstransform.