You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[atomTree](https://github.com/jotaijs/jotai-family/blob/main/src/atomTree.ts) is a tree structure that allows you to create and remove atoms at a given path.
118
+
119
+
Use `atomTree` when you need a hierarchical way to store atoms, particularly if you expect many potential paths and want to reuse the same atom for repeated paths while also having an easy cleanup mechanism for subtrees.
120
+
121
+
```js
122
+
import { atom } from'jotai'
123
+
import { atomTree } from'jotai-family'
124
+
125
+
consttree=atomTree((path) =>atom(path.join('-')))
126
+
127
+
constatomA=tree(['foo', 'bar'])
128
+
constatomB=tree(['foo', 'bar'])
129
+
130
+
// Remove the atom at the given path
131
+
tree.remove(['foo', 'bar'])
132
+
```
133
+
134
+
## atomTree
135
+
136
+
The **atomTree** utility provides a hierarchical way to create, reuse, and remove Jotai atoms. Each atom is associated with a unique path, which is an array of unknown types. When you request the same path multiple times, `atomTree` ensures that the same atom instance is returned. You can also remove a specific atom or an entire subtree of atoms when they are no longer needed.
137
+
138
+
Use `atomTree` when you anticipate a large number of potential paths and want to:
139
+
140
+
-**Reuse the same atom** for repeated paths.
141
+
-**Clean up** unwanted atoms easily, including entire subtrees.
142
+
143
+
```js
144
+
import { atom } from'jotai'
145
+
import { atomTree } from'jotai-family'
146
+
147
+
// Create a tree instance, passing a factory function
148
+
// that takes a path array and returns a new atom.
149
+
consttree=atomTree((path) =>atom(path.join('-')))
150
+
151
+
// Create or retrieve the atom at ['foo', 'bar']
152
+
constatomA=tree(['foo', 'bar'])
153
+
constatomB=tree(['foo', 'bar'])
154
+
155
+
// atomA and atomB are the same instance.
156
+
console.log(atomA === atomB) // true
157
+
158
+
// Remove the atom at ['foo', 'bar']
159
+
// (and optionally remove its entire subtree)
160
+
tree.remove(['foo', 'bar'])
161
+
```
162
+
163
+
### API
164
+
165
+
#### Creating the tree
166
+
167
+
Creates a new hierarchical tree of Jotai atoms. It accepts a **factory** function that receives a path array and returns an atom.
168
+
169
+
```ts
170
+
typePath=string[] // Or any other array type
171
+
typeAtomType=Atom<unknown>
172
+
173
+
function atomTree<Path, AtomType>(
174
+
initializePathAtom: (path:Path) =>AtomType
175
+
): {
176
+
(path:Path):AtomType
177
+
remove(path:Path, removeSubTree?:boolean):void
178
+
getSubTree(path:Path):Node<AtomType> |undefined
179
+
getNodePath(path:Path):Node<AtomType>[]
180
+
}
181
+
```
182
+
183
+
-**`initializePathAtom`**: A function invoked whenever the tree needs to create a new atom. Receives the `path` as an argument and must return a Jotai atom.
184
+
185
+
The returned function has four main operations:
186
+
187
+
1.**`tree(path: Path): AtomType`**
188
+
Creates (or retrieves) an atom at the specified path. Subsequent calls with the same path return the same atom instance.
0 commit comments