Fixes https://github.com/facebookexperimental/Recoil/issues/99

Additions:

• Add the ability to set/get a batch function, which defaults to ReactBatchedUpdates.
• Add ReactBatchedUpdates files for Web and Native that are imported to set the batch function to the renderer-specific function.
• Add a native target to Rollup, which resolves ReactBatchedUpdates.

Result: This gives us out of the box support for React DOM and React Native, with the library user not needing to make any changes.

Notes: I haven't changed the use of unstable_batchedUpdates in the tests. (In fact I haven't been able to get the suite to pass on master, which I'll have another go at later, and file an issue if I'm still stuck.) But it'd be great if the maintainers or anyone with more contexts on the tests could weigh in here. It seems like we should use unstable_batchedUpdates from react-test-renderer here.

In future, we could add a separate entry point (e.g. 'recoil/alternate-renderers') that doesn't set a batch function and doesn't depend on react-dom or react-native. We should be able to do this really easily because the infrastructure for setting the batching function to anything is available (and already exported in this PR).

Prior art for this PR:

• React Redux: Alternate renderers entry point and get/set batch functions
• @dustinsoftware's PR with a similar implementation 🙌

Both during local development and also when building a production build, I’m getting a duplicate atom key for each key and each page using it after the first one.

I put together a quick sandbox to demonstrate the issue: https://codesandbox.io/s/flamboyant-sea-tqlky

The errors show up in the build log, a quick way to test is using the integrated vercel deployment button. Looking at the default nextjs example, I can‘t spot any special settings there that would prevent whatever duplication is going on from happening: https://github.com/vercel/next.js/tree/canary/examples/with-recoil That example however only makes use of recoil state on one page.

After upgrading to version v0.2.0 I'm getting errors like this at random components and can't figure out why it happens. All components works fine with v0.1.2. All my atoms just simple atoms without async selectors and other complicated stuff.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at node_modules\react-native\Libraries\LogBox\LogBox.js:173:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:106:4 in printWarning
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:75:16 in error
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19152:9 in warnAboutUpdateOnUnmountedFiberInDEV
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17093:40 in scheduleUpdateOnFiber
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:11003:16 in dispatchAction
at [native code]:null in dispatchAction
at node_modules\recoil\native\recoil.js:4309:24 in subscribeToRecoilValue$1$argument_2
at node_modules\recoil\native\recoil.js:3321:41 in sendEndOfBatchNotifications
at node_modules\recoil\native\recoil.js:3374:6 in Recoil_Queue.enqueueExecution$argument_1
at node_modules\recoil\native\recoil.js:1041:0 in enqueueExecution
at node_modules\recoil\native\recoil.js:3355:18 in useEffect$argument_0
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15561:31 in commitHookEffectListMount
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15618:35 in commitPassiveHookEffects
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:265:4 in invokeGuardedCallbackImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:476:2 in invokeGuardedCallback
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18795:29 in flushPassiveEffectsImpl
at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17650:21 in performSyncWorkOnRoot
at [native code]:null in performSyncWorkOnRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17125:30 in scheduleUpdateOnFiber
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:11003:16 in dispatchAction
at [native code]:null in dispatchAction
at node_modules\recoil\native\recoil.js:3354:2 in Batcher
at node_modules\recoil\native\recoil.js:3556:4 in replaceState
at node_modules\recoil\native\recoil.js:775:9 in applyActionsToStore
at node_modules\recoil\native\recoil.js:798:9 in queueOrPerformStateUpdate
at node_modules\recoil\native\recoil.js:841:24 in setRecoilValue
at node_modules\recoil\native\recoil.js:4416:9 in useSetRecoilState
at node_modules\expo-image-manipulator\build\ImageManipulator.js:4:7 in manipulateAsync
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:293:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:154:27 in invoke
at node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

Environment

| software | version | ---------------------------- | ------- | expo | 40.0.1 | react | 17.0.2 | react-native | 0.63.4 | recoil | 0.2.0

Hi 👋

I followed this issue https://github.com/facebookexperimental/Recoil/issues/23, and I saw that I could help 😄

I add a /utils in the bundle which contains RecoilUtils.js

I fix some unresolved paths (and a twice declaration in recoil_values/Recoil_WaitFor.js thanks to the rollup messages). I'm not a rollup expert so, let me know if I did something wrong.

Question: There is no command to run tests?

