Hot Reload Issues

[ZachHaber]

Vite's hot reload/fast refresh/HMR/whatever term it uses doesn't work with the callable setup. I get the warning: Could not Fast Refresh. Learn more at https://github.com/vitejs/vite-plugin-react-swc#consistent-components-exports. This causes the callable to vanish every time the module is invalidated (any time the file is saved), which causes me to have to re-perform actions to open it to see my changes - which is not the best developer experience.

The best workaround I've found so far is to separate out the component and the callable into two separate files. The downside to that is that it ends up with an extra file that is basically a one-liner.
I don't know if this is something that is fixable, but if it's not, there should be a note about HMR (hot module reload) in the readme.

---

Example of the two file approach mentioned. Note that Confirm.tsx still can't be HMRed, but you can edit the ConfirmBase.tsx which will work without issue.

// ConfirmBase.tsx
import { ReactCall } from 'react-call'
export interface ConfirmProps{
  // props here
}
export const ConfirmBase: ReactCall.UserComponent<ConfirmProps,boolean|null,{}> = ({call,...props})=>{
// component here
return <div></div>
}
// Confirm.tsx
import { createCallable } from 'react-call';
export const Confirm = createCallable(ConfirmBase);

[desko27]

Hi @ZachHaber! Thanks for opening an issue for this. I agree this is a DX pain point.

I'd like to fix it but I haven't had time to review the HMR mechanism properly. Any help is more than welcome.

Also, if we're unable to fix it soon I'll include a note in the readme as suggested.

Thanks a lot!