0_reactState.js

const [notifications, setNotifications] = React.useState([]);

const addNotification = () => {
  setNotifications(mountNotification);

  setTimeout(startAddAnimation, 0);

  setTimeout(deleteNotification, autoremoveTimeout);
};

const deleteNotification = id => () => {
  setNotifications(startRemoveAnimation);

  setTimeout(removeNotification, animationDuration);
};

1_effector.js

const $notifications = createStore({
  list: [],
  autoremoveTimeout: 10_000,
  animationDuration: 400,
})

// Add Flow
sample({
  source: $notifications,
  clock: actions.addNotification,
  fn: mountNotification,
  target: $notifications,
});

sample({
  source: $notifications,
  clock: delay({ source: actions.addNotification, timeout: 0 }),
  fn: startAddAnimation,
  target: $notifications,
});

sample({
  source: $notifications,
  clock: delay({ source: actions.addNotification, timeout: $notifications.map(el => el.autoremoveTimeout) }),
  fn: startRemoveAnimation,
  target: $notifications,
});

sample({
  source: $notifications,
  clock: delay({
    source: actions.addNotification,
    timeout: $notifications.map(el => el.autoremoveTimeout + el.animationDuration),
  }),
  fn: removeNotification,
  target: $notifications,
});

// Remove Flow
sample({
  source: $notifications,
  clock: actions.removeNotification,
  fn: startRemoveAnimation,
  target: $notifications,
});

sample({
  source: $notifications,
  clock: delay({ source: actions.removeNotification, timeout: $notifications.map(el => el.animationDuration) }),
  fn: removeNotification,
  target: $notifications,
});