tinybase 2.2.6 → 3.0.0-beta.1

package/lib/ui-react.d.ts

@@ -39,6 +39,11 @@ import {
   TableListener,
   Tables,
   TablesListener,
+  Value,
+  ValueIdsListener,
+  ValueListener,
+  Values,
+  ValuesListener,
 } from './store.d';
 import {
   CheckpointIds,
@@ -231,10 +236,11 @@ export type UndoOrRedoInformation = [boolean, Callback, Id | undefined, string];
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App />); // !act
  * // -> 'Store created'
  *
- * ReactDOM.render(<App />, app); // !act
+ * root.render(<App />); // !act
  * // No second Store creation
  *
  * console.log(app.innerHTML);
@@ -256,13 +262,14 @@ export type UndoOrRedoInformation = [boolean, Callback, Id | undefined, string];
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App fidoSpecies="dog" />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App fidoSpecies="dog" />); // !act
  * // -> 'Store created for fido as dog'
  *
  * console.log(app.innerHTML);
  * // -> '<span>dog</span>'
  *
- * ReactDOM.render(<App fidoSpecies="cat" />, app); // !act
+ * root.render(<App fidoSpecies="cat" />); // !act
  * // -> 'Store created for fido as cat'
  *
  * console.log(app.innerHTML);
@@ -285,8 +292,8 @@ export function useCreateStore(
  * component.
  *
  * The useStore hook lets you either get a reference to the default Store (when
- * called without a parameter), or one of the Store objects that are named by
- * Id (when called with an Id parameter).
+ * called without a parameter), or one of the Store objects that are named by Id
+ * (when called with an Id parameter).
  *
  * @param id An optional Id for accessing a Store that was named with an Id in
  * the Provider.
