How to update atoms state in recoil js outside components react

In React Recoil, it is common to update atom state within components using Recoil's useRecoilState or useSetRecoilState hooks. However, in certain scenarios, you might need to update Recoil state outside components, such as within an asynchronous function or a plain JavaScript module. To achieve this, you can leverage Recoil's RecoilRoot and atom API to establish global state and utilize the useRecoilCallback hook to create an update function callable from outside components.

Below are the steps to update atom state outside components:

1. Define an atom:

jsx
import { atom } from 'recoil';

export const myAtom = atom({
  key: 'myAtom',
  default: 0, // initial value
});

1. Provide a RecoilRoot in the component tree:

jsx
import React from 'react';
import { RecoilRoot } from 'recoil';
import App from './App';

function RootComponent() {
  return (
    <RecoilRoot>
      <App />
    </RecoilRoot>
  );
}

1. Use useRecoilCallback to create a callback function callable from outside components:

jsx
import { useRecoilCallback } from 'recoil';
import { myAtom } from './store';

function useUpdateAtom() {
  const updateAtom = useRecoilCallback(({ set }) => (newValue) => {
    set(myAtom, newValue);
  }, []);

  return updateAtom;
}

1. Call useUpdateAtom within the component and expose the returned function to the outside:

jsx
import React from 'react';
import { useUpdateAtom } from './useUpdateAtom';

function MyComponent() {
  const updateAtomFromOutside = useUpdateAtom();

  // You can now pass the updateAtomFromOutside function to external modules or register it as a global method
  // For example, bind it to the window object or pass it to modules requiring update operations

  return (
    <div>
      <button onClick={() => updateAtomFromOutside(10)}>Update Atom</button>
    </div>
  );
}

1. Use the function outside the component to update the atom state:

javascript
// Assuming you have obtained the updateAtomFromOutside function in the appropriate context
updateAtomFromOutside(20); // This updates the value of myAtom to 20

With this approach, you can easily update Recoil state outside components while maintaining compatibility with the overall architecture of the Recoil state management library. This is particularly useful for handling logic not directly tied to the React component lifecycle, such as timers or network request callbacks.