Fast refresh only works when a file only exports components. Why does this problem occur? And how do we solve it?

Why does it happen?

This error occurs because React Fast Refresh, which powers hot reloading in React, requires that a file only exports React components to function correctly. If a file contains mixed exports, such as React components alongside non-component exports (like contexts, constants, or utility functions), it can confuse Fast Refresh and cause problems during live updates.

React Fast Refresh identifies React components to efficiently reload and retain their state when you make code changes. If the file contains non-component exports, Fast Refresh cannot reliably determine which parts of the code should be treated as components, leading to this ESLint warning.

For example:

import { createContext } from "react";

export const MyContext = createContext(); // Non-component export

export default function MyComponent() {   // Component export
  return <div>My Component</div>;
}

Here, the file mixes the export of a context (MyContext) with a React component (MyComponent). This triggers the error because the file doesn’t exclusively export components.

How to Fix It?

You can solve this issue by moving non-component exports (like contexts) to a separate file. This helps Fast Refresh identify and reload components more effectively.

Solution 1: Separate the Context

Create a separate file for the context and import it where needed.

MyContext.js

import { createContext } from "react";

export const MyContext = createContext(); // Only context here

MyComponent.js

import { useContext } from "react";
import { MyContext } from "./MyContext";

export default function MyComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

Solution 2: Combine Files (If Necessary)

If you must combine them in one file for simplicity, you can suppress the ESLint warning by disabling the rule for that line (though it's not recommended for maintainability).

import { createContext } from "react";

/* eslint-disable-next-line react-refresh/only-export-components */
export const MyContext = createContext();

export default function MyComponent() {
  return <div>My Component</div>;
}

Why Separation Is Preferred

1. Clean Code Structure: Keeping components and contexts in separate files improves readability and maintainability.
2. Better Tooling Support: Fast Refresh and ESLint work as expected, avoiding runtime issues.
3. Scalability: It’s easier to reuse and test components and contexts independently.

By separating concerns, you adhere to React best practices and ensure a smoother development experience.