Using Recoil.js transactions

recoil-transactions.tsx

interface BulkItemCreator {
  create(items: Array<{ id: string; name: string }>): void;
}

export function useBulkCreateExample() {
  return useRecoilCallback(
    ({ transact_UNSTABLE }) =>
      (callback: (creator: BulkItemCreator) => void) => {
        transact_UNSTABLE(({ set, get }) => {
          callback({
            create(items) {
              // all of these set() calls happen in one atomic operation
              for (const item of items) {
                set(itemAtomFamily(item.id), item);
              }
              // you can use get() here, but only for atoms, not selectors
            },
          });
        });
      }
  );
}

// Simple example of using a transaction
function SomeComponent() {
  const bulkCreate = useBulkCreateExample();
  const handleClick = React.useCallback(() => {
    bulkCreate((creator) => {
      creator.create([
        { id: '123', name: 'Bob' },
        { id: '234', name: 'Susan' },
      ]);
    });
  }, []);

  return <button onClick={handleClick}>Create</button>;
}