react-refresh
Advanced tools
Package description
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.
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'));
});
}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 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.
Changelog
0.5.0 (October 16, 2013)
charSet, content, form, httpEquiv, rowSpan, autoCapitalize).rx, ry).getInitialState and getDefaultProps in mixins.React.version.React.isValidClass - Used to determine if a value is a valid component constructor.React.autoBind - This was deprecated in v0.4 and now properly removed.React.unmountAndReleaseReactRootNode to React.unmountComponentAtNode.class to className as part of the transform! This is a breaking change - if you were using class, you must change this to className or your components will be visually broken.Readme
This is an experimental package for hot reloading.
Its API is not as stable as that of React, React Native, or React DOM, and does not follow the common versioning scheme.
Use it at your own risk.
FAQs
React is a JavaScript library for building user interfaces.
The npm package react-refresh receives a total of 12,961,884 weekly downloads. As such, react-refresh popularity was classified as popular.
We found that react-refresh demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.