How to handle updating atom with hot reload?

[myou11]

Hi there,

I am using Zedux with React Native and so far it's great! I am having trouble with getting my atom to update after I make changes to it and my app hot reloads. Sometimes I am updating one of my exported API functions and the update does not work unless I close the app and re-open it. If I add new state to the internal atom store, it is undefined until i close the app and re-open it.

I think the issue here is due to the atom already existing and since I updated the atom after it was already created, the atom is already using the original atom template.

I feel like you must have encountered this hot reloading issue in your apps, so I was wondering what are your recommended solutions?

[bowheart]

Hey there! That is a great question @myou11. HMR/Fast Refresh support is always tricky since it depends so much on the build system. TMK, all the atomic libs struggle with hot reloading in React Native.

Zedux and Recoil atoms are especially tricky since they can have side effects tied to them. It isn't always straightforward whether an atom should be completely force-destroyed and recreated or if only the atom's state should update during HMR. Additionally, sometimes you want the state to persist, other times you want it completely reset. No solution is perfect for every HMR situation.

However, since the problem is amplified in RN (closing/reopening an app is much more annoying than refreshing a browser page), the best HMR approach for you is probably to force-destroy atoms when they update.

Ecosystem-Level Approach

In theory, a single HMR accept call at the top level of your app should be enough to accomplish this for the entire application. I believe in RN, you'd use webpack's HMR API. Something like this:

export default function App() {
  const ecosystem = useMemo(() => createEcosystem({ id: 'root' }), [])
  
  if (module.hot) {
    module.hot.accept(() => {
      ecosystem.reset()
    })
  }

  return (
    <EcosystemProvider ecosystem={ecosystem}>
      <Routes />
    </EcosystemProvider>
  )
}

Or it's probably better to move the .accept() call outside the component:

import { getEcosystem } from '@zedux/react'

if (module.hot) {
  module.hot.accept(() => {
    getEcosystem('root')?.reset()
  })
}

This approach destroys every atom/selector in the ecosystem, triggers rerenders across your component tree, and recreates the entire atom graph during those rerenders - presumably using any hot updated atom templates.

I'd never tried this global update approach, but I just ran it in a simple test repo and it looks like it works. Still, I can't be sure it'll work perfectly in every project.

Atom-Level Approach

What I have done before is add an HMR code snippet to a specific atom when working with it. In Vite, my code looks like this:

const self = injectSelf()

if (import.meta.hot) {
  import.meta.hot.accept(newModule => {
    self.destroy(true)
  })
}

Full example:

export const testAtom = atom('test', () => {
  const store = injectStore(0)
  const self = injectSelf()

  if (import.meta.hot) {
    import.meta.hot.accept(newModule => {
      self.template = newModule.testAtom // this mutation may be necessary when using selectors in the current version of Zedux
      self.destroy(true)
    })
  }

  return store
})

Now any changes to testAtom will completely destroy and recreate the atom instance. For webpack, just change import.meta.hot to module.hot.

Summary

If the global ecosystem.reset() approach works for you, I'd definitely recommend that, especially for a RN app. If it doesn't work, consider adding HMR snippets to individual atoms.

In practice, I find I spend more of my frontend dev time working on CSS and React component code. Once my state is in place, I don't change atoms much. At that point, I love the Dev X of atom state persisting across HMR updates. So if you do add HMR snippets, you may consider removing them at some point, once your state is well defined.

[myou11]

Thank you for the detailed response! Unfortunately, neither of these ways seems to be working for me. I tried both the global ecosystem.reset() approach and the HMR snippet in my atom. In both cases, the callback being passed to module.hot.accept is not running. I added a log inside the accept and I'm not seeing it being printed when I change my atom:

if (module.hot !== undefined) {
  module.hot.accept(() => {
    console.log("inside accept");
    ecosystem.reset();
  });
}

if (module.hot !== undefined) {
  module.hot.accept(() => {
    console.log("inside accept");
    self.destroy(true);
  });
}

Based on the initial HMR React Native blog post from 2016, it seems like this module.hot.accept should work, but not sure if something has changed with the way that works since then.

When you say you tried the global update approach in a test repo, was that a React project or React Native?

[bowheart]

All my experience is with React. The test repo I tried ecosystem.reset() in was a Vite template web app. I've only worked with RN on small side projects and it's been a while, but I pulled up the docs, and in theory I'm pretty sure the webpack APIs should work. I'll have to spin up an actual RN project and see what I can find.

[myou11]

Alright thanks! For my app, this is only a minor inconvenience since closing the app and re-opening is fast, so I don't mind. If you do find a way to reset the state though, I'd be happy to try again