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.11.0 (July 17, 2014)
getDefaultProps() is now called once per class and shared across all instancesMyComponent() now returns a descriptor, not an instanceReact.isValidComponent and React.PropTypes.component validate descriptors, not component instancespropType validators should return an Error instead of logging directlynulle.key and e.getModifierState() propertiesonBeforeInput eventReact.Children.count has been added as a helper for counting the number of childrene.view properly normalizedcoords, crossOrigin, download, hrefLang, mediaGroup, muted, scrolling, shape, srcSet, start, useMap)className on a mounted SVG component now works correctlymask and tspandx, dy, fillOpacity, fontFamily, fontSize, markerEnd, markerMid, markerStart, opacity, patternContentUnits, patternUnits, preserveAspectRatio, strokeDasharray, strokeOpacityWebkit, ms, Moz, O) are now handled properlyimg event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same data-reactid"$apply command to transform valuesdist/.envify is properly listed as a dependency instead of a peer dependency<Components.Checkbox />harmony features available in the command line with <script type="text/jsx;harmony=true">--harmony option--source-map-inline option to the jsx executabletransformWithDetails API which gives access to the raw sourcemap dataReadme
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.
FAQs
React is a JavaScript library for building user interfaces.
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.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.