How to write a hook without consistent-components-exports warning

[zzswang]

There are warnings everywhere, I try to fix them

But I failed with hook,

export const useIllegalRecordList = (req) => {
  const [state, setState] = useState<ApiState>(initApiState);
  const [result, setResult] = useState<Record[]>();

  useEffect(() => {
    setState({ ...state, loading: true });
    some_api()
      .then((res) => {
        setState({ ...state, loading: false, fetchedAt: new Date(), total: Number(res.headers?.['x-total-count']) });
        setResult(res.data);
        return res;
      })
      .catch((error) => {
        setState({ ...state, loading: false, error });
      });
  }, [req]); 

  return [result, state.loading, state];
};

with above code, there are warnings:

Could not Fast Refresh. Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports

Could anyone give me some hint?
Thank you

[zzswang]

Finally, I found

change

useIllegalRecordList

to

UseIllegalRecordList

But it is wired, we usually named a hook start with useXXX.

[ArnaudBarre]

Does the file use .tsx extension?
I think there is something I need to handle better but fore sure using UseIllegalRecordList will lead to broken HMR

[zzswang]

Yes, extension is .tsx, maybe I should use .ts?

[ArnaudBarre]

Yeah .ts should work.

I need to better understand how Fast refresh works for files with just custom hooks to maybe improve HMR for this kind of files