Update atom/selector data independent of view instances

[rumax]

Assuming there is some session management implementation (or any other similar functionality like auto refresh, etc.)

const SESSION_TIMEOUT = 10000;

export const isSessionActive = atom<boolean>({
  key: 'isSessionActive',
  default: false,
});

export const remainingTime = atom<number>({
  key: 'remainingTime',
  default: SESSION_TIMEOUT,
});

it is easy to activate the session in a View component:

const [isActive, setActive] = useRecoilState(isSessionActive);
setActive(true);

what is the way to set use intervals for remainingTime, so that it is possible to render 10 sec, 9 sec, etc. till 0 and when 0, set isSessionActive to false. Because even with selectors:

export const remainingTimeAttempt2 = selector<number>({
  key: 'remainingTime',
  get: ({ get }) => {
    const time: number = get(remainingTimeAttempt2);
    if (time > 0) {
      setTimeout(() => {
        // Trigger Update, but there is not set available for 'get'
      });
    }
    return time;
  },
});

it seems to be not possible, there is not "set" parameter in get implementation and getCallback doesn't provide that functionality.

Put that logic into View will solve the problem, but the View component might not exist at some point of time (can be different screen, etc.) and make View more complicated. And I'm looking for something like:

export const remainingTime = selector<number>({
  key: 'remainingTime',
  get: ({ get, set }) => {
    const time: number = get(remainingTime);
    if (time > 0) {
      setTimeout(() => {
        const nextTime = time - 1000
        set(remainingTime, nextTime) // <<== This
        if (nextTime <= 0) {
           set(isSessionActive, false) // <<== And this
        }
      });
    }
    return time;
  },
});

[drarmstr]

It's a good practice to try to have a single source of truth for state. No need for maintaining a separate atom if the session is active if you also have an atom for the remaining time; that could be derived state. For example:

export const remainingTimeState = atom<number>({
  key: 'remainingTime',
  default: SESSION_TIMEOUT,
});

export const isSessionActiveState = selector<boolean>({
  key: 'isSessionActive',
  get: ({get}) => get(remainingTimeState) > 0,
});

As you mention, you shouldn't be setting state from selector accessors or render functions. You can update the countdown from a React effect or other async callback.

function MyComponent() {
  const startSession = useRecoilCallback(({set, reset}) => () => {
    reset(remainingTimeState);
    const interval = setInterval(() => {
      set(remainingTimeState, remainingTime => {
        const newTime = remainingTime - 1000;
        if (newTime <= 0) {
          clearInterval(interval);
        }
        return newTime;
  }, 1000);

  return <button onClick={restartSession}>Restart Session</button>;
}

This is just a quick example of setting state, you'd want to protect against overlapping intervals and such of course.

Hmm, actually, it might be nifty to build the countdown into the atom itself using an atom effect...

export const remainingTimeState = atom<number>({
  key: 'remainingTime',
  default: SESSION_TIMEOUT,
  effects_UNSTABLE: [
    ({setSelf}) => {
      const interval = setInterval(() => {
        setSelf(remainingTime => remainingTime <= 1000 ? 0 : remainingTime - 1000);
      }, 1000);
      return () => clearInterval(interval);
    },
  ],
});

export const isSessionActiveState = selector<boolean>({
  key: 'isSessionActive',
  get: ({get}) => get(remainingTimeState) > 0,
});

[rumax]

Hi @drarmstr thanks for quick feedback.

You can update the countdown from a React effect or other async callback

That's something I wanted to avoid, because in case if react navigation (or any other navigation) is used, you never know which screen is active and where to put the component with use effect (or put to all screens?). Or it can be a case when the component is not mounted at all (for example app went to background).

But effects_UNSTABLE looks interesting and promising. That's actually something I was looking for. Thanks a lot!