Thanks for this amazing job :)

tl;dr: if an atom is an object and a selector returns a single property from that object, will downstream components re-render whenever ANY part of the atom changes, or only when that selector value changes? i.e. are selector output values cached or do re-renders occur whenever any of their input dependencies change? (I suspect the latter?).

If recoil doesn't cache selector output, then I suspect my best approach is useRecoilCallback to avoid subscribing, then have something like useStateSlice() which takes a slice fn() which triggers component updates (useState/setState) when the slice value differs?

seem right?

background:

This arises from a common(?) case:

The "atom" in my case is a (firebase) document which is basically a property bag of fields. We get async updates from firebase when that data is changed (possibly external to our app - e.g. by another user, etc.).

So if my atom is the document, I (think?) I'm hosed - any update to any field of the document will cause all downstream selectors to update and therefore all components depending on ANY part of the document to re-render.

What I'd like is to think of selectors as a "slicing" the data, so I could have a lastName selector which picks the lastName field out of the Person document. Components depending on lastName would update only when that field is different, ignoring changes to other parts of the person.

Hello,

I am really excited about this project, I've played around and just notice that my component was rendered twice after it mounted even without StrictMode(in production) #75

I've created a small example without StrictMode enabled on code sandbox: https://codesandbox.io/s/recoil-itit-double-render-jzbun

just wondering what I am doing wrong I appreciate any help!

• [ ] docs
  • [ ] Introduction
    • [ ] Motivation
    • [ ] Core Concepts
    • [x] Installation (@Mark-Yoo)
    • [ ] Getting Started
  • [ ] Basic Tutorial
    • [ ] Intro
    • [ ] Atoms
    • [ ] Selectors
    • [ ] Bonus: Performance (Didn't release)
  • [x] Guides
    • [x] Asynchronous Data Queries (@Mark-Yoo)
    • [x] Atom Effects (@Mark-Yoo)
    • [x] Testing (@Mark-Yoo)
    • [x] Dev Tools (@Mark-Yoo)
  • [ ] API Reference
    • [ ] Core
      • [ ] <RecoilRoot />
      • [ ] State
        • [ ] atom()
        • [ ] selector()
        • [x] Loadable (@Mark-Yoo)
        • [x] useRecoilState() (@Mark-Yoo)
        • [x] useRecoilValue() (@Mark-Yoo)
        • [x] useSetRecoilState() (@Mark-Yoo)
        • [x] useResetRecoilState() (@Mark-Yoo)
        • [x] useRecoilValueLoadable() (@Mark-Yoo)
        • [x] useRecoilStateLoadable() (@Mark-Yoo)
        • [ ] isRecoilValue()
      • [x] Snapshots
        • [x] Snapshot (@Mark-Yoo)
        • [x] useRecoilTransactionObserver() (@Mark-Yoo)
        • [x] useRecoilSnapshot() (@Mark-Yoo)
        • [x] useGotoRecoilSnapshot() (@Mark-Yoo)
      • [x] useRecoilCallback() (@Mark-Yoo)
      • [x] Misc
        • [x] useRecoilBridgeAcrossReactRoots() (@jung-han)
    • [x] Utils
      • [x] atomFamily() (@jung-han)
      • [x] selectorFamily() (@jung-han)
      • [x] constSelector() (@jung-han)
      • [x] errorSelector() (@jung-han)
      • [x] waitForAll() (@jung-han)
      • [x] waitForAny() (@jung-han)
      • [x] waitForNone() (@jung-han)
      • [x] noWait() (@jung-han)

i realize that useTransition is bleeding edge, but i'd like to get an early handle on it. this far i've not been able to figure out any combination of parts to get useTransition to work, and i can't find any examples online. all my imports work and i'm following the code like this.

    recoil: 0.1.1
    react: 0.0.0-experimental-4ead6b530
    react-dom: 0.0.0-experimental-4ead6b530

and using the concurrent pattern:

ReactDOM.unstable_createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <Route path="/" component={App} />
  </BrowserRouter>
);

and an otherwise typical and working <Suspense /> pattern:

import React, { Suspense, useState, unstable_useTransition as useTransition } from "react";
import { atom, selector, useRecoilState } from "recoil";

export const baseState = atom({
  key: "base",
  default: 100,
});

