[recoil-sync] InitFromProps, how to update atoms when props change?

[FezVrasta]

Looking at the InitFromProps example I noticed that if the provided properties change, the atoms will not reflect them. I think I should use the listen property to handle that case, but how should I listen for prop changes from that callback?

function InitFromProps({children, ...props}) {
  return (
    <RecoilSync
      storeKey="init-from-props"
      read={itemKey => props[itemKey]}
    >
      {children}
    </RecoilSync>
  );
}

Here's a repro:

https://codesandbox.io/s/interesting-surf-n7iish?file=/src/App.tsx

[drarmstr]

Yeah, listen can be used in the store to initiate changes based on prop changes. You could use useEffect() to detect prop changes and then that effect callback can call the update functions provided by the listen callback. You'll have to save the update callbacks so they can be accessed from the effect callback. But, if all you want to do is update an atom value when props change then it would be easier to just use a setter from useSetRecoilState() in the useEffect() which monitors for prop changes.

[FezVrasta]

I thought recoil-sync would do something smarter than a useEffect 🤔 Is it just that?

[drarmstr]

recoil-sync actually uses useRecoilSnapshot() to handle batched changes and non 1:1 mappings between store items and atoms. useEffect() may be simpler for just this particular use-case, though.