facebookexperimental/Recoil

`set()` does not work inside `getCallback()` from non-async selector `get()`

Open

#2058 opened on Oct 6, 2022

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (19,428 stars) (1,151 forks)batch import
bughelp wanted

Description

I'm trying to generate a callback that is able to update an atom, I attempted to use getCallback and use the set function it provides, but it does nothing:


const tokenState = atom({
  key: 'token',
  default: 'no token yet',
});

const auth = selector({
  key: 'auth',
  get: async ({ get, getCallback }) => {
    const login = getCallback(({ set }) => async () => {
      console.log('logging in...');
      set(tokenState, 'logged in!');
    });

    return {
      token: get(tokenState),
      login,
    };
  },
});

Expected behaviour:

  • Either an error is thrown telling the user this is not how it works
  • Or the atom is updated as one would expect

Example: https://stackblitz.com/edit/react-ts-4ezf3k?file=App.tsx

Update: Changing the get of the selector to a non async function appears to make it work as expected, any insight ?

Contributor guide

Tech stack
reacttypescript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Recoil selectorsasync/awaitReact hooks
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the behavior of getCallback inside async selectors. Look at the Recoil source code for the selector's get function and how getCallback is resolved. Compare the async and non async paths. The issue is that set() does not update the atom when called from getCallback in an async selector. Check the implementation of getCallback and how it provides set to the callback. The relevant files are likely in the Recoil repository under src/... (e.g., Recoil selector.js or similar). Also review the linked StackBlitz example to reproduce the issue.