export const resourceState = selector({
  key: "resource",
  get: ({ get }) => {
    const base = get(baseState);
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(base);
      }, 2000);
    });
  },
  set: ({ set }, value) => {
    set(baseState, value);
  },
});

const UseTransitionEample = () => {
  const [resource, setResource] = useRecoilState(resourceState);
  const [startTransition, isPending] = useTransition({ timeoutMs: 3000 });

  return (
    <>
      <div>resource: {resource}</div>
      <div>isPending: {isPending ? "true" :  "false"}</div>
      <button onClick={() =>
          startTransition(() => {
            setResource(resource + 1);
          })
      }>Update</button>
    </>
  );
}

const SuspenseWrapper = () => (
  <Suspense fallback={<div>"Loading..."</div>}>
    <UseTransitionEample />
  </Suspense>
);

export default SuspenseWrapper;

In the above code clicking the button results in the "Loading..." fallback being presented for the full duration of the "load".

• motivation: the getter is call setDepsInStore every time, harm the performance when multiple call the getter
• notes: this pr just a demo, I don't known is this feasible. please give me a confirm, and I will make some further change with testcases

#914 Please refer this issue for detail

Summary: Update GitHub CI actions to do matrix testing with multiple versions of React in addition to OS and Node versions.

This allows us to test both React 17 and React 18 with new concurrent and strict modes.

how_to_regex_garabatokid

regex_train

iknowthis_regex

Differential Revision: D33196989

Selectors can be used to asynchronously fetch data from an API. But how is it possible to trigger a re-fetch of this data?

Given this selector:

const todosState = selector({
  key: "todosState",
  get: async () => {
    const result = await fetch("https://example.com/todos");
    const todos = await result.json();
    return todos;
  },
});

In a scenario where a user wanted to reload his todos, because he knows his coworker added a new todo to the list. How would he trigger this selector to re-fetch the todos from the API?

Bumps json5 from 1.0.1 to 1.0.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

I have the following code:

import { get, set } from "idb-keyval";
import type { AtomEffect } from "recoil";
import { DefaultValue, atom, selector } from "recoil";

export const syncIdbEffect =
  <T>(dbKey: string): AtomEffect<T> =>
  ({ onSet, setSelf }) => {
    setSelf(
      get(dbKey).then((savedVal: T | null) =>
        savedVal !== null || savedVal !== undefined ? savedVal : new DefaultValue(),
      ),
    );
    onSet((newVal, oldVal) => {
      if (newVal === oldVal) return;

      set(dbKey, newVal);
    });
  };

const tokenState = atom<string | undefined>({
  key: "tokenState",
  default: undefined,
  effects: [syncIdbEffect("token")],
});
export const isAuthedState = selector<boolean>({
  key: "isAuthedState",
  get: ({ get }) => {
    const refreshToken = get(tokenState);
    // MARK: At this stage refresh is of type "DefaultValue {}". TypeScript thinks that only string | undefined is the type
    return !!refreshToken;
  },
});

It's failing because the DefaultValue object is being returned from the get, where I'd expect the default to be undefined (see the MARK comment)

I'm using Recoil v0.7.6

Hey folks 👋 I got this issue with initializing atom in effect by using promise for setSelf. I will try to describe the problem:

• There are two atoms. Both are initialized in effect by using setSelf.
• There is a selector (selectAtomValues) that wraps both of them and concatenates the results of atoms.
• There is also another selector (firstAtomStateSelector) that only wraps one of those atoms and returns the value of the atom
• Now when we use only atoms in selectAtomValues everything works fine (you can try by uncommenting line 38)
• But if we use firstAtomStateSelector to get firstAtomState value it will not wait for secondAtomState and it displays default value of the atom. Later (after 3s delay) you can see the promise resolves to correct value but nothing is re-rendered. And even if it would be re-rendered it is probably not correct behaviour.

Here is repro: https://codesandbox.io/s/recoil-issue-with-promise-effect-l6ddpd?file=/src/App.js

Doing async on selector's get causes build to time out.

Example project: https://github.com/minakawa-daiki/recoil-build-test

If you remove the async in the following line, the build will pass without incident. https://github.com/minakawa-daiki/recoil-build-test/blob/main/src/testState.ts#L10

I believe this is a bug in Recoil.

I'm curious how did you implement markdown:

For example, for this page

There's according markdown page, but I'm not sure how they are linked, or how to run the repository, can somebody guide me?