Preserving State during HMR Errors
I'm using multiple providers like:
export function InstanceProvider(props: any) {
const [instance, setInstance] = createSignal();
onMount(async () => {
const newInstance = await start();
setInstance(newInstance);
});
return <InstanceContext.Provider value={instance}>{props.children}</InstanceContext.Provider>;
}
HMR works well, but when I get an unrelated error on some other component like
Cannot read properties of undefined (reading 'charAt')and click "Clear errors and retry", the InstanceProvider state is lost. Is there a recommended way to preserve state and avoid remounts of specific components?
1 Reply
I've tried https://github.com/solidjs/solid-refresh#refresh-granular without success, tho I might be missing something? would this be the correct approach?
This works for providers but I think I would need to do it manually for each, and it won't work for components.
let preservedInstance: any;
export function InstanceProvider(props: any) {
const [instance, setInstance] = createSignal(preservedInstance);
onMount(async () => {
if(instance()) {
console.log("Instance restored", instance())
return;
}
console.log("Starting new Instance");
const newInstance = await start();
preservedInstance = newInstance;
setInstance(newInstance);
});
return <InstanceContext.Provider value={instance}>{props.children}</InstanceContext.Provider>;
}
"solid-js": "^1.7.8",
"solid-start": "^0.2.30",
"solid-start-netlify": "^0.2.30",