Giter VIP home page Giter VIP logo

jotai-scope's Introduction

jotai-scope

๐Ÿ‘ป๐Ÿ”ญ

https://jotai.org/docs/integrations/scope

Scoped Atom resolution rules

  1. Each ScopeProvider creates a new scope pool.
  2. If a primitive atom is scoped, its scoped copy will be stored within the scope pool.
  3. If a derived atom is scoped, itself and all of its dependencies will be stored within the scope pool.
  4. If a derived atom is not scoped, but its dependency is scoped, it will access its scoped dependency.
  5. In each scope pool, each atom has at most one scoped copy, so the same scoped atom is shared in the pool.
  6. If a derived atom is nested scoped, itself and all of its dependencies will be stored within the scope pool where the atom is marked as scoped.

Taking the following setting in mind:

const base = atom(0);
const derived1 = atom(get => get(base));
const derived2 = atom(get => get(base));

const Component = () => {
  useAtom(base);
  useAtom(derived1);
  useAtom(derived2);
};

Example1: base and derived1 are scoped

const App() {
  return (
    <>
      <Component />
      <ScopeProvider atoms={[base, derived1]}>
        <Component />
      </ScopeProvider>
    </>
  );
}

Example 1 illustrates 1, 2, 3, 4, 5.

In unscoped Component, base, derived1 and derived2 are globally shared.

In scoped Component, base and derived1 are scoped, so derived1's dependency base is also scoped. Since exactly one scoped copy is stored in the scope pool, base and derived1's dependency base are the same, so derived1 and base are shared.

In scoped Component, derived2 is not scoped, but its dependency base is scoped. So derived2 will access the scoped copy of base in the scope pool. Therefore, derived1, derived2 and base are scoped and shared.

Example2: derived1 is scoped, base and derived2 are nested scoped

const App() {
  return (
    <>
      <ScopeProvider atoms={[derived1]}>
        <Component />
        <ScopeProvider atoms={[base, derived2]}>
          <Component />
        </ScopeProvider>
      </ScopeProvider>
    </>
  );
}

Example 2 illustrates 6.

In the first ScopeProvider, derived1 is scoped, so derived1's dependency base is also scoped.

In the second ScopeProvider, base and derived2 are scoped, so base and derived2 will access nested scope's atoms.

In the second ScopeProvider, derived1 is scoped in the first ScopeProvider, but its dependency base is scoped in current ScopeProvider. Here, derived1 will first access its scoped copy in the first ScopeProvider, and then access the scoped copy of base in the first ScopeProvider, too.

Therefore, first ScopeProvider's base and derived2 are globally shared. First ScopeProvider and second ScopeProvider's derived1 are shared. Second ScopeProvider's base and derived2 are shared.

Pro Tips

  1. Within a ScopeProvider, although an atom may not be scoped, its atom.read function could be called multiple times. Therefore, do not use atom.read to perform side effects.

    NOTE: Async atoms always have side effects. To handle it, add additional code to prevent extra side effects. You can check this issue as an example.

jotai-scope's People

Contributors

dai-shi avatar yf-yang avatar dmaskasky avatar marcocondrache avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.