Recoil prevent UI blocking

I'm using recoil and I have a heavy/time consuming operation which blocks the UI until it is done. In redux, we use saga for side effects to prevent UI blocking. How this can be achieved here?

Currently, I have this state:

export const clientsState = atom({
  key: 'clients',

  default: {},
  effects: [
    ({ setSelf, onSet }) => {
      onSet((seed) => {
        for (let i = 0; i < 100; i++) {
          console.log(i);
          // Time consuming operation
          const clients = createClients(seed as string);

          setSelf(clients);
        }
      });
    },
  ],
});

and it takes a good amount of time to complete and unblock the UI.

Blog

Recoil prevent UI blocking

Andon Mitev

Join Our Newsletter. No Spam, Only the good stuff.

Related