React Refresh
An ESLint plugin that validates React components can safely update with Fast Refresh (hot reloading).
What is React Refresh?
eslint-plugin-react-refresh is an ESLint plugin that validates whether React components are structured correctly to work with Fast Refresh (hot reloading). It ensures that only valid React components are exported from files, preventing runtime errors during development when components are updated. The plugin helps maintain compatibility with modern bundlers like Vite and Next.js.
React developers using Fast Refresh in projects with Vite, Next.js, or similar bundlers, especially those working on larger codebases where hot reloading reliability is critical.
Developers choose this plugin to catch Fast Refresh issues early in development, avoiding cryptic runtime errors. It provides framework-specific configurations and customizable rules to fit different project needs without false positives.
Overview
Validate that your components can safely be updated with Fast Refresh
Use Cases
Best For
- Ensuring Fast Refresh works reliably in Vite React projects
- Preventing hot reloading errors in Next.js applications
- Linting React codebases to enforce component-only exports
- Configuring ESLint for modern React development workflows
- Avoiding anonymous function exports that break HMR
- Validating component structures in TypeScript React projects
Not Ideal For
- Projects not using Fast Refresh or hot reloading (e.g., legacy bundlers or disabled HMR)
- React codebases with many class components or anonymous function exports
- Applications that rely heavily on `export *` syntax for module aggregation
- Teams working with `.js` files for JSX without consistent React imports
Pros & Cons
Pros
Enforces that only React components are exported, preventing runtime errors during hot reloads, as shown in the examples that flag non-component exports.
Provides pre-configured rules for Vite and Next.js, such as allowing constant exports for Vite or specific exports like fetchCache for Next.js, reducing setup effort.
Offers options like extraHOCs and allowExportNames to adapt to different project setups, letting teams whitelist HOCs or framework-specific exports without false positives.
Flags problematic patterns like anonymous functions and export * early in development, helping avoid cryptic HMR failures that can waste debugging time.
Cons
Does not support class components, which excludes legacy or certain React codebases, as admitted in the README under limitations.
Relies on PascalCase for components, causing errors with all-uppercase exports or unconventional naming, which can be restrictive for some coding styles.
Prohibits common patterns like export * and anonymous functions, forcing refactoring in projects that use these for module organization or concise code.
Frequently Asked Questions
Related Projects
React HooksThe library for web and native user interfaces.
MeteorMeteor, the JavaScript App Platform
ReactReact-specific linting rules for ESLint
VueJSOfficial ESLint plugin for Vue.js
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.