@@ -307,7 +314,7 @@ export function useCreateStore(
  *
  * const store = createStore();
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>0</span>'
  * ```
@@ -328,7 +335,7 @@ export function useCreateStore(
  *
  * const store = createStore();
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>0</span>'
  * ```
@@ -337,7 +344,7 @@ export function useCreateStore(
 export function useStore(id?: Id): Store | undefined;
 
 /**
- * The useTables hook returns a Tables object containing the entire data of a
+ * The useTables hook returns a Tables object containing the tabular data of a
  * Store, and registers a listener so that any changes to that result will cause
  * a re-render.
  *
@@ -354,7 +361,7 @@ export function useStore(id?: Id): Store | undefined;
  * @param storeOrStoreId The Store to be accessed: omit for the default context
  * Store, provide an Id for a named context Store, or provide an explicit
  * reference.
- * @returns A Tables object containing the entire data of the Store.
+ * @returns A Tables object containing the tabular data of the Store.
  * @example
  * This example creates a Store outside the application, which is used in the
  * useTables hook by reference. A change to the data in the Store re-renders the
@@ -365,7 +372,8 @@ export function useStore(id?: Id): Store | undefined;
  * const App = () => <span>{JSON.stringify(useTables(store))}</span>;
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>{"pets":{"fido":{"color":"brown"}}}</span>'
  *
@@ -387,7 +395,7 @@ export function useStore(id?: Id): Store | undefined;
  *
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>{"pets":{"fido":{"color":"brown"}}}</span>'
  * ```
@@ -405,7 +413,7 @@ export function useStore(id?: Id): Store | undefined;
  *
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>{"pets":{"fido":{"color":"brown"}}}</span>'
  * ```
@@ -415,7 +423,8 @@ export function useTables(storeOrStoreId?: StoreOrStoreId): Tables;
 
 /**
  * The useTableIds hook returns the Ids of every Table in a Store, and registers
- * a listener so that any changes to that result will cause a re-render. forward
+ * a listener so that any changes to that result will cause a re-render.
+ *
  * A Provider component is used to wrap part of an application in a context, and
  * it can contain a default Store or a set of Store objects named by Id. The
  * useTableIds hook lets you indicate which Store to get data for: omit the
@@ -440,7 +449,7 @@ export function useTables(storeOrStoreId?: StoreOrStoreId): Tables;
  * const App = () => <span>{JSON.stringify(useTableIds(store))}</span>;
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["pets"]</span>'
  *
@@ -462,7 +471,7 @@ export function useTables(storeOrStoreId?: StoreOrStoreId): Tables;
  *
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["pets"]</span>'
  * ```
@@ -480,7 +489,7 @@ export function useTables(storeOrStoreId?: StoreOrStoreId): Tables;
  *
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["pets"]</span>'
  * ```
@@ -489,9 +498,9 @@ export function useTables(storeOrStoreId?: StoreOrStoreId): Tables;
 export function useTableIds(storeOrStoreId?: StoreOrStoreId): Ids;
 
 /**
- * The useTable hook returns an object containing the entire data of a single
- * Table in a Store, and registers a listener so that any changes to that result
- * will cause a re-render.
+ * The useTable hook returns an object containing the data of a single Table in
+ * a Store, and registers a listener so that any changes to that result will
+ * cause a re-render.
  *
  * A Provider component is used to wrap part of an application in a context, and
  * it can contain a default Store or a set of Store objects named by Id. The
@@ -518,7 +527,7 @@ export function useTableIds(storeOrStoreId?: StoreOrStoreId): Ids;
  * const App = () => <span>{JSON.stringify(useTable('pets', store))}</span>;
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>{"fido":{"color":"brown"}}</span>'
  *
@@ -540,7 +549,7 @@ export function useTableIds(storeOrStoreId?: StoreOrStoreId): Ids;
  *
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>{"fido":{"color":"brown"}}</span>'
  * ```
@@ -560,7 +569,7 @@ export function useTableIds(storeOrStoreId?: StoreOrStoreId): Ids;
  *
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>{"fido":{"color":"brown"}}</span>'
  * ```
@@ -598,7 +607,7 @@ export function useTable(tableId: Id, storeOrStoreId?: StoreOrStoreId): Table;
  * const App = () => <span>{JSON.stringify(useRowIds('pets', store))}</span>;
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["fido"]</span>'
  *
@@ -620,7 +629,7 @@ export function useTable(tableId: Id, storeOrStoreId?: StoreOrStoreId): Table;
  *
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["fido"]</span>'
  * ```
@@ -640,7 +649,7 @@ export function useTable(tableId: Id, storeOrStoreId?: StoreOrStoreId): Table;
  *
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["fido"]</span>'
  * ```
@@ -694,7 +703,7 @@ export function useRowIds(tableId: Id, storeOrStoreId?: StoreOrStoreId): Ids;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["felix","fido"]</span>'
  *
@@ -721,7 +730,7 @@ export function useRowIds(tableId: Id, storeOrStoreId?: StoreOrStoreId): Ids;
  *   },
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["felix","fido"]</span>'
  * ```
@@ -750,7 +759,7 @@ export function useRowIds(tableId: Id, storeOrStoreId?: StoreOrStoreId): Ids;
  *   },
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["felix","fido"]</span>'
  * ```
@@ -767,9 +776,9 @@ export function useSortedRowIds(
 ): Ids;
 
 /**
- * The useRow hook returns an object containing the entire data of a single Row
- * in a given Table, and registers a listener so that any changes to that result
- * will cause a re-render.
+ * The useRow hook returns an object containing the data of a single Row in a
+ * given Table, and registers a listener so that any changes to that result will
+ * cause a re-render.
  *
  * A Provider component is used to wrap part of an application in a context, and
  * it can contain a default Store or a set of Store objects named by Id. The
@@ -799,7 +808,7 @@ export function useSortedRowIds(
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>{"color":"brown"}</span>'
  *
@@ -821,7 +830,7 @@ export function useSortedRowIds(
  *
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>{"color":"brown"}</span>'
  * ```
@@ -841,7 +850,7 @@ export function useSortedRowIds(
  *
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>{"color":"brown"}</span>'
  * ```
@@ -886,7 +895,7 @@ export function useRow(
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["color"]</span>'
  *
@@ -910,7 +919,7 @@ export function useRow(
  *
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["color"]</span>'
  * ```
@@ -930,7 +939,7 @@ export function useRow(
  *
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["color"]</span>'
  * ```
@@ -974,7 +983,7 @@ export function useCellIds(
  * const App = () => <span>{useCell('pets', 'fido', 'color', store)}</span>;
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>brown</span>'
  *
@@ -996,7 +1005,7 @@ export function useCellIds(
  *
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>brown</span>'
  * ```
@@ -1016,7 +1025,7 @@ export function useCellIds(
  *
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>brown</span>'
  * ```
@@ -1029,12 +1038,248 @@ export function useCell(
   storeOrStoreId?: StoreOrStoreId,
 ): Cell | undefined;
 
+/**
+ * The useValues hook returns a Values object containing the keyed value data of
+ * a Store, and registers a listener so that any changes to that result will
+ * cause a re-render.
+ *
+ * A Provider component is used to wrap part of an application in a context, and
+ * it can contain a default Store or a set of Store objects named by Id. The
+ * useValues hook lets you indicate which Store to get data for: omit the
+ * optional parameter for the default context Store, provide an Id for a named
+ * context Store, or provide a Store explicitly by reference.
+ *
+ * When first rendered, this hook will create a listener so that changes to the
+ * Values will cause a re-render. When the component containing this hook is
+ * unmounted, the listener will be automatically removed.
+ *
+ * @param storeOrStoreId The Store to be accessed: omit for the default context
+ * Store, provide an Id for a named context Store, or provide an explicit
+ * reference.
+ * @returns A Values object containing the keyed value data of the Store.
+ * @example
+ * This example creates a Store outside the application, which is used in the
+ * useValues hook by reference. A change to the data in the Store re-renders the
+ * component.
+ *
+ * ```jsx
+ * const store = createStore().setValue('open', true);
+ * const App = () => <span>{JSON.stringify(useValues(store))}</span>;
+ *
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>{"open":true}</span>'
+ *
+ * store.setValue('open', false); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>{"open":false}</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Store is
+ * provided. A component within it then uses the useValues hook.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => <span>{JSON.stringify(useValues())}</span>;
+ *
+ * const store = createStore().setValue('open', true);
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>{"open":true}</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a Store is provided, named
+ * by Id. A component within it then uses the useValues hook.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider storesById={{petStore: store}}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => <span>{JSON.stringify(useValues('petStore'))}</span>;
+ *
+ * const store = createStore().setValue('open', true);
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>{"open":true}</span>'
+ * ```
+ * @category Store hooks
+ * @since v3.0.0
+ */
+export function useValues(storeOrStoreId?: StoreOrStoreId): Values;
+
+/**
+ * The useValueIds hook returns the Ids of every Value in a Store, and registers
+ * a listener so that any changes to that result will cause a re-render.
+ *
+ * A Provider component is used to wrap part of an application in a context, and
+ * it can contain a default Store or a set of Store objects named by Id. The
+ * useValueIds hook lets you indicate which Store to get data for: omit the
+ * optional parameter for the default context Store, provide an Id for a named
+ * context Store, or provide a Store explicitly by reference.
+ *
+ * When first rendered, this hook will create a listener so that changes to the
+ * Value Ids will cause a re-render. When the component containing this hook is
+ * unmounted, the listener will be automatically removed.
+ *
+ * @param storeOrStoreId The Store to be accessed: omit for the default context
+ * Store, provide an Id for a named context Store, or provide an explicit
+ * reference.
+ * @returns An array of the Ids of every Value in the Store.
+ * @example
+ * This example creates a Store outside the application, which is used in the
+ * useValueIds hook by reference. A change to the data in the Store re-renders
+ * the component.
+ *
+ * ```jsx
+ * const store = createStore().setValue('open', true);
+ * const App = () => <span>{JSON.stringify(useValueIds(store))}</span>;
+ *
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>["open"]</span>'
+ *
+ * store.setValue('employees', 3); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>["open","employees"]</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Store is
+ * provided. A component within it then uses the useValueIds hook.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => <span>{JSON.stringify(useValueIds())}</span>;
+ *
+ * const store = createStore().setValue('open', true);
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>["open"]</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a Store is provided, named
+ * by Id. A component within it then uses the useValueIds hook.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider storesById={{petStore: store}}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => <span>{JSON.stringify(useValueIds('petStore'))}</span>;
+ *
+ * const store = createStore().setValue('open', true);
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>["open"]</span>'
+ * ```
+ * @category Store hooks
+ * @since v3.0.0
+ */
+export function useValueIds(storeOrStoreId?: StoreOrStoreId): Ids;
+
+/**
+ * The useValue hook returns an object containing the data of a single Value in
+ * a Store, and registers a listener so that any changes to that result will
+ * cause a re-render.
+ *
+ * A Provider component is used to wrap part of an application in a context, and
+ * it can contain a default Store or a set of Store objects named by Id. The
+ * useValue hook lets you indicate which Store to get data for: omit the final
+ * optional final parameter for the default context Store, provide an Id for a
+ * named context Store, or provide a Store explicitly by reference.
+ *
+ * When first rendered, this hook will create a listener so that changes to the
+ * Value will cause a re-render. When the component containing this hook is
+ * unmounted, the listener will be automatically removed.
+ *
+ * @param valueId The Id of the Value in the Store.
+ * @param storeOrStoreId The Store to be accessed: omit for the default context
+ * Store, provide an Id for a named context Store, or provide an explicit
+ * reference.
+ * @returns An object containing the entire data of the Value.
+ * @example
+ * This example creates a Store outside the application, which is used in the
+ * useValue hook by reference. A change to the data in the Store re-renders the
+ * component.
+ *
+ * ```jsx
+ * const store = createStore().setValue('open', true);
+ * const App = () => <span>{JSON.stringify(useValue('open', store))}</span>;
+ *
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>true</span>'
+ *
+ * store.setValue('open', false); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>false</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Store is
+ * provided. A component within it then uses the useValue hook.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => <span>{JSON.stringify(useValue('open'))}</span>;
+ *
+ * const store = createStore().setValue('open', true);
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>true</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a Store is provided, named
+ * by Id. A component within it then uses the useValue hook.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider storesById={{petStore: store}}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <span>{JSON.stringify(useValue('open', 'petStore'))}</span>
+ * );
+ *
+ * const store = createStore().setValue('open', true);
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>true</span>'
+ * ```
+ * @category Store hooks
+ * @since v3.0.0
+ */
+export function useValue(valueId: Id, storeOrStoreId?: StoreOrStoreId): Value;
+
 /**
  * The useSetTablesCallback hook returns a parameterized callback that can be
- * used to set the entire data of a Store.
+ * used to set the tabular data of a Store.
  *
  * This hook is useful, for example, when creating an event handler that will
- * mutate the data in Store. In this case, the parameter will likely be the
+ * mutate the data in the Store. In this case, the parameter will likely be the
  * event, so that you can use data from it as part of the mutation.
  *
  * The first parameter is a function which will produce the Tables object that
@@ -1090,7 +1335,7 @@ export function useCell(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * const span = app.querySelector('span');
  * console.log(span.innerHTML);
  * // -> '{"pets":{"nemo":{"species":"fish"}}}'
@@ -1114,10 +1359,10 @@ export function useSetTablesCallback<Parameter>(
 
 /**
  * The useSetTableCallback hook returns a parameterized callback that can be
- * used to set the entire data of a single Table in a Store.
+ * used to set the data of a single Table in a Store.
  *
  * This hook is useful, for example, when creating an event handler that will
- * mutate the data in Store. In this case, the parameter will likely be the
+ * mutate the data in the Store. In this case, the parameter will likely be the
  * event, so that you can use data from it as part of the mutation.
  *
  * The second parameter is a function which will produce the Table object that
@@ -1175,7 +1420,7 @@ export function useSetTablesCallback<Parameter>(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * const span = app.querySelector('span');
  * console.log(span.innerHTML);
  * // -> '{"nemo":{"species":"fish"}}'
@@ -1200,10 +1445,10 @@ export function useSetTableCallback<Parameter>(
 
 /**
  * The useSetRowCallback hook returns a parameterized callback that can be used
- * to set the entire data of a single Row in a Store.
+ * to set the data of a single Row in a Store.
  *
  * This hook is useful, for example, when creating an event handler that will
- * mutate the data in Store. In this case, the parameter will likely be the
+ * mutate the data in the Store. In this case, the parameter will likely be the
  * event, so that you can use data from it as part of the mutation.
  *
  * The third parameter is a function which will produce the Row object that will
@@ -1263,7 +1508,7 @@ export function useSetTableCallback<Parameter>(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * const span = app.querySelector('span');
  * console.log(span.innerHTML);
  * // -> '{"species":"fish"}'
@@ -1292,7 +1537,7 @@ export function useSetRowCallback<Parameter>(
  * to create a new Row in a Store.
  *
  * This hook is useful, for example, when creating an event handler that will
- * mutate the data in Store. In this case, the parameter will likely be the
+ * mutate the data in the Store. In this case, the parameter will likely be the
  * event, so that you can use data from it as part of the mutation.
  *
  * The second parameter is a function which will produce the Row object that
@@ -1350,7 +1595,7 @@ export function useSetRowCallback<Parameter>(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * const span = app.querySelector('span');
  * console.log(span.innerHTML);
  * // -> '{"nemo":{"species":"fish"}}'
@@ -1375,7 +1620,7 @@ export function useAddRowCallback<Parameter>(
 
 /**
  * The useSetPartialRowCallback hook returns a parameterized callback that can
- * be used to sets partial data of a single Row in the Store, leaving other Cell
+ * be used to set partial data of a single Row in the Store, leaving other Cell
  * values unaffected.
  *
  * This hook is useful, for example, when creating an event handler that will
@@ -1440,7 +1685,7 @@ export function useAddRowCallback<Parameter>(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * const span = app.querySelector('span');
  * console.log(span.innerHTML);
  * // -> '{"species":"fish"}'
@@ -1469,7 +1714,7 @@ export function useSetPartialRowCallback<Parameter>(
  * to set the value of a single Cell in a Store.
  *
  * This hook is useful, for example, when creating an event handler that will
- * mutate the data in Store. In this case, the parameter will likely be the
+ * mutate the data in the Store. In this case, the parameter will likely be the
  * event, so that you can use data from it as part of the mutation.
  *
  * The fourth parameter is a function which will produce the Cell object that
@@ -1531,7 +1776,7 @@ export function useSetPartialRowCallback<Parameter>(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * const span = app.querySelector('span');
  * console.log(span.innerHTML);
  * // -> '{"species":"fish"}'
@@ -1568,7 +1813,7 @@ export function useSetPartialRowCallback<Parameter>(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * const span = app.querySelector('span');
  * console.log(span.innerHTML);
  * // -> '{"visits":1}'
@@ -1594,132 +1839,389 @@ export function useSetCellCallback<Parameter>(
 ): ParameterizedCallback<Parameter>;
 
 /**
- * The useDelTablesCallback hook returns a callback that can be used to remove
- * all of the data in a Store.
+ * The useSetValuesCallback hook returns a parameterized callback that can be
+ * used to set the keyed value data of a Store.
  *
  * This hook is useful, for example, when creating an event handler that will
- * delete data in a Store.
+ * mutate the data in the Store. In this case, the parameter will likely be the
+ * event, so that you can use data from it as part of the mutation.
+ *
+ * The first parameter is a function which will produce the Values object that
+ * will then be used to update the Store in the callback.
+ *
+ * If that function has any other dependencies, the changing of which should
+ * also cause the callback to be recreated, you can provide them in an array in
+ * the optional second parameter, just as you would for any React hook with
+ * dependencies.
  *
  * For convenience, you can optionally provide a `then` function (with its own
  * set of dependencies) which will be called just after the Store has been
  * updated. This is a useful place to call the addCheckpoint method, for
- * example, if you wish to add the deletion to your application's undo stack.
+ * example, if you wish to add the mutation to your application's undo stack.
  *
- * The Store to which the callback will make the deletion (indicated by the
+ * The Store to which the callback will make the mutation (indicated by the
  * hook's `storeOrStoreId` parameter) is always automatically used as a hook
  * dependency for the callback.
  *
+ * @param getValues A function which returns the Values object that will be used
+ * to update the Store, based on the parameter the callback will receive (and
+ * which is most likely a DOM event).
+ * @param getValuesDeps An optional array of dependencies for the `getValues`
+ * function, which, if any change, result in the regeneration of the callback.
+ * This parameter defaults to an empty array.
  * @param storeOrStoreId The Store to be updated: omit for the default context
  * Store, provide an Id for a named context Store, or provide an explicit
  * reference.
- * @param then A function which is called after the deletion, with a reference
- * to the Store.
+ * @param then A function which is called after the mutation, with a reference
+ * to the Store and the Values used in the update.
  * @param thenDeps An optional array of dependencies for the `then` function,
  * which, if any change, result in the regeneration of the callback. This
  * parameter defaults to an empty array.
- * @returns A callback for subsequent use.
+ * @returns A parameterized callback for subsequent use.
  * @example
- * This example uses the useDelTablesCallback hook to create an event handler
- * which deletes from the Store when the `span` element is clicked.
+ * This example uses the useSetValuesCallback hook to create an event handler
+ * which updates the Store when the `span` element is clicked.
  *
  * ```jsx
- * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
+ * const store = createStore().setValues({open: true});
  * const App = () => {
- *   const handleClick = useDelTablesCallback(store, () =>
- *     console.log('Deleted'),
+ *   const handleClick = useSetValuesCallback(
+ *     (e) => ({bubbles: e.bubbles}),
+ *     [],
+ *     store,
+ *     (store, values) => console.log(`Updated: ${JSON.stringify(values)}`),
  *   );
  *   return (
  *     <span id="span" onClick={handleClick}>
- *       {JSON.stringify(useTables(store))}
+ *       {JSON.stringify(useValues(store))}
  *     </span>
  *   );
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * const span = app.querySelector('span');
  * console.log(span.innerHTML);
- * // -> '{"pets":{"nemo":{"species":"fish"}}}'
+ * // -> '{"open":true}'
  *
  * // User clicks the <span> element:
  * // -> span MouseEvent('click', {bubbles: true})
- * // -> 'Deleted'
+ * // -> 'Updated: {"bubbles":true}'
  *
  * console.log(span.innerHTML);
- * // -> '{}'
+ * // -> '{"bubbles":true}'
  * ```
  * @category Store hooks
+ * @since v3.0.0
  */
-export function useDelTablesCallback(
+export function useSetValuesCallback<Parameter>(
+  getValues: (parameter: Parameter, store: Store) => Values,
+  getValuesDeps?: React.DependencyList,
   storeOrStoreId?: StoreOrStoreId,
-  then?: (store: Store) => void,
+  then?: (store: Store, values: Values) => void,
   thenDeps?: React.DependencyList,
-): Callback;
+): ParameterizedCallback<Parameter>;
 
 /**
- * The useDelTableCallback hook returns a callback that can be used to remove a
- * single Table from a Store.
+ * The useSetPartialValuesCallback hook returns a parameterized callback that
+ * can be used to set partial Values data in the Store, leaving other Values
+ * unaffected.
  *
  * This hook is useful, for example, when creating an event handler that will
- * delete data in a Store.
+ * mutate the data in the Store. In this case, the parameter will likely be the
+ * event, so that you can use data from it as part of the mutation.
+ *
+ * The third parameter is a function which will produce the partial Values
+ * object that will then be used to update the Store in the callback.
+ *
+ * If that function has any other dependencies, the changing of which should
+ * also cause the callback to be recreated, you can provide them in an array in
+ * the optional fourth parameter, just as you would for any React hook with
+ * dependencies.
  *
  * For convenience, you can optionally provide a `then` function (with its own
  * set of dependencies) which will be called just after the Store has been
  * updated. This is a useful place to call the addCheckpoint method, for
- * example, if you wish to add the deletion to your application's undo stack.
+ * example, if you wish to add the mutation to your application's undo stack.
  *
- * The Store to which the callback will make the deletion (indicated by the
+ * The Store to which the callback will make the mutation (indicated by the
  * hook's `storeOrStoreId` parameter) is always automatically used as a hook
  * dependency for the callback.
  *
- * @param tableId The Id of the Table in the Store.
+ * @param getPartialValues A function which returns the partial Values object
+ * that will be used to update the Store, based on the parameter the callback
+ * will receive (and which is most likely a DOM event).
+ * @param getPartialValuesDeps An optional array of dependencies for the
+ * `getValues` function, which, if any change, result in the regeneration of the
+ * callback. This parameter defaults to an empty array.
  * @param storeOrStoreId The Store to be updated: omit for the default context
  * Store, provide an Id for a named context Store, or provide an explicit
  * reference.
- * @param then A function which is called after the deletion, with a reference
- * to the Store.
+ * @param then A function which is called after the mutation, with a reference
+ * to the Store and the Values used in the update.
  * @param thenDeps An optional array of dependencies for the `then` function,
  * which, if any change, result in the regeneration of the callback. This
  * parameter defaults to an empty array.
- * @returns A callback for subsequent use.
+ * @returns A parameterized callback for subsequent use.
  * @example
- * This example uses the useDelTableCallback hook to create an event handler
- * which deletes from the Store when the `span` element is clicked.
+ * This example uses the useSetPartialValuesCallback hook to create an event
+ * handler which updates the Store when the `span` element is clicked.
  *
  * ```jsx
- * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
+ * const store = createStore().setValues({open: true});
  * const App = () => {
- *   const handleClick = useDelTableCallback('pets', store, () =>
- *     console.log('Deleted'),
+ *   const handleClick = useSetPartialValuesCallback(
+ *     (e) => ({bubbles: e.bubbles}),
+ *     [],
+ *     store,
+ *     (store, partialValues) =>
+ *       console.log(`Updated: ${JSON.stringify(partialValues)}`),
  *   );
  *   return (
  *     <span id="span" onClick={handleClick}>
- *       {JSON.stringify(useTables(store))}
+ *       {JSON.stringify(useValues(store))}
  *     </span>
  *   );
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * const span = app.querySelector('span');
  * console.log(span.innerHTML);
- * // -> '{"pets":{"nemo":{"species":"fish"}}}'
+ * // -> '{"open":true}'
  *
  * // User clicks the <span> element:
  * // -> span MouseEvent('click', {bubbles: true})
- * // -> 'Deleted'
+ * // -> 'Updated: {"bubbles":true}'
  *
  * console.log(span.innerHTML);
- * // -> '{}'
+ * // -> '{"open":true,"bubbles":true}'
  * ```
  * @category Store hooks
+ * @since v3.0.0
  */
-export function useDelTableCallback(
-  tableId: Id,
+export function useSetPartialValuesCallback<Parameter>(
+  getPartialValues: (parameter: Parameter, store: Store) => Values,
+  getPartialValuesDeps?: React.DependencyList,
   storeOrStoreId?: StoreOrStoreId,
-  then?: (store: Store) => void,
+  then?: (store: Store, partialValues: Values) => void,
   thenDeps?: React.DependencyList,
-): Callback;
+): ParameterizedCallback<Parameter>;
+
+/**
+ * The useSetValueCallback hook returns a parameterized callback that can be
+ * used to set the data of a single Value in a Store.
+ *
+ * This hook is useful, for example, when creating an event handler that will
+ * mutate the data in the Store. In this case, the parameter will likely be the
+ * event, so that you can use data from it as part of the mutation.
+ *
+ * The second parameter is a function which will produce the Value object that
+ * will then be used to update the Store in the callback.
+ *
+ * If that function has any other dependencies, the changing of which should
+ * also cause the callback to be recreated, you can provide them in an array in
+ * the optional third parameter, just as you would for any React hook with
+ * dependencies.
+ *
+ * For convenience, you can optionally provide a `then` function (with its own
+ * set of dependencies) which will be called just after the Store has been
+ * updated. This is a useful place to call the addCheckpoint method, for
+ * example, if you wish to add the mutation to your application's undo stack.
+ *
+ * The Store to which the callback will make the mutation (indicated by the
+ * hook's `storeOrStoreId` parameter) is always automatically used as a hook
+ * dependency for the callback.
+ *
+ * @param valueId The Id of the Value in the Store to set.
+ * @param getValue A function which returns the Value object that will be used
+ * to update the Store, based on the parameter the callback will receive (and
+ * which is most likely a DOM event).
+ * @param getValueDeps An optional array of dependencies for the `getValue`
+ * function, which, if any change, result in the regeneration of the callback.
+ * This parameter defaults to an empty array.
+ * @param storeOrStoreId The Store to be updated: omit for the default context
+ * Store, provide an Id for a named context Store, or provide an explicit
+ * reference.
+ * @param then A function which is called after the mutation, with a reference
+ * to the Store and the Value used in the update.
+ * @param thenDeps An optional array of dependencies for the `then` function,
+ * which, if any change, result in the regeneration of the callback. This
+ * parameter defaults to an empty array.
+ * @returns A parameterized callback for subsequent use.
+ * @example
+ * This example uses the useSetValueCallback hook to create an event handler
+ * which updates the Store when the `span` element is clicked.
+ *
+ * ```jsx
+ * const store = createStore().setValue('open', true);
+ * const App = () => {
+ *   const handleClick = useSetValueCallback(
+ *     'bubbles',
+ *     (e) => e.bubbles,
+ *     [],
+ *     store,
+ *     (store, value) => console.log(`Updated: ${JSON.stringify(value)}`),
+ *   );
+ *   return (
+ *     <span id="span" onClick={handleClick}>
+ *       {JSON.stringify(useValues(store))}
+ *     </span>
+ *   );
+ * };
+ *
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
+ * const span = app.querySelector('span');
+ * console.log(span.innerHTML);
+ * // -> '{"open":true}'
+ *
+ * // User clicks the <span> element:
+ * // -> span MouseEvent('click', {bubbles: true})
+ * // -> 'Updated: true'
+ *
+ * console.log(span.innerHTML);
+ * // -> '{"open":true,"bubbles":true}'
+ * ```
+ * @category Store hooks
+ * @since v3.0.0
+ */
+export function useSetValueCallback<Parameter>(
+  valueId: Id,
+  getValue: (parameter: Parameter, store: Store) => Value,
+  getValueDeps?: React.DependencyList,
+  storeOrStoreId?: StoreOrStoreId,
+  then?: (store: Store, value: Value) => void,
+  thenDeps?: React.DependencyList,
+): ParameterizedCallback<Parameter>;
+
+/**
+ * The useDelTablesCallback hook returns a callback that can be used to remove
+ * all of the tabular data in a Store.
+ *
+ * This hook is useful, for example, when creating an event handler that will
+ * delete data in a Store.
+ *
+ * For convenience, you can optionally provide a `then` function (with its own
+ * set of dependencies) which will be called just after the Store has been
+ * updated. This is a useful place to call the addCheckpoint method, for
+ * example, if you wish to add the deletion to your application's undo stack.
+ *
+ * The Store to which the callback will make the deletion (indicated by the
+ * hook's `storeOrStoreId` parameter) is always automatically used as a hook
+ * dependency for the callback.
+ *
+ * @param storeOrStoreId The Store to be updated: omit for the default context
+ * Store, provide an Id for a named context Store, or provide an explicit
+ * reference.
+ * @param then A function which is called after the deletion, with a reference
+ * to the Store.
+ * @param thenDeps An optional array of dependencies for the `then` function,
+ * which, if any change, result in the regeneration of the callback. This
+ * parameter defaults to an empty array.
+ * @returns A callback for subsequent use.
+ * @example
+ * This example uses the useDelTablesCallback hook to create an event handler
+ * which deletes from the Store when the `span` element is clicked.
+ *
+ * ```jsx
+ * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
+ * const App = () => {
+ *   const handleClick = useDelTablesCallback(store, () =>
+ *     console.log('Deleted'),
+ *   );
+ *   return (
+ *     <span id="span" onClick={handleClick}>
+ *       {JSON.stringify(useTables(store))}
+ *     </span>
+ *   );
+ * };
+ *
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
+ * const span = app.querySelector('span');
+ * console.log(span.innerHTML);
+ * // -> '{"pets":{"nemo":{"species":"fish"}}}'
+ *
+ * // User clicks the <span> element:
+ * // -> span MouseEvent('click', {bubbles: true})
+ * // -> 'Deleted'
+ *
+ * console.log(span.innerHTML);
+ * // -> '{}'
+ * ```
+ * @category Store hooks
+ */
+export function useDelTablesCallback(
+  storeOrStoreId?: StoreOrStoreId,
+  then?: (store: Store) => void,
+  thenDeps?: React.DependencyList,
+): Callback;
+
+/**
+ * The useDelTableCallback hook returns a callback that can be used to remove a
+ * single Table from a Store.
+ *
+ * This hook is useful, for example, when creating an event handler that will
+ * delete data in a Store.
+ *
+ * For convenience, you can optionally provide a `then` function (with its own
+ * set of dependencies) which will be called just after the Store has been
+ * updated. This is a useful place to call the addCheckpoint method, for
+ * example, if you wish to add the deletion to your application's undo stack.
+ *
+ * The Store to which the callback will make the deletion (indicated by the
+ * hook's `storeOrStoreId` parameter) is always automatically used as a hook
+ * dependency for the callback.
+ *
+ * @param tableId The Id of the Table in the Store.
+ * @param storeOrStoreId The Store to be updated: omit for the default context
+ * Store, provide an Id for a named context Store, or provide an explicit
+ * reference.
+ * @param then A function which is called after the deletion, with a reference
+ * to the Store.
+ * @param thenDeps An optional array of dependencies for the `then` function,
+ * which, if any change, result in the regeneration of the callback. This
+ * parameter defaults to an empty array.
+ * @returns A callback for subsequent use.
+ * @example
+ * This example uses the useDelTableCallback hook to create an event handler
+ * which deletes from the Store when the `span` element is clicked.
+ *
+ * ```jsx
+ * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
+ * const App = () => {
+ *   const handleClick = useDelTableCallback('pets', store, () =>
+ *     console.log('Deleted'),
+ *   );
+ *   return (
+ *     <span id="span" onClick={handleClick}>
+ *       {JSON.stringify(useTables(store))}
+ *     </span>
+ *   );
+ * };
+ *
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
+ * const span = app.querySelector('span');
+ * console.log(span.innerHTML);
+ * // -> '{"pets":{"nemo":{"species":"fish"}}}'
+ *
+ * // User clicks the <span> element:
+ * // -> span MouseEvent('click', {bubbles: true})
+ * // -> 'Deleted'
+ *
+ * console.log(span.innerHTML);
+ * // -> '{}'
+ * ```
+ * @category Store hooks
+ */
+export function useDelTableCallback(
+  tableId: Id,
+  storeOrStoreId?: StoreOrStoreId,
+  then?: (store: Store) => void,
+  thenDeps?: React.DependencyList,
+): Callback;
 
 /**
  * The useDelRowCallback hook returns a callback that can be used to remove a
@@ -1766,7 +2268,7 @@ export function useDelTableCallback(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * const span = app.querySelector('span');
  * console.log(span.innerHTML);
  * // -> '{"pets":{"nemo":{"species":"fish"}}}'
@@ -1808,8 +2310,8 @@ export function useDelRowCallback(
  * @param rowId The Id of the Row in the Table.
  * @param cellId The Id of the Cell in the Row.
  * @param forceDel An optional flag to indicate that the whole Row should be
- * deleted, even if a Schema provides a default value for this Cell. Defaults to
- * `false`.
+ * deleted, even if a TablesSchema provides a default value for this Cell.
+ * Defaults to `false`.
  * @param storeOrStoreId The Store to be updated: omit for the default context
  * Store, provide an Id for a named context Store, or provide an explicit
  * reference.
@@ -1842,7 +2344,7 @@ export function useDelRowCallback(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * const span = app.querySelector('span');
  * console.log(span.innerHTML);
  * // -> '{"pets":{"nemo":{"species":"fish"}}}'
@@ -1866,9 +2368,139 @@ export function useDelCellCallback(
   thenDeps?: React.DependencyList,
 ): Callback;
 
+/**
+ * The useDelValuesCallback hook returns a callback that can be used to remove
+ * all of the keyed value data in a Store.
+ *
+ * This hook is useful, for example, when creating an event handler that will
+ * delete data in a Store.
+ *
+ * For convenience, you can optionally provide a `then` function (with its own
+ * set of dependencies) which will be called just after the Store has been
+ * updated. This is a useful place to call the addCheckpoint method, for
+ * example, if you wish to add the deletion to your application's undo stack.
+ *
+ * The Store to which the callback will make the deletion (indicated by the
+ * hook's `storeOrStoreId` parameter) is always automatically used as a hook
+ * dependency for the callback.
+ *
+ * @param storeOrStoreId The Store to be updated: omit for the default context
+ * Store, provide an Id for a named context Store, or provide an explicit
+ * reference.
+ * @param then A function which is called after the deletion, with a reference
+ * to the Store.
+ * @param thenDeps An optional array of dependencies for the `then` function,
+ * which, if any change, result in the regeneration of the callback. This
+ * parameter defaults to an empty array.
+ * @returns A callback for subsequent use.
+ * @example
+ * This example uses the useDelValuesCallback hook to create an event handler
+ * which deletes from the Store when the `span` element is clicked.
+ *
+ * ```jsx
+ * const store = createStore().setValues({open: true});
+ * const App = () => {
+ *   const handleClick = useDelValuesCallback(store, () =>
+ *     console.log('Deleted'),
+ *   );
+ *   return (
+ *     <span id="span" onClick={handleClick}>
+ *       {JSON.stringify(useValues(store))}
+ *     </span>
+ *   );
+ * };
+ *
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
+ * const span = app.querySelector('span');
+ * console.log(span.innerHTML);
+ * // -> '{"open":true}'
+ *
+ * // User clicks the <span> element:
+ * // -> span MouseEvent('click', {bubbles: true})
+ * // -> 'Deleted'
+ *
+ * console.log(span.innerHTML);
+ * // -> '{}'
+ * ```
+ * @category Store hooks
+ * @since v3.0.0
+ */
+export function useDelValuesCallback(
+  storeOrStoreId?: StoreOrStoreId,
+  then?: (store: Store) => void,
+  thenDeps?: React.DependencyList,
+): Callback;
+
+/**
+ * The useDelValueCallback hook returns a callback that can be used to remove a
+ * single Value from a Store.
+ *
+ * This hook is useful, for example, when creating an event handler that will
+ * delete data in a Store.
+ *
+ * For convenience, you can optionally provide a `then` function (with its own
+ * set of dependencies) which will be called just after the Store has been
+ * updated. This is a useful place to call the addCheckpoint method, for
+ * example, if you wish to add the deletion to your application's undo stack.
+ *
+ * The Store to which the callback will make the deletion (indicated by the
+ * hook's `storeOrStoreId` parameter) is always automatically used as a hook
+ * dependency for the callback.
+ *
+ * @param valueId The Id of the Value in the Store.
+ * @param storeOrStoreId The Store to be updated: omit for the default context
+ * Store, provide an Id for a named context Store, or provide an explicit
+ * reference.
+ * @param then A function which is called after the deletion, with a reference
+ * to the Store.
+ * @param thenDeps An optional array of dependencies for the `then` function,
+ * which, if any change, result in the regeneration of the callback. This
+ * parameter defaults to an empty array.
+ * @returns A callback for subsequent use.
+ * @example
+ * This example uses the useDelValueCallback hook to create an event handler
+ * which deletes from the Store when the `span` element is clicked.
+ *
+ * ```jsx
+ * const store = createStore().setValues({open: true, employees: 3});
+ * const App = () => {
+ *   const handleClick = useDelValueCallback('open', store, () =>
+ *     console.log('Deleted'),
+ *   );
+ *   return (
+ *     <span id="span" onClick={handleClick}>
+ *       {JSON.stringify(useValues(store))}
+ *     </span>
+ *   );
+ * };
+ *
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
+ * const span = app.querySelector('span');
+ * console.log(span.innerHTML);
+ * // -> '{"open":true,"employees":3}'
+ *
+ * // User clicks the <span> element:
+ * // -> span MouseEvent('click', {bubbles: true})
+ * // -> 'Deleted'
+ *
+ * console.log(span.innerHTML);
+ * // -> '{"employees":3}'
+ * ```
+ * @category Store hooks
+ * @since v3.0.0
+ */
+export function useDelValueCallback(
+  valueId: Id,
+  storeOrStoreId?: StoreOrStoreId,
+  then?: (store: Store) => void,
+  thenDeps?: React.DependencyList,
+): Callback;
+
 /**
  * The useTablesListener hook registers a listener function with a Store that
- * will be called whenever data in it changes.
+ * will be called whenever tabular data in it changes.
  *
  * This hook is useful for situations where a component needs to register its
  * own specific listener to do more than simply tracking the value (which is
@@ -1879,8 +2511,8 @@ export function useDelCellCallback(
  * for you: when the listener changes (per its `listenerDeps` dependencies) or
  * the component unmounts, the listener on the underlying Store will be deleted.
  *
- * @param listener The function that will be called whenever data in the Store
- * changes.
+ * @param listener The function that will be called whenever tabular data in the
+ * Store changes.
  * @param listenerDeps An optional array of dependencies for the `listener`
  * function, which, if any change, result in the re-registration of the
  * listener. This parameter defaults to an empty array.
@@ -1907,14 +2539,15 @@ export function useDelCellCallback(
  *
  * const store = createStore().setTables({pets: {fido: {color: 'brown'}}});
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App store={store} />); // !act
  * console.log(store.getListenerStats().tables);
  * // -> 1
  *
  * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
  * // -> 'Tables changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * console.log(store.getListenerStats().tables);
  * // -> 0
  * ```
@@ -1969,14 +2602,15 @@ export function useTablesListener(
  *
  * const store = createStore().setTables({pets: {fido: {color: 'brown'}}});
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App store={store} />); // !act
  * console.log(store.getListenerStats().tableIds);
  * // -> 1
  *
  * store.setTable('species', {dog: {price: 5}}); // !act
  * // -> 'Table Ids changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * console.log(store.getListenerStats().tableIds);
  * // -> 0
  * ```
@@ -2034,14 +2668,15 @@ export function useTableIdsListener(
  *
  * const store = createStore().setTables({pets: {fido: {color: 'brown'}}});
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App store={store} />); // !act
  * console.log(store.getListenerStats().table);
  * // -> 1
  *
  * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
  * // -> 'Table changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * console.log(store.getListenerStats().table);
  * // -> 0
  * ```
@@ -2100,14 +2735,15 @@ export function useTableListener(
  *
  * const store = createStore().setTables({pets: {fido: {color: 'brown'}}});
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App store={store} />); // !act
  * console.log(store.getListenerStats().rowIds);
  * // -> 1
  *
  * store.setRow('pets', 'felix', {color: 'black'}); // !act
  * // -> 'Row Ids changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * console.log(store.getListenerStats().rowIds);
  * // -> 0
  * ```
@@ -2177,14 +2813,15 @@ export function useRowIdsListener(
  *   },
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App store={store} />); // !act
  * console.log(store.getListenerStats().sortedRowIds);
  * // -> 1
  *
  * store.setRow('pets', 'cujo', {species: 'wolf'}); // !act
  * // -> 'Sorted Row Ids changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * console.log(store.getListenerStats().sortedRowIds);
  * // -> 0
  * ```
@@ -2238,7 +2875,228 @@ export function useSortedRowIdsListener(
  * default context Store, provide an Id for a named context Store, or provide an
  * explicit reference.
  * @example
- * This example uses the useRowListener hook to create a listener that is
+ * This example uses the useRowListener hook to create a listener that is
+ * scoped to a single component. When the component is unmounted, the listener
+ * is removed from the Store.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => {
+ *   useRowListener('pets', 'fido', () => console.log('Row changed'));
+ *   return <span>App</span>;
+ * };
+ *
+ * const store = createStore().setTables({pets: {fido: {color: 'brown'}}});
+ * const app = document.createElement('div');
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App store={store} />); // !act
+ * console.log(store.getListenerStats().row);
+ * // -> 1
+ *
+ * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
+ * // -> 'Row changed'
+ *
+ * root.unmount(); // !act
+ * console.log(store.getListenerStats().row);
+ * // -> 0
+ * ```
+ * @category Store hooks
+ */
+export function useRowListener(
+  tableId: IdOrNull,
+  rowId: IdOrNull,
+  listener: RowListener,
+  listenerDeps?: React.DependencyList,
+  mutator?: boolean,
+  storeOrStoreId?: StoreOrStoreId,
+): void;
+
+/**
+ * The useCellIdsListener hook registers a listener function with a Store that
+ * will be called whenever the Cell Ids in a Row change.
+ *
+ * This hook is useful for situations where a component needs to register its
+ * own specific listener to do more than simply tracking the value (which is
+ * more easily done with the useCellIds hook).
+ *
+ * You can either listen to a single Row (by specifying the Table Id and Row Id
+ * as the method's first two parameters) or changes to any Row (by providing
+ * `null` wildcards).
+ *
+ * Both, either, or neither of the `tableId` and `rowId` parameters can be
+ * wildcarded with `null`. You can listen to a specific Row in a specific Table,
+ * any Row in a specific Table, a specific Row in any Table, or any Row in any
+ * Table.
+ *
+ * Unlike the addCellIdsListener method, which returns a listener Id and
+ * requires you to remove it manually, the useCellIdsListener hook manages this
+ * lifecycle for you: when the listener changes (per its `listenerDeps`
+ * dependencies) or the component unmounts, the listener on the underlying Store
+ * will be deleted.
+ *
+ * @param tableId The Id of the Table to listen to, or `null` as a wildcard.
+ * @param rowId The Id of the Row to listen to, or `null` as a wildcard.
+ * @param listener The function that will be called whenever the Cell Ids in the
+ * Row change.
+ * @param listenerDeps An optional array of dependencies for the `listener`
+ * function, which, if any change, result in the re-registration of the
+ * listener. This parameter defaults to an empty array.
+ * @param mutator An optional boolean that indicates that the listener mutates
+ * Store data.
+ * @param storeOrStoreId The Store to register the listener with: omit for the
+ * default context Store, provide an Id for a named context Store, or provide an
+ * explicit reference.
+ * @example
+ * This example uses the useCellIdsListener hook to create a listener that is
+ * scoped to a single component. When the component is unmounted, the listener
+ * is removed from the Store.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => {
+ *   useCellIdsListener('pets', 'fido', () =>
+ *     console.log('Cell Ids changed'),
+ *   );
+ *   return <span>App</span>;
+ * };
+ *
+ * const store = createStore().setTables({pets: {fido: {color: 'brown'}}});
+ * const app = document.createElement('div');
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App store={store} />); // !act
+ * console.log(store.getListenerStats().cellIds);
+ * // -> 1
+ *
+ * store.setCell('pets', 'fido', 'species', 'dog'); // !act
+ * // -> 'Cell Ids changed'
+ *
+ * root.unmount(); // !act
+ * console.log(store.getListenerStats().cellIds);
+ * // -> 0
+ * ```
+ * @category Store hooks
+ */
+export function useCellIdsListener(
+  tableId: IdOrNull,
+  rowId: IdOrNull,
+  listener: CellIdsListener,
+  listenerDeps?: React.DependencyList,
+  mutator?: boolean,
+  storeOrStoreId?: StoreOrStoreId,
+): void;
+
+/**
+ * The useCellListener hook registers a listener function with a Store that will
+ * be called whenever data in a Cell changes.
+ *
+ * This hook is useful for situations where a component needs to register its
+ * own specific listener to do more than simply tracking the value (which is
+ * more easily done with the useCell hook).
+ *
+ * You can either listen to a single Cell (by specifying the Table Id, Row Id,
+ * and Cell Id as the method's first three parameters) or changes to any Cell
+ * (by providing `null` wildcards).
+ *
+ * All, some, or none of the `tableId`, `rowId`, and `cellId` parameters can be
+ * wildcarded with `null`. You can listen to a specific Cell in a specific Row
+ * in a specific Table, any Cell in any Row in any Table, for example - or every
+ * other combination of wildcards.
+ *
+ * Unlike the addCellListener method, which returns a listener Id and requires
+ * you to remove it manually, the useCellListener hook manages this lifecycle
+ * for you: when the listener changes (per its `listenerDeps` dependencies) or
+ * the component unmounts, the listener on the underlying Store will be deleted.
+ *
+ * @param tableId The Id of the Table to listen to, or `null` as a wildcard.
+ * @param rowId The Id of the Row to listen to, or `null` as a wildcard.
+ * @param cellId The Id of the Cell to listen to, or `null` as a wildcard.
+ * @param listener The function that will be called whenever data in the Cell
+ * changes.
+ * @param listenerDeps An optional array of dependencies for the `listener`
+ * function, which, if any change, result in the re-registration of the
+ * listener. This parameter defaults to an empty array.
+ * @param mutator An optional boolean that indicates that the listener mutates
+ * Store data.
+ * @param storeOrStoreId The Store to register the listener with: omit for the
+ * default context Store, provide an Id for a named context Store, or provide an
+ * explicit reference.
+ * @example
+ * This example uses the useCellListener hook to create a listener that is
+ * scoped to a single component. When the component is unmounted, the listener
+ * is removed from the Store.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => {
+ *   useCellListener('pets', 'fido', 'color', () =>
+ *     console.log('Cell changed'),
+ *   );
+ *   return <span>App</span>;
+ * };
+ *
+ * const store = createStore().setTables({pets: {fido: {color: 'brown'}}});
+ * const app = document.createElement('div');
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App store={store} />); // !act
+ * console.log(store.getListenerStats().cell);
+ * // -> 1
+ *
+ * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
+ * // -> 'Cell changed'
+ *
+ * root.unmount(); // !act
+ * console.log(store.getListenerStats().cell);
+ * // -> 0
+ * ```
+ * @category Store hooks
+ */
+export function useCellListener(
+  tableId: IdOrNull,
+  rowId: IdOrNull,
+  cellId: IdOrNull,
+  listener: CellListener,
+  listenerDeps?: React.DependencyList,
+  mutator?: boolean,
+  storeOrStoreId?: StoreOrStoreId,
+): void;
+
+/**
+ * The useValuesListener hook registers a listener function with a Store that
+ * will be called whenever keyed value data in it changes.
+ *
+ * This hook is useful for situations where a component needs to register its
+ * own specific listener to do more than simply tracking the value (which is
+ * more easily done with the useValues hook).
+ *
+ * Unlike the addValuesListener method, which returns a listener Id and requires
+ * you to remove it manually, the useValuesListener hook manages this lifecycle
+ * for you: when the listener changes (per its `listenerDeps` dependencies) or
+ * the component unmounts, the listener on the underlying Store will be deleted.
+ *
+ * @param listener The function that will be called whenever keyed value data in
+ * the Store changes.
+ * @param listenerDeps An optional array of dependencies for the `listener`
+ * function, which, if any change, result in the re-registration of the
+ * listener. This parameter defaults to an empty array.
+ * @param mutator An optional boolean that indicates that the listener mutates
+ * Store data.
+ * @param storeOrStoreId The Store to register the listener with: omit for the
+ * default context Store, provide an Id for a named context Store, or provide an
+ * explicit reference.
+ * @example
+ * This example uses the useValuesListener hook to create a listener that is
  * scoped to a single component. When the component is unmounted, the listener
  * is removed from the Store.
  *
@@ -2249,61 +3107,50 @@ export function useSortedRowIdsListener(
  *   </Provider>
  * );
  * const Pane = () => {
- *   useRowListener('pets', 'fido', () => console.log('Row changed'));
+ *   useValuesListener(() => console.log('Values changed'));
  *   return <span>App</span>;
  * };
  *
- * const store = createStore().setTables({pets: {fido: {color: 'brown'}}});
+ * const store = createStore().setValues({open: true});
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
- * console.log(store.getListenerStats().row);
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App store={store} />); // !act
+ * console.log(store.getListenerStats().values);
  * // -> 1
  *
- * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
- * // -> 'Row changed'
+ * store.setValue('open', false); // !act
+ * // -> 'Values changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
- * console.log(store.getListenerStats().row);
+ * root.unmount(); // !act
+ * console.log(store.getListenerStats().values);
  * // -> 0
  * ```
  * @category Store hooks
+ * @since v3.0.0
  */
-export function useRowListener(
-  tableId: IdOrNull,
-  rowId: IdOrNull,
-  listener: RowListener,
+export function useValuesListener(
+  listener: ValuesListener,
   listenerDeps?: React.DependencyList,
   mutator?: boolean,
   storeOrStoreId?: StoreOrStoreId,
 ): void;
 
 /**
- * The useCellIdsListener hook registers a listener function with a Store that
- * will be called whenever the Cell Ids in a Row change.
+ * The useValueIdsListener hook registers a listener function with a Store that
+ * will be called whenever the Value Ids in it change.
  *
  * This hook is useful for situations where a component needs to register its
  * own specific listener to do more than simply tracking the value (which is
- * more easily done with the useCellIds hook).
- *
- * You can either listen to a single Row (by specifying the Table Id and Row Id
- * as the method's first two parameters) or changes to any Row (by providing
- * `null` wildcards).
- *
- * Both, either, or neither of the `tableId` and `rowId` parameters can be
- * wildcarded with `null`. You can listen to a specific Row in a specific Table,
- * any Row in a specific Table, a specific Row in any Table, or any Row in any
- * Table.
+ * more easily done with the useValueIds hook).
  *
- * Unlike the addCellIdsListener method, which returns a listener Id and
- * requires you to remove it manually, the useCellIdsListener hook manages this
+ * Unlike the addValueIdsListener method, which returns a listener Id and
+ * requires you to remove it manually, the useValueIdsListener hook manages this
  * lifecycle for you: when the listener changes (per its `listenerDeps`
  * dependencies) or the component unmounts, the listener on the underlying Store
  * will be deleted.
  *
- * @param tableId The Id of the Table to listen to, or `null` as a wildcard.
- * @param rowId The Id of the Row to listen to, or `null` as a wildcard.
- * @param listener The function that will be called whenever the Cell Ids in the
- * Row change.
+ * @param listener The function that will be called whenever the Value Ids in
+ * the Store change.
  * @param listenerDeps An optional array of dependencies for the `listener`
  * function, which, if any change, result in the re-registration of the
  * listener. This parameter defaults to an empty array.
@@ -2313,7 +3160,7 @@ export function useRowListener(
  * default context Store, provide an Id for a named context Store, or provide an
  * explicit reference.
  * @example
- * This example uses the useCellIdsListener hook to create a listener that is
+ * This example uses the useValueIdsListener hook to create a listener that is
  * scoped to a single component. When the component is unmounted, the listener
  * is removed from the Store.
  *
@@ -2324,62 +3171,52 @@ export function useRowListener(
  *   </Provider>
  * );
  * const Pane = () => {
- *   useCellIdsListener('pets', 'fido', () =>
- *     console.log('Cell Ids changed'),
- *   );
+ *   useValueIdsListener(() => console.log('Value Ids changed'));
  *   return <span>App</span>;
  * };
  *
- * const store = createStore().setTables({pets: {fido: {color: 'brown'}}});
+ * const store = createStore().setValues({open: true});
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
- * console.log(store.getListenerStats().cellIds);
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App store={store} />); // !act
+ * console.log(store.getListenerStats().valueIds);
  * // -> 1
  *
- * store.setCell('pets', 'fido', 'species', 'dog'); // !act
- * // -> 'Cell Ids changed'
+ * store.setValue('employees', 3); // !act
+ * // -> 'Value Ids changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
- * console.log(store.getListenerStats().cellIds);
+ * root.unmount(); // !act
+ * console.log(store.getListenerStats().valueIds);
  * // -> 0
  * ```
  * @category Store hooks
+ * @since v3.0.0
  */
-export function useCellIdsListener(
-  tableId: IdOrNull,
-  rowId: IdOrNull,
-  listener: CellIdsListener,
+export function useValueIdsListener(
+  listener: ValueIdsListener,
   listenerDeps?: React.DependencyList,
   mutator?: boolean,
   storeOrStoreId?: StoreOrStoreId,
 ): void;
 
 /**
- * The useCellListener hook registers a listener function with a Store that will
- * be called whenever data in a Cell changes.
+ * The useValueListener hook registers a listener function with a Store that
+ * will be called whenever data in a Value changes.
  *
  * This hook is useful for situations where a component needs to register its
  * own specific listener to do more than simply tracking the value (which is
- * more easily done with the useCell hook).
- *
- * You can either listen to a single Cell (by specifying the Table Id, Row Id,
- * and Cell Id as the method's first three parameters) or changes to any Cell
- * (by providing `null` wildcards).
+ * more easily done with the useValue hook).
  *
- * All, some, or none of the `tableId`, `rowId`, and `cellId` parameters can be
- * wildcarded with `null`. You can listen to a specific Cell in a specific Row
- * in a specific Table, any Cell in any Row in any Table, for example - or every
- * other combination of wildcards.
+ * You can either listen to a single Value (by specifying its Id as the method's
+ * first parameter) or changes to any Value (by providing a `null` wildcard).
  *
- * Unlike the addCellListener method, which returns a listener Id and requires
- * you to remove it manually, the useCellListener hook manages this lifecycle
+ * Unlike the addValueListener method, which returns a listener Id and requires
+ * you to remove it manually, the useValueListener hook manages this lifecycle
  * for you: when the listener changes (per its `listenerDeps` dependencies) or
  * the component unmounts, the listener on the underlying Store will be deleted.
  *
- * @param tableId The Id of the Table to listen to, or `null` as a wildcard.
- * @param rowId The Id of the Row to listen to, or `null` as a wildcard.
- * @param cellId The Id of the Cell to listen to, or `null` as a wildcard.
- * @param listener The function that will be called whenever data in the Cell
+ * @param valueId The Id of the Value to listen to, or `null` as a wildcard.
+ * @param listener The function that will be called whenever data in the Value
  * changes.
  * @param listenerDeps An optional array of dependencies for the `listener`
  * function, which, if any change, result in the re-registration of the
@@ -2390,7 +3227,7 @@ export function useCellIdsListener(
  * default context Store, provide an Id for a named context Store, or provide an
  * explicit reference.
  * @example
- * This example uses the useCellListener hook to create a listener that is
+ * This example uses the useValueListener hook to create a listener that is
  * scoped to a single component. When the component is unmounted, the listener
  * is removed from the Store.
  *
@@ -2401,32 +3238,30 @@ export function useCellIdsListener(
  *   </Provider>
  * );
  * const Pane = () => {
- *   useCellListener('pets', 'fido', 'color', () =>
- *     console.log('Cell changed'),
- *   );
+ *   useValueListener('open', () => console.log('Value changed'));
  *   return <span>App</span>;
  * };
  *
- * const store = createStore().setTables({pets: {fido: {color: 'brown'}}});
+ * const store = createStore().setValues({open: true});
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
- * console.log(store.getListenerStats().cell);
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App store={store} />); // !act
+ * console.log(store.getListenerStats().value);
  * // -> 1
  *
- * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
- * // -> 'Cell changed'
+ * store.setValue('open', false); // !act
+ * // -> 'Value changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
- * console.log(store.getListenerStats().cell);
+ * root.unmount(); // !act
+ * console.log(store.getListenerStats().value);
  * // -> 0
  * ```
  * @category Store hooks
+ * @since v3.0.0
  */
-export function useCellListener(
-  tableId: IdOrNull,
-  rowId: IdOrNull,
-  cellId: IdOrNull,
-  listener: CellListener,
+export function useValueListener(
+  valueId: IdOrNull,
+  listener: ValueListener,
   listenerDeps?: React.DependencyList,
   mutator?: boolean,
   storeOrStoreId?: StoreOrStoreId,
@@ -2484,10 +3319,11 @@ export function useCellListener(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App />); // !act
  * // -> 'Metrics created'
  *
- * ReactDOM.render(<App />, app); // !act
+ * root.render(<App />); // !act
  * // No second Metrics creation
  *
  * console.log(app.innerHTML);
@@ -2521,13 +3357,14 @@ export function useCellListener(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App tableToCount="pets" />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App tableToCount="pets" />); // !act
  * // -> 'Count created for pets table'
  *
  * console.log(app.innerHTML);
  * // -> '<span>1</span>'
  *
- * ReactDOM.render(<App tableToCount="species" />, app); // !act
+ * root.render(<App tableToCount="species" />); // !act
  * // -> 'Count created for species table'
  *
  * console.log(app.innerHTML);
@@ -2574,7 +3411,7 @@ export function useCreateMetrics(
  *
  * const metrics = createMetrics(createStore());
  * const app = document.createElement('div');
- * ReactDOM.render(<App metrics={metrics} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App metrics={metrics} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>0</span>'
  * ```
@@ -2596,7 +3433,7 @@ export function useCreateMetrics(
  *
  * const metrics = createMetrics(createStore());
  * const app = document.createElement('div');
- * ReactDOM.render(<App metrics={metrics} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App metrics={metrics} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>0</span>'
  * ```
@@ -2640,7 +3477,7 @@ export function useMetrics(id?: Id): Metrics | undefined;
  * const App = () => <span>{useMetric('highestPrice', metrics)}</span>;
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>5</span>'
  *
@@ -2669,7 +3506,7 @@ export function useMetrics(id?: Id): Metrics | undefined;
  * ).setMetricDefinition('highestPrice', 'species', 'max', 'price');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App metrics={metrics} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App metrics={metrics} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>5</span>'
  * ```
@@ -2694,7 +3531,7 @@ export function useMetrics(id?: Id): Metrics | undefined;
  * ).setMetricDefinition('highestPrice', 'species', 'max', 'price');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App metrics={metrics} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App metrics={metrics} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>5</span>'
  * ```
@@ -2756,14 +3593,15 @@ export function useMetric(
  * metrics.setMetricDefinition('highestPrice', 'species', 'max', 'price');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App metrics={metrics} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App metrics={metrics} />); // !act
  * console.log(metrics.getListenerStats().metric);
  * // -> 1
  *
  * store.setCell('species', 'horse', 'price', 20); // !act
  * // -> 'Metric changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * console.log(metrics.getListenerStats().metric);
  * // -> 0
  * ```
@@ -2833,10 +3671,11 @@ export function useMetricListener(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App />); // !act
  * // -> 'Indexes created'
  *
- * ReactDOM.render(<App />, app); // !act
+ * root.render(<App />); // !act
  * // No second Indexes creation
  *
  * console.log(app.innerHTML);
@@ -2873,13 +3712,14 @@ export function useMetricListener(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App cellToIndex="species" />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App cellToIndex="species" />); // !act
  * // -> 'Index created for species cell'
  *
  * console.log(app.innerHTML);
  * // -> '<span>["dog","cat"]</span>'
  *
- * ReactDOM.render(<App cellToIndex="color" />, app); // !act
+ * root.render(<App cellToIndex="color" />); // !act
  * // -> 'Index created for color cell'
  *
  * console.log(app.innerHTML);
@@ -2926,7 +3766,7 @@ export function useCreateIndexes(
  *
  * const indexes = createIndexes(createStore());
  * const app = document.createElement('div');
- * ReactDOM.render(<App indexes={indexes} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App indexes={indexes} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>0</span>'
  * ```
@@ -2948,7 +3788,7 @@ export function useCreateIndexes(
  *
  * const indexes = createIndexes(createStore());
  * const app = document.createElement('div');
- * ReactDOM.render(<App indexes={indexes} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App indexes={indexes} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>0</span>'
  * ```
@@ -2994,7 +3834,7 @@ export function useIndexes(id?: Id): Indexes | undefined;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["dog","cat"]</span>'
  *
@@ -3023,7 +3863,7 @@ export function useIndexes(id?: Id): Indexes | undefined;
  * ).setIndexDefinition('bySpecies', 'pets', 'species');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App indexes={indexes} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App indexes={indexes} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["dog","cat"]</span>'
  * ```
@@ -3050,7 +3890,7 @@ export function useIndexes(id?: Id): Indexes | undefined;
  * ).setIndexDefinition('bySpecies', 'pets', 'species');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App indexes={indexes} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App indexes={indexes} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["dog","cat"]</span>'
  * ```
@@ -3103,7 +3943,7 @@ export function useSliceIds(
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["fido","cujo"]</span>'
  *
@@ -3134,7 +3974,7 @@ export function useSliceIds(
  * ).setIndexDefinition('bySpecies', 'pets', 'species');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App indexes={indexes} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App indexes={indexes} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["fido","cujo"]</span>'
  * ```
@@ -3163,7 +4003,7 @@ export function useSliceIds(
  * ).setIndexDefinition('bySpecies', 'pets', 'species');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App indexes={indexes} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App indexes={indexes} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["fido","cujo"]</span>'
  * ```
@@ -3227,14 +4067,15 @@ export function useSliceRowIds(
  * indexes.setIndexDefinition('bySpecies', 'pets', 'species');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App indexes={indexes} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App indexes={indexes} />); // !act
  * console.log(indexes.getListenerStats().sliceIds);
  * // -> 1
  *
  * store.setRow('pets', 'lowly', {species: 'worm'}); // !act
  * // -> 'Slice Ids changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * console.log(indexes.getListenerStats().sliceIds);
  * // -> 0
  * ```
@@ -3307,14 +4148,15 @@ export function useSliceIdsListener(
  * indexes.setIndexDefinition('bySpecies', 'pets', 'species');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App indexes={indexes} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App indexes={indexes} />); // !act
  * console.log(indexes.getListenerStats().sliceRowIds);
  * // -> 1
  *
  * store.setRow('pets', 'toto', {species: 'dog'}); // !act
  * // -> 'Slice Row Ids changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * console.log(indexes.getListenerStats().sliceRowIds);
  * // -> 0
  * ```
@@ -3388,10 +4230,11 @@ export function useSliceRowIdsListener(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App />); // !act
  * // -> 'Relationships created'
  *
- * ReactDOM.render(<App />, app); // !act
+ * root.render(<App />); // !act
  * // No second Relationships creation
  *
  * console.log(app.innerHTML);
@@ -3433,13 +4276,14 @@ export function useSliceRowIdsListener(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App remoteTableAndCellToLink="species" />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App remoteTableAndCellToLink="species" />); // !act
  * // -> 'Relationship created to species'
  *
  * console.log(app.innerHTML);
  * // -> '<span>dog</span>'
  *
- * ReactDOM.render(<App remoteTableAndCellToLink="color" />, app); // !act
+ * root.render(<App remoteTableAndCellToLink="color" />); // !act
  * // -> 'Relationship created to color'
  *
  * console.log(app.innerHTML);
@@ -3490,7 +4334,8 @@ export function useCreateRelationships(
  *
  * const relationships = createRelationships(createStore());
  * const app = document.createElement('div');
- * ReactDOM.render(<App relationships={relationships} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App relationships={relationships} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>0</span>'
  * ```
@@ -3514,7 +4359,8 @@ export function useCreateRelationships(
  *
  * const relationships = createRelationships(createStore());
  * const app = document.createElement('div');
- * ReactDOM.render(<App relationships={relationships} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App relationships={relationships} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>0</span>'
  * ```
@@ -3565,7 +4411,7 @@ export function useRelationships(id?: Id): Relationships | undefined;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>dog</span>'
  *
@@ -3592,7 +4438,8 @@ export function useRelationships(id?: Id): Relationships | undefined;
  * ).setRelationshipDefinition('petSpecies', 'pets', 'species', 'species');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App relationships={relationships} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App relationships={relationships} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>dog</span>'
  * ```
@@ -3617,7 +4464,8 @@ export function useRelationships(id?: Id): Relationships | undefined;
  * ).setRelationshipDefinition('petSpecies', 'pets', 'species', 'species');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App relationships={relationships} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App relationships={relationships} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>dog</span>'
  * ```
@@ -3674,7 +4522,7 @@ export function useRemoteRowId(
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["fido","cujo"]</span>'
  *
@@ -3703,7 +4551,8 @@ export function useRemoteRowId(
  * ).setRelationshipDefinition('petSpecies', 'pets', 'species', 'species');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App relationships={relationships} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App relationships={relationships} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["fido","cujo"]</span>'
  * ```
@@ -3732,7 +4581,8 @@ export function useRemoteRowId(
  * ).setRelationshipDefinition('petSpecies', 'pets', 'species', 'species');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App relationships={relationships} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App relationships={relationships} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["fido","cujo"]</span>'
  * ```
@@ -3791,7 +4641,7 @@ export function useLocalRowIds(
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["fido","felix","cujo"]</span>'
  *
@@ -3823,7 +4673,8 @@ export function useLocalRowIds(
  * ).setRelationshipDefinition('petSequence', 'pets', 'pets', 'next');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App relationships={relationships} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App relationships={relationships} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["fido","felix","cujo"]</span>'
  * ```
@@ -3854,7 +4705,8 @@ export function useLocalRowIds(
  * ).setRelationshipDefinition('petSequence', 'pets', 'pets', 'next');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App relationships={relationships} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App relationships={relationships} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["fido","felix","cujo"]</span>'
  * ```
@@ -3933,14 +4785,15 @@ export function useLinkedRowIds(
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App relationships={relationships} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App relationships={relationships} />); // !act
  * console.log(relationships.getListenerStats().remoteRowId);
  * // -> 1
  *
  * store.setCell('pets', 'cujo', 'species', 'wolf'); // !act
  * // -> 'Remote Row Id changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * console.log(relationships.getListenerStats().remoteRowId);
  * // -> 0
  * ```
@@ -4021,14 +4874,15 @@ export function useRemoteRowIdListener(
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App relationships={relationships} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App relationships={relationships} />); // !act
  * console.log(relationships.getListenerStats().localRowIds);
  * // -> 1
  *
  * store.setRow('pets', 'toto', {species: 'dog'}); // !act
  * // -> 'Local Row Ids changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * console.log(relationships.getListenerStats().localRowIds);
  * // -> 0
  * ```
@@ -4105,7 +4959,8 @@ export function useLocalRowIdsListener(
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App relationships={relationships} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App relationships={relationships} />); // !act
  * console.log(relationships.getListenerStats().linkedRowIds);
  * // -> 1
  *
@@ -4113,7 +4968,7 @@ export function useLocalRowIdsListener(
  * store.setCell('pets', 'cujo', 'next', 'toto'); // !act
  * // -> 'Linked Row Ids changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * console.log(relationships.getListenerStats().linkedRowIds);
  * // -> 0
  * ```
@@ -4188,10 +5043,11 @@ export function useLinkedRowIdsListener(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App />); // !act
  * // -> 'Queries created'
  *
- * ReactDOM.render(<App />, app); // !act
+ * root.render(<App />); // !act
  * // No second Queries creation
  *
  * console.log(app.innerHTML);
@@ -4229,10 +5085,11 @@ export function useLinkedRowIdsListener(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App />); // !act
  * // -> 'Queries created'
  *
- * ReactDOM.render(<App />, app); // !act
+ * root.render(<App />); // !act
  * // No second Queries creation
  *
  * console.log(app.innerHTML);
@@ -4280,7 +5137,7 @@ export function useCreateQueries(
  *
  * const queries = createQueries(createStore());
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>0</span>'
  * ```
@@ -4302,7 +5159,7 @@ export function useCreateQueries(
  *
  * const queries = createQueries(createStore());
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>0</span>'
  * ```
@@ -4356,7 +5213,7 @@ export function useQueries(id?: Id): Queries | undefined;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>{"fido":{"color":"brown"},"cujo":{"color":"black"}}</span>'
  *
@@ -4389,7 +5246,7 @@ export function useQueries(id?: Id): Queries | undefined;
  *   where('species', 'dog');
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>{"fido":{"color":"brown"},"cujo":{"color":"black"}}</span>'
  * ```
@@ -4419,7 +5276,7 @@ export function useQueries(id?: Id): Queries | undefined;
  *   where('species', 'dog');
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>{"fido":{"color":"brown"},"cujo":{"color":"black"}}</span>'
  * ```
@@ -4450,8 +5307,8 @@ export function useResultTable(
  * @param queryId The Id of the query.
  * @param queriesOrQueriesId The Queries object to be accessed: omit for the
  * default context Queries object, provide an Id for a named context Queries
- * object, or provide an explicit reference.
- * See the addResultRowIdsListener method for more details.
+ * object, or provide an explicit reference. See the addResultRowIdsListener
+ * method for more details.
  * @returns An array of the Ids of every Row in the result of the query.
  * @example
  * This example creates a Queries object outside the application, which is used
@@ -4477,7 +5334,7 @@ export function useResultTable(
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["fido","cujo"]</span>'
  *
@@ -4510,7 +5367,7 @@ export function useResultTable(
  *   where('species', 'dog');
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["fido","cujo"]</span>'
  * ```
@@ -4540,7 +5397,7 @@ export function useResultTable(
  *   where('species', 'dog');
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["fido","cujo"]</span>'
  * ```
@@ -4613,7 +5470,7 @@ export function useResultRowIds(
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["cujo","fido"]</span>'
  *
@@ -4648,7 +5505,7 @@ export function useResultRowIds(
  *   where('species', 'dog');
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["cujo","fido"]</span>'
  * ```
@@ -4689,7 +5546,7 @@ export function useResultRowIds(
  *   where('species', 'dog');
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["cujo","fido"]</span>'
  * ```
@@ -4706,7 +5563,7 @@ export function useResultSortedRowIds(
 ): Ids;
 
 /**
- * The useResultRow hook returns an object containing the entire data of a
+ * The useResultRow hook returns an object containing the data of a
  * single Row in the result Table of the given query, and registers a listener
  * so that any changes to that Row will cause a re-render.
  *
@@ -4752,7 +5609,7 @@ export function useResultSortedRowIds(
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>{"color":"brown"}</span>'
  *
@@ -4785,7 +5642,7 @@ export function useResultSortedRowIds(
  *   where('species', 'dog');
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>{"color":"brown"}</span>'
  * ```
@@ -4817,7 +5674,7 @@ export function useResultSortedRowIds(
  *   where('species', 'dog');
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>{"color":"brown"}</span>'
  * ```
@@ -4881,7 +5738,7 @@ export function useResultRow(
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["species","color"]</span>'
  *
@@ -4915,7 +5772,7 @@ export function useResultRow(
  *   where('species', 'dog');
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["species","color"]</span>'
  * ```
@@ -4948,7 +5805,7 @@ export function useResultRow(
  *   where('species', 'dog');
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>["species","color"]</span>'
  * ```
@@ -5010,7 +5867,7 @@ export function useResultCellIds(
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>brown</span>'
  *
@@ -5044,7 +5901,7 @@ export function useResultCellIds(
  *   where('species', 'dog');
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>brown</span>'
  * ```
@@ -5075,7 +5932,7 @@ export function useResultCellIds(
  *   where('species', 'dog');
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>brown</span>'
  * ```
@@ -5145,14 +6002,15 @@ export function useResultCell(
  *   ({select}) => select('color'),
  * );
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App queries={queries} />); // !act
  * console.log(queries.getListenerStats().table);
  * // -> 1
  *
  * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
  * // -> 'Result table changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * console.log(queries.getListenerStats().table);
  * // -> 0
  * ```
@@ -5222,14 +6080,15 @@ export function useResultTableListener(
  *   ({select}) => select('color'),
  * );
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App queries={queries} />); // !act
  * console.log(queries.getListenerStats().rowIds);
  * // -> 1
  *
  * store.setRow('pets', 'rex', {species: 'dog', color: 'tan'}); // !act
  * // -> 'Result Row Ids changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * console.log(queries.getListenerStats().rowIds);
  * // -> 0
  * ```
@@ -5306,14 +6165,15 @@ export function useResultRowIdsListener(
  *   ({select}) => select('color'),
  * );
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App queries={queries} />); // !act
  * console.log(queries.getListenerStats().sortedRowIds);
  * // -> 1
  *
  * store.setRow('pets', 'cujo', {color: 'tan'}); // !act
  * // -> 'Sorted result Row Ids changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * console.log(queries.getListenerStats().sortedRowIds);
  * // -> 0
  * ```
@@ -5393,14 +6253,15 @@ export function useResultSortedRowIdsListener(
  *   ({select}) => select('color'),
  * );
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App queries={queries} />); // !act
  * console.log(queries.getListenerStats().row);
  * // -> 1
  *
  * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
  * // -> 'Result row changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * console.log(queries.getListenerStats().row);
  * // -> 0
  * ```
@@ -5477,14 +6338,15 @@ export function useResultRowListener(
  *   },
  * );
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App queries={queries} />); // !act
  * console.log(queries.getListenerStats().cellIds);
  * // -> 1
  *
  * store.setCell('pets', 'fido', 'legs', 4); // !act
  * // -> 'Result cell Ids changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * console.log(queries.getListenerStats().cellIds);
  * // -> 0
  * ```
@@ -5563,14 +6425,15 @@ export function useResultCellIdsListener(
  *   ({select}) => select('color'),
  * );
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App queries={queries} />); // !act
  * console.log(queries.getListenerStats().cell);
  * // -> 1
  *
  * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
  * // -> 'Result cell changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * console.log(queries.getListenerStats().cell);
  * // -> 0
  * ```
@@ -5634,10 +6497,11 @@ export function useResultCellListener(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App />); // !act
  * // -> 'Checkpoints created'
  *
- * ReactDOM.render(<App />, app); // !act
+ * root.render(<App />); // !act
  * // No second Checkpoints creation
  *
  * console.log(app.innerHTML);
@@ -5665,13 +6529,14 @@ export function useResultCellListener(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App size={20} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App size={20} />); // !act
  * // -> 'Checkpoints created, size 20'
  *
  * console.log(app.innerHTML);
  * // -> '<span>[[],"0",[]]</span>'
  *
- * ReactDOM.render(<App size={50} />, app); // !act
+ * root.render(<App size={50} />); // !act
  * // -> 'Checkpoints created, size 50'
  *
  * console.log(app.innerHTML);
@@ -5720,7 +6585,8 @@ export function useCreateCheckpoints(
  *
  * const checkpoints = createCheckpoints(createStore());
  * const app = document.createElement('div');
- * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App checkpoints={checkpoints} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>0</span>'
  * ```
@@ -5744,7 +6610,8 @@ export function useCreateCheckpoints(
  *
  * const checkpoints = createCheckpoints(createStore());
  * const app = document.createElement('div');
- * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App checkpoints={checkpoints} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>0</span>'
  * ```
@@ -5787,7 +6654,7 @@ export function useCheckpoints(id?: Id): Checkpoints | undefined;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>[[],"0",[]]</span>'
  *
@@ -5817,7 +6684,8 @@ export function useCheckpoints(id?: Id): Checkpoints | undefined;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App checkpoints={checkpoints} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>[[],"0",[]]</span>'
  * ```
@@ -5841,7 +6709,8 @@ export function useCheckpoints(id?: Id): Checkpoints | undefined;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App checkpoints={checkpoints} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>[[],"0",[]]</span>'
  * ```
@@ -5883,7 +6752,7 @@ export function useCheckpointIds(
  * const App = () => <span>{useCheckpoint('1', checkpoints)}</span>;
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span></span>'
  *
@@ -5910,7 +6779,8 @@ export function useCheckpointIds(
  * ).setCheckpoint('0', 'initial');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App checkpoints={checkpoints} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>initial</span>'
  * ```
@@ -5932,7 +6802,8 @@ export function useCheckpointIds(
  * ).setCheckpoint('0', 'initial');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App checkpoints={checkpoints} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>initial</span>'
  * ```
@@ -6007,7 +6878,7 @@ export function useCheckpoint(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * const span = app.querySelector('span');
  *
  * store.setCell('pets', 'nemo', 'color', 'orange');
@@ -6055,7 +6926,7 @@ export function useSetCheckpointCallback<Parameter>(
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * const span = app.querySelector('span');
  *
  * store.setCell('pets', 'nemo', 'color', 'orange');
@@ -6103,7 +6974,7 @@ export function useGoBackwardCallback(
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * const span = app.querySelector('span');
  *
  * store.setCell('pets', 'nemo', 'color', 'orange');
@@ -6183,7 +7054,7 @@ export function useGoForwardCallback(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * const span = app.querySelector('span');
  *
  * store.setCell('pets', 'nemo', 'color', 'orange');
@@ -6237,7 +7108,7 @@ export function useGoToCallback<Parameter>(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>Nothing to undo</span>'
  *
@@ -6283,7 +7154,7 @@ export function useUndoInformation(
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>Nothing to redo</span>'
  *
@@ -6342,7 +7213,8 @@ export function useRedoInformation(
  * const checkpoints = createCheckpoints(store);
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App checkpoints={checkpoints} />); // !act
  * console.log(checkpoints.getListenerStats().checkpointIds);
  * // -> 1
  *
@@ -6351,7 +7223,7 @@ export function useRedoInformation(
  * checkpoints.addCheckpoint(); // !act
  * // -> 'Checkpoint Ids changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * console.log(checkpoints.getListenerStats().checkpointIds);
  * // -> 0
  * ```
@@ -6414,14 +7286,15 @@ export function useCheckpointIdsListener(
  * const checkpoints = createCheckpoints(store);
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App checkpoints={checkpoints} />); // !act
  * console.log(checkpoints.getListenerStats().checkpoint);
  * // -> 1
  *
  * checkpoints.setCheckpoint('0', 'initial'); // !act
  * // -> 'Checkpoint label changed'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * console.log(checkpoints.getListenerStats().checkpoint);
  * // -> 0
  * ```
@@ -6502,17 +7375,18 @@ export function useCheckpointListener(
  * sessionStorage.setItem('pets', '{"pets":{"fido":{"species":"dog"}}}');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App />); // !act
  * // -> 'Persister created'
  *
  * // ... // !act
- * ReactDOM.render(<App />, app); // !act
+ * root.render(<App />); // !act
  * // No second Persister creation
  *
  * console.log(app.innerHTML);
  * // -> '<span>{\"pets\":{\"fido\":{\"species\":\"dog\"}}}</span>'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * ```
  * @example
  * This example creates a Persister at the top level of a React application. The
@@ -6542,21 +7416,22 @@ export function useCheckpointListener(
  * sessionStorage.setItem('cujoStore', '{"pets":{"cujo":{"species":"dog"}}}');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App sessionKey="fidoStore" />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App sessionKey="fidoStore" />); // !act
  * // -> 'Persister created for session key fidoStore'
  *
  * // ... // !act
  * console.log(app.innerHTML);
  * // -> '<span>{\"pets\":{\"fido\":{\"species\":\"dog\"}}}</span>'
  *
- * ReactDOM.render(<App sessionKey="cujoStore" />, app); // !act
+ * root.render(<App sessionKey="cujoStore" />); // !act
  * // -> 'Persister created for session key cujoStore'
  *
  * // ... // !act
  * console.log(app.innerHTML);
  * // -> '<span>{\"pets\":{\"cujo\":{\"species\":\"dog\"}}}</span>'
  *
- * ReactDOM.unmountComponentAtNode(app); // !act
+ * root.unmount(); // !act
  * ```
  *  @category Persister hooks
  */
@@ -6602,7 +7477,7 @@ export type TablesProps = {
    */
   readonly separator?: ReactElement | string;
   /**
-   * Whether the component should also render the Ids of the Table, and its
+   * Whether the component should also render the Ids of each Table, and its
    * descendent objects, to assist with debugging.
    */
   readonly debugIds?: boolean;
@@ -6742,7 +7617,7 @@ export type RowProps = {
 };
 
 /**
- * RowProps props are used for components that refer to a single Cell in a Row,
+ * CellProps props are used for components that refer to a single Cell in a Row,
  * such as the CellView component.
  *
  * @category Props
@@ -6772,6 +7647,64 @@ export type CellProps = {
   readonly debugIds?: boolean;
 };
 
+/**
+ * ValuesProps props are used for components that refer to all the Values in a
+ * Store, such as the ValuesView component.
+ *
+ * @category Props
+ * @since v3.0.0
+ */
+export type ValuesProps = {
+  /**
+   * The Store to be accessed: omit for the default context Store, provide an Id
+   * for a named context Store, or provide an explicit reference.
+   */
+  readonly store?: StoreOrStoreId;
+  /**
+   * A custom component for rendering each Value in the Store (to override the
+   * default ValueView component).
+   */
+  readonly valueComponent?: ComponentType<ValueProps>;
+  /**
+   * A function for generating extra props for each custom Value component based
+   * on its Id.
+   */
+  readonly getValueComponentProps?: (valueId: Id) => ExtraProps;
+  /**
+   * A component or string to separate each Value component.
+   */
+  readonly separator?: ReactElement | string;
+  /**
+   * Whether the component should also render the Ids of each Value to assist
+   * with debugging.
+   */
+  readonly debugIds?: boolean;
+};
+
+/**
+ * ValueProps props are used for components that refer to a single Value in a
+ * Row, such as the ValueView component.
+ *
+ * @category Props
+ * @since v3.0.0
+ */
+export type ValueProps = {
+  /**
+   * The Id of the Value in the Row to be rendered.
+   */
+  readonly valueId: Id;
+  /**
+   * The Store to be accessed: omit for the default context Store, provide an Id
+   * for a named context Store, or provide an explicit reference.
+   */
+  readonly store?: StoreOrStoreId;
+  /**
+   * Whether the component should also render the Id of the Value to assist with
+   * debugging.
+   */
+  readonly debugIds?: boolean;
+};
+
 /**
  * MetricProps props are used for components that refer to a single Metric in a
  * Metrics object, such as the MetricView component.
@@ -6876,8 +7809,8 @@ export type SliceProps = {
 
 /**
  * RemoteRowProps props are used for components that refer to a single
- * Relationship in a Relationships object, and where you want to render a
- * remote Row based on a local Row, such as in the RemoteRowView component.
+ * Relationship in a Relationships object, and where you want to render a remote
+ * Row based on a local Row, such as in the RemoteRowView component.
  *
  * @category Props
  */
@@ -6958,9 +7891,8 @@ export type LocalRowsProps = {
 
 /**
  * LinkedRowsProps props are used for components that refer to a single
- * Relationship in a Relationships object, and where you want to render a
- * linked list of Rows starting from a first Row, such as the LinkedRowsView
- * component.
+ * Relationship in a Relationships object, and where you want to render a linked
+ * list of Rows starting from a first Row, such as the LinkedRowsView component.
  *
  * @category Props
  */
@@ -7424,7 +8356,8 @@ export type ComponentReturnType = ReactElement<any, any> | null;
  * metrics.setMetricDefinition('highestPrice', 'species', 'max', 'price');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} metrics={metrics} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App store={store} metrics={metrics} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>5,4,5</span>'
  * ```
@@ -7467,7 +8400,8 @@ export type ComponentReturnType = ReactElement<any, any> | null;
  * metrics.setMetricDefinition('highestPrice', 'species', 'max', 'price');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App petStore={petStore} metrics={metrics} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App petStore={petStore} metrics={metrics} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>5,5,2</span>'
  * ```
@@ -7510,7 +8444,7 @@ export function Provider(
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>brown</span>'
  *
@@ -7537,7 +8471,7 @@ export function Provider(
  *
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>color:{brown}</span>'
  * ```
@@ -7560,7 +8494,7 @@ export function Provider(
  *
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span></span>'
  * ```
@@ -7606,7 +8540,7 @@ export function CellView(props: CellProps): ComponentReturnType;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>dog</div>'
  *
@@ -7636,7 +8570,7 @@ export function CellView(props: CellProps): ComponentReturnType;
  *   color: 'walnut',
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>fido:{species:{dog}color:{walnut}}</div>'
  * ```
@@ -7674,7 +8608,7 @@ export function CellView(props: CellProps): ComponentReturnType;
  *   color: 'walnut',
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div><span><b>species</b>: dog</span><span>color: walnut</span></div>'
  * ```
@@ -7731,7 +8665,7 @@ export function RowView(props: RowProps): ComponentReturnType;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>cat/dog</div>'
  *
@@ -7763,7 +8697,7 @@ export function RowView(props: RowProps): ComponentReturnType;
  *   },
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>pets:{felix:{species:{cat}}fido:{species:{dog}}}</div>'
  * ```
@@ -7803,7 +8737,7 @@ export function RowView(props: RowProps): ComponentReturnType;
  *   },
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div><span>felix: cat</span><span><b>fido</b>: dog</span></div>'
  * ```
@@ -7849,7 +8783,7 @@ export function SortedTableView(props: SortedTableProps): ComponentReturnType;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>dog</div>'
  *
@@ -7879,7 +8813,7 @@ export function SortedTableView(props: SortedTableProps): ComponentReturnType;
  *   felix: {species: 'cat'},
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>pets:{fido:{species:{dog}}felix:{species:{cat}}}</div>'
  * ```
@@ -7916,7 +8850,7 @@ export function SortedTableView(props: SortedTableProps): ComponentReturnType;
  *   felix: {species: 'cat'},
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div><span><b>fido</b>: dog</span><span>felix: cat</span></div>'
  * ```
@@ -7925,8 +8859,9 @@ export function SortedTableView(props: SortedTableProps): ComponentReturnType;
 export function TableView(props: TableProps): ComponentReturnType;
 
 /**
- * The TablesView component renders the contents of a Store, and registers a
- * listener so that any changes to that result will cause a re-render.
+ * The TablesView component renders the tabular contents of a Store, and
+ * registers a listener so that any changes to that result will cause a
+ * re-render.
  *
  * The component's props can identify which Store to render - either the default
  * context Store, a named context Store, or an explicit reference.
@@ -7952,18 +8887,18 @@ export function TableView(props: TableProps): ComponentReturnType;
  * const store = createStore().setTables({pets: {fido: {species: 'dog'}}});
  * const App = () => (
  *   <div>
- *     <TablesView store={store} />
+ *     <TablesView store={store} separator="/" />
  *   </div>
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>dog</div>'
  *
  * store.setTable('species', {dog: {price: 5}}); // !act
  * console.log(app.innerHTML);
- * // -> '<div>dog5</div>'
+ * // -> '<div>dog/5</div>'
  * ```
  * @example
  * This example creates a Provider context into which a default Store is
@@ -7978,7 +8913,7 @@ export function TableView(props: TableProps): ComponentReturnType;
  * );
  * const Pane = () => (
  *   <div>
- *     <TablesView tableId="pets" debugIds={true} />
+ *     <TablesView debugIds={true} />
  *   </div>
  * );
  *
@@ -7987,7 +8922,7 @@ export function TableView(props: TableProps): ComponentReturnType;
  *   species: {dog: {price: 5}},
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>pets:{fido:{species:{dog}}}species:{dog:{price:{5}}}</div>'
  * ```
@@ -8023,7 +8958,7 @@ export function TableView(props: TableProps): ComponentReturnType;
  *   species: {dog: {price: 5}},
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App store={store} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div><span><b>pets</b>: dog</span><span>species: 5</span></div>'
  * ```
@@ -8031,6 +8966,203 @@ export function TableView(props: TableProps): ComponentReturnType;
  */
 export function TablesView(props: TablesProps): ComponentReturnType;
 
+/**
+ * The ValueView component renders the value of a single Value, and registers a
+ * listener so that any changes to that result will cause a re-render.
+ *
+ * The component's props identify which Value to render based on Value Id and
+ * Store (which is either the default context Store, a named context Store, or
+ * an explicit reference).
+ *
+ * A Value contains a string, number, or boolean, so the value is rendered
+ * directly without further decoration. You can create your own ValueView-like
+ * component to customize the way that a Value is rendered: see the ValuesView
+ * component for more details.
+ *
+ * This component uses the useValue hook under the covers, which means that any
+ * changes to the specified Value will cause a re-render.
+ *
+ * @param props The props for this component.
+ * @returns A rendering of the Value, or nothing, if not present.
+ * @example
+ * This example creates a Store outside the application, which is used in the
+ * ValueView component by reference. A change to the data in the Store
+ * re-renders the component.
+ *
+ * ```jsx
+ * const store = createStore().setValue('open', true);
+ * const App = () => (
+ *   <span>
+ *     <ValueView valueId="open" store={store} />
+ *   </span>
+ * );
+ *
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>true</span>'
+ *
+ * store.setValue('open', false); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>false</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Store is
+ * provided. The ValueView component within it then renders the Value (with its
+ * Id for readability).
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <span>
+ *     <ValueView valueId="open" debugIds={true} />
+ *   </span>
+ * );
+ *
+ * const store = createStore().setValue('open', true);
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>open:{true}</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Store is
+ * provided. The ValueView component within it then attempts to render a
+ * non-existent Value.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <span>
+ *     <ValueView valueId="website" />
+ *   </span>
+ * );
+ *
+ * const store = createStore().setValue('open', true);
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span></span>'
+ * ```
+ * @category Store components
+ * @since v3.0.0
+ */
+export function ValueView(props: ValueProps): ComponentReturnType;
+
+/**
+ * The ValuesView component renders the keyed value contents of a Store, and
+ * registers a listener so that any changes to that result will cause a
+ * re-render.
+ *
+ * The component's props can identify which Store to render - either the default
+ * context Store, a named context Store, or an explicit reference.
+ *
+ * This component renders a Store by iterating over its Value objects. By
+ * default these are in turn rendered with the ValueView component, but you can
+ * override this behavior by providing a `valueComponent` prop, a custom
+ * component of your own that will render a Value based on ValueProps. You can
+ * also pass additional props to your custom component with the
+ * `getValueComponentProps` callback prop.
+ *
+ * This component uses the useTableIds hook under the covers, which means that
+ * any changes to the structure of the Store will cause a re-render.
+ *
+ * This component uses the useValueIds hook under the covers, which means that
+ * any changes to the Store's Values will cause a re-render.
+ *
+ * @param props The props for this component.
+ * @returns A rendering of the Values, or nothing, if not present.
+ * @example
+ * This example creates a Store outside the application, which is used in the
+ * ValuesView component by reference. A change to the data in the Store
+ * re-renders the component.
+ *
+ * ```jsx
+ * const store = createStore().setValue('open', true);
+ * const App = () => (
+ *   <div>
+ *     <ValuesView store={store} separator="/" />
+ *   </div>
+ * );
+ *
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<div>true</div>'
+ *
+ * store.setValue('employees', 3); // !act
+ * console.log(app.innerHTML);
+ * // -> '<div>true/3</div>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Store is
+ * provided. The ValuesView component within it then renders the Values (with
+ * Ids for readability).
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <div>
+ *     <ValuesView debugIds={true} />
+ *   </div>
+ * );
+ *
+ * const store = createStore().setValues({open: true, employees: 3});
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<div>open:{true}employees:{3}</div>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Store is
+ * provided. The ValuesView component within it then renders the Values with a
+ * custom Value component and a custom props callback.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <div>
+ *     <ValuesView
+ *       valueComponent={FormattedValueView}
+ *       getValueComponentProps={(valueId) => ({bold: valueId == 'open'})}
+ *     />
+ *   </div>
+ * );
+ * const FormattedValueView = ({valueId, bold}) => (
+ *   <span>
+ *     {bold ? <b>{valueId}</b> : valueId}
+ *     {': '}
+ *     <ValueView valueId={valueId} />
+ *   </span>
+ * );
+ *
+ * const store = createStore().setValues({open: true, employees: 3});
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<div><span><b>open</b>: true</span><span>employees: 3</span></div>'
+ * ```
+ * @category Store components
+ * @since v3.0.0
+ */
+export function ValuesView(props: ValuesProps): ComponentReturnType;
+
 /**
  * The MetricView component renders the current value of a Metric, and registers
  * a listener so that any changes to that result will cause a re-render.
@@ -8064,7 +9196,7 @@ export function TablesView(props: TablesProps): ComponentReturnType;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>5</div>'
  *
@@ -8098,7 +9230,7 @@ export function TablesView(props: TablesProps): ComponentReturnType;
  * metrics.setMetricDefinition('highestPrice', 'species', 'max', 'price');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App metrics={metrics} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App metrics={metrics} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>highestPrice:{5}</div>'
  * ```
@@ -8128,7 +9260,7 @@ export function TablesView(props: TablesProps): ComponentReturnType;
  * metrics.setMetricDefinition('highestPrice', 'species', 'max', 'price');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App metrics={metrics} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App metrics={metrics} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div></div>'
  * ```
@@ -8179,7 +9311,7 @@ export function MetricView(props: MetricProps): ComponentReturnType;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>dog</div>'
  *
@@ -8212,7 +9344,7 @@ export function MetricView(props: MetricProps): ComponentReturnType;
  * indexes.setIndexDefinition('bySpecies', 'pets', 'species');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App indexes={indexes} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App indexes={indexes} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>dog:{fido:{species:{dog}}cujo:{species:{dog}}}</div>'
  * ```
@@ -8254,7 +9386,7 @@ export function MetricView(props: MetricProps): ComponentReturnType;
  * indexes.setIndexDefinition('bySpecies', 'pets', 'species');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App indexes={indexes} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App indexes={indexes} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div><span><b>fido</b>: dog/brown</span><span>cujo: dog</span></div>'
  * ```
@@ -8301,7 +9433,7 @@ export function SliceView(props: SliceProps): ComponentReturnType;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>dog/cat</div>'
  *
@@ -8334,7 +9466,7 @@ export function SliceView(props: SliceProps): ComponentReturnType;
  * indexes.setIndexDefinition('bySpecies', 'pets', 'species');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App indexes={indexes} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App indexes={indexes} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>bySpecies:{dog:{fido:{species:{dog}}cujo:{species:{dog}}}}</div>'
  * ```
@@ -8375,7 +9507,7 @@ export function SliceView(props: SliceProps): ComponentReturnType;
  * indexes.setIndexDefinition('bySpecies', 'pets', 'species');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App indexes={indexes} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App indexes={indexes} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div><span><b>dog</b>: dog/dog</span><span>cat: cat</span></div>'
  * ```
@@ -8431,7 +9563,7 @@ export function IndexView(props: IndexProps): ComponentReturnType;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>5</div>'
  *
@@ -8467,7 +9599,8 @@ export function IndexView(props: IndexProps): ComponentReturnType;
  * ).setRelationshipDefinition('petSpecies', 'pets', 'species', 'species');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App relationships={relationships} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App relationships={relationships} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>cujo:{dog:{price:{5}}}</div>'
  * ```
@@ -8507,7 +9640,8 @@ export function IndexView(props: IndexProps): ComponentReturnType;
  * ).setRelationshipDefinition('petSpecies', 'pets', 'species', 'species');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App relationships={relationships} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App relationships={relationships} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div><span><b>dog</b>: 5</span></div>'
  * ```
@@ -8564,7 +9698,7 @@ export function RemoteRowView(props: RemoteRowProps): ComponentReturnType;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>dog/dog</div>'
  *
@@ -8600,7 +9734,8 @@ export function RemoteRowView(props: RemoteRowProps): ComponentReturnType;
  * ).setRelationshipDefinition('petSpecies', 'pets', 'species', 'species');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App relationships={relationships} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App relationships={relationships} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>dog:{fido:{species:{dog}}cujo:{species:{dog}}}</div>'
  * ```
@@ -8640,7 +9775,8 @@ export function RemoteRowView(props: RemoteRowProps): ComponentReturnType;
  * ).setRelationshipDefinition('petSpecies', 'pets', 'species', 'species');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App relationships={relationships} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App relationships={relationships} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div><span><b>fido</b>: dog</span><span>cujo: dog</span></div>'
  * ```
@@ -8699,7 +9835,7 @@ export function LocalRowsView(props: LocalRowsProps): ComponentReturnType;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>felix/cujo/dog</div>'
  *
@@ -8737,7 +9873,8 @@ export function LocalRowsView(props: LocalRowsProps): ComponentReturnType;
  * ).setRelationshipDefinition('petSequence', 'pets', 'pets', 'next');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App relationships={relationships} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App relationships={relationships} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>fido:{fido:{next:{felix}}felix:{species:{cat}}}</div>'
  * ```
@@ -8778,7 +9915,8 @@ export function LocalRowsView(props: LocalRowsProps): ComponentReturnType;
  * ).setRelationshipDefinition('petSequence', 'pets', 'pets', 'next');
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App relationships={relationships} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App relationships={relationships} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div><span><b>fido</b>: felix</span><span>felix: cat</span></div>'
  * ```
@@ -8833,7 +9971,7 @@ export function LinkedRowsView(props: LinkedRowsProps): ComponentReturnType;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>brown</span>'
  *
@@ -8871,7 +10009,7 @@ export function LinkedRowsView(props: LinkedRowsProps): ComponentReturnType;
  *   }),
  * ).setQueryDefinition('petColors', 'pets', ({select}) => select('color'));
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span>color:{brown}</span>'
  * ```
@@ -8900,7 +10038,7 @@ export function LinkedRowsView(props: LinkedRowsProps): ComponentReturnType;
  *   }),
  * ).setQueryDefinition('petColors', 'pets', ({select}) => select('color'));
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<span></span>'
  * ```
@@ -8965,7 +10103,7 @@ export function ResultCellView(props: ResultCellProps): ComponentReturnType;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>dog/brown</div>'
  *
@@ -9001,7 +10139,7 @@ export function ResultCellView(props: ResultCellProps): ComponentReturnType;
  *   select('color');
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>fido:{species:{dog}color:{brown}}</div>'
  * ```
@@ -9047,7 +10185,7 @@ export function ResultCellView(props: ResultCellProps): ComponentReturnType;
  *   select('color');
  * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div><span><b>species</b>: dog</span><span>color: brown</span></div>'
  * ```
@@ -9109,7 +10247,7 @@ export function ResultRowView(props: ResultRowProps): ComponentReturnType;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>black/brown</div>'
  *
@@ -9145,7 +10283,7 @@ export function ResultRowView(props: ResultRowProps): ComponentReturnType;
  *   }),
  * ).setQueryDefinition('petColors', 'pets', ({select}) => select('color'));
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>petColors:{felix:{color:{black}}fido:{color:{brown}}}</div>'
  * ```
@@ -9185,7 +10323,7 @@ export function ResultRowView(props: ResultRowProps): ComponentReturnType;
  *   }),
  * ).setQueryDefinition('petColors', 'pets', ({select}) => select('color'));
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div><span>felix: black</span><span><b>fido</b>: brown</span></div>'
  * ```
@@ -9239,7 +10377,7 @@ export function ResultSortedTableView(
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>brown/black</div>'
  *
@@ -9271,7 +10409,7 @@ export function ResultSortedTableView(
  *   }),
  * ).setQueryDefinition('petColors', 'pets', ({select}) => select('color'));
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>petColors:{fido:{color:{brown}}felix:{color:{black}}}</div>'
  * ```
@@ -9310,7 +10448,7 @@ export function ResultSortedTableView(
  *   }),
  * ).setQueryDefinition('petColors', 'pets', ({select}) => select('color'));
  * const app = document.createElement('div');
- * ReactDOM.render(<App queries={queries} />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div><span><b>fido</b>: brown</span><span>felix: black</span></div>'
  * ```
@@ -9353,7 +10491,7 @@ export function ResultTableView(props: ResultTableProps): ComponentReturnType;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>1:{}</div>'
  *
@@ -9406,7 +10544,7 @@ export function CheckpointView(props: CheckpointProps): ComponentReturnType;
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<div></div>'
  *
@@ -9448,7 +10586,8 @@ export function CheckpointView(props: CheckpointProps): ComponentReturnType;
  * checkpoints.addCheckpoint('sale'); // !act
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App checkpoints={checkpoints} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>0:{initial}1:{identified}</div>'
  * ```
@@ -9495,7 +10634,8 @@ export function CheckpointView(props: CheckpointProps): ComponentReturnType;
  * checkpoints.addCheckpoint('sale'); // !act
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App checkpoints={checkpoints} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div><span><b>0</b>: initial</span><span>1: identified</span></div>'
  * ```
@@ -9540,7 +10680,7 @@ export function BackwardCheckpointsView(
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<div></div>'
  *
@@ -9581,7 +10721,8 @@ export function BackwardCheckpointsView(
  * checkpoints.addCheckpoint('identified'); // !act
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App checkpoints={checkpoints} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>1:{identified}</div>'
  * ```
@@ -9625,7 +10766,8 @@ export function BackwardCheckpointsView(
  * checkpoints.addCheckpoint('identified'); // !act
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App checkpoints={checkpoints} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div><span><b>1</b>: identified</span></div>'
  *
@@ -9676,7 +10818,7 @@ export function CurrentCheckpointView(
  * );
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App />, app); // !act
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
  * console.log(app.innerHTML);
  * // -> '<div></div>'
  *
@@ -9719,7 +10861,8 @@ export function CurrentCheckpointView(
  * checkpoints.goTo('0'); // !act
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App checkpoints={checkpoints} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div>1:{identified}2:{sale}</div>'
  * ```
@@ -9766,7 +10909,8 @@ export function CurrentCheckpointView(
  * checkpoints.goTo('0'); // !act
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App checkpoints={checkpoints} />); // !act
  * console.log(app.innerHTML);
  * // -> '<div><span><b>1</b>: identified</span><span>2: sale</span></div>'
  * ```