eslint-plugin-react-refresh

Validate that your components can safely be updated with fast refresh.

Limitations

⚠️ To avoid false positive, this plugin is only applied on tsx & jsx files ⚠️

Like the implementation for vite, the plugin rely on naming conventions (i.e. use PascalCase for components, camelCase for util functions). This is why there are some limitations:

• export * are not supported and will be reported as an error
• Anonymous function are not supported (i.e export default function() {})
• Class components are not supported
• Full uppercase export would be considered as an error. It can be disabled locally when it's effectively a React component:

// eslint-disable-next-line react-refresh/only-export-components
export const CMS = () => <></>;

I may publish a rule base on type information from typescript-eslint to improve some limitations and catch some naming convention issues (like non-component function starting with an uppercase).

Installation

npm i -D eslint-plugin-react-refresh

Usage

{
  "plugins": ["react-refresh"],
  "rules": {
    "react-refresh/only-export-components": "warn"
  }
}

Fail

export const foo = () => {};
export const Bar = () => <></>;

export const CONSTANT = 3;
export const Foo = () => <></>;

export default function () {}

export * from "./foo";

const Tab = () => {};
export const tabs = [<Tab />, <Tab />];

const App = () => {};
createRoot(document.getElementById("root")).render(<App />);

Pass

export default function Foo() {
  return <></>;
}

const foo = () => {};
export const Bar = () => <></>;

import { App } from "./App";
createRoot(document.getElementById("root")).render(<App />);