123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
---title: Scopedescription: This doc describes scope extension.nav: 4.08keywords: scope---
There are a few libraries to extend Jotai's usage in React.
## `jotai-scope`
While Jotai's Provider allows to scope Jotai's store under a subtree,we can't use the store above the tree within the subtree.
A workaround is to use `store` option in useAtom and other hooks.To ease such use cases, `jotai-scope` provides ascoped provider and hooks.Instead of specifying the `store` option,the scoped provider accepts `atoms` propand the use of those atoms is scoped within the subtree.
### Install
```npm i jotai-scope```
### Counter Example
```tsximport { atom, useAtom } from 'jotai'import { ScopeProvider } from 'jotai-scope'
const countAtom = atom(0)const anotherCountAtom = atom(0)
const Counter = () => {  const [count, setCount] = useAtom(countAtom)  const [anotherCount, setAnotherCount] = useAtom(anotherCountAtom)  return (    <>      <div>        <span>count: {count}</span>        <button type="button" onClick={() => setCount((c) => c + 1)}>          increment        </button>      </div>      <div>        <span>another count: {anotherCount}</span>        <button type="button" onClick={() => setAnotherCount((c) => c + 1)}>          increment        </button>      </div>    </>  )}
const App = () => {  return (    <div>      <h1>First Provider</h1>      <ScopeProvider atoms={[anotherCountAtom]}>        <Counter />      </ScopeProvider>      <h1>Second Provider</h1>      <ScopeProvider atoms={[anotherCountAtom]}>        <Counter />      </ScopeProvider>    </div>  )}```
<CodeSandbox id="rf3r4n" />## `createIsolation`
Both Jotai's Provider and `jotai-scope`'s scoped providerare still using global contexts.
If you are developing a library that depends on Jotai andthe library user may use Jotai separately in their apps,they can share the same context. This can be troublesomebecause they point to unexpected Jotai stores.
To avoid conflicting the contexts,a utility function called `createIsolation` is exported from `jotai-scope`.
Check out the example in the repo: https://github.com/jotaijs/jotai-scope/tree/main/examples/01_isolation
## `bunshi` (formerly `jotai-molecules`)
Jotai atoms provide a basic solution to optimize re-renders.Atoms defined globally can depend on other atoms,but they can't depend on props and state within a component tree.It's possible to define atoms within a component tree,but then you would need to pass those atoms in some ways(for example, [atoms-in-atom](../guides/atoms-in-atom.mdx).)
[bunshi](https://github.com/saasquatch/bunshi) isa third-party library to help such use cases.
See [Motivation](https://github.com/saasquatch/bunshi/tree/v1.1.1#motivation) for more details.
### Install
```npm i bunshi```
### Counter Example
```jsximport { atom, useAtom } from 'jotai'import { molecule, useMolecule, createScope, ScopeProvider } from 'bunshi/react'
const InitialCountScope = createScope(0)const countMolecule = molecule((getMol, getScope) => {  const initialCont = getScope(InitialCountScope)  return atom(initialCont)})
const Counter = () => {  const countAtom = useMolecule(countMolecule)  const [count, setCount] = useAtom(countAtom)  return (    <div>      {count} <button onClick={() => setCount((c) => c + 1)}>+1</button>    </div>  )}
const App = () => (  <div>    <h1>With initial value 1</h1>    <ScopeProvider scope={InitialCountScope} value={1}>      <Counter />      <Counter />    </ScopeProvider>    <h1>With initial value 2</h1>    <ScopeProvider scope={InitialCountScope} value={2}>      <Counter />      <Counter />    </ScopeProvider>    <h1>Default</h1>    <Counter />    <Counter />  </div>)```
<CodeSandbox id="6dvlzf" />