Fast refresh only works when a file only exports components. Move your React context(s) to a separate fileがでた

はじめに

Contextでのstate管理を学習中に警告が出た。

Fast refresh only works when a file only exports components. Move your React context(s) to a separate file

訳：Fast Refresh は、そのファイルが React コンポーネントだけを export している場合にのみ動きます。React Context は別ファイルに移動してください。

原因

実際のコード

import { createContext } from "react";

export const UserContext = createContext({});

export const UserProvider = () => {
  return <UserContext.Provider>{Children}</UserContext.Provider>;
};

contextをexportしてるのが原因みたいです。
同一ファイルにコンポーネント以外をexportするとよくないってことみたいです。

解決

contextを別ファイルに作成した。

import { UserContext } from "./UserContext";

export const UserProvider = (props) => {
  const { children } = props;
  return <UserContext.Provider>{children}</UserContext.Provider>;
};

import { createContext } from "react";

export const UserContext = createContext({});

無事に解決！！

参考

ありがとうございます。