Nested RecoilRoot

[GauravRecoil]

If you want to use Nested RecoilRoot, & need to keep in sync specific child recoil atom with Parent Recoil, below way can help

Parent =  () => {
return (<RecoilRoot>
  <App/>
</RecoilRoot>);
};

App = ()=> {
const atomValue = useRecoilValue(atom);

return (
<RecoilRoot>
   <StateSync parentvalue={atomValue}/>
    <Children elments/>
</RecoilRoot>);
}

// StateSync will update child atom value whenever parent atom value changes
StateSync = ({parentValue})=> {
const setChildAtomValue = useSetRecoilState(atom);
useEffect(()=> {
 setChildAtomValue (parentValue);
},[parentValue]);
 return <React.Fragment/>
}