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!

[ZachHaber]

I've figured out a workaround in a single file - instead of having to split into two separate files. It does add an extra react component in the way, but I've confirmed that HMR seems work fine with this setup.

// Confirm.tsx
import { createCallable, ReactCall } from 'react-call'
export interface ConfirmProps{
  // props here
}
export const Confirm = ({call,...props}: ReactCall.Props<ConfirmProps,boolean|null,{}>)=>{
// component here
return <div></div>
}
const callable = createCallable(((props)=><Confirm {...props} />) as typeof Confirm);
Confirm.call = callable.call;
Confirm.Root = callable.Root;
// Needed only if you are using any of the advanced features like updates, etc.
// Mainly for future-proofing so each individual piece of the callable doesn't have
// to be set independently
Confirm.callable = callable;