-</code></pre><p>These state hooks combine the functionality of getter hooks (like the <a href="/api/the-essentials/using-react/userow/"><code>useRow</code></a> hook) with setter callback hooks (like the <a href="/api/ui-react/functions/store-hooks/usesetrowcallback/"><code>useSetRowCallback</code></a> hook), reducing boilerplate and providing a familiar API for React developers.</p><p>The following state hooks are available:</p><ul><li>the <a href="/api/ui-react/functions/state-hooks/usetablesstate/"><code>useTablesState</code></a> hook for reading and writing all <a href="/api/store/type-aliases/store/tables/"><code>Tables</code></a></li><li>the <a href="/api/ui-react/functions/state-hooks/usetablestate/"><code>useTableState</code></a> hook for reading and writing a single <a href="/api/store/type-aliases/store/table/"><code>Table</code></a></li><li>the <a href="/api/ui-react/functions/state-hooks/userowstate/"><code>useRowState</code></a> hook for reading and writing a single <a href="/api/store/type-aliases/store/row/"><code>Row</code></a></li><li>the <a href="/api/ui-react/functions/state-hooks/usecellstate/"><code>useCellState</code></a> hook for reading and writing a single <a href="/api/store/type-aliases/store/cell/"><code>Cell</code></a></li><li>the <a href="/api/ui-react/functions/state-hooks/usevaluesstate/"><code>useValuesState</code></a> hook for reading and writing all <a href="/api/store/type-aliases/store/values/"><code>Values</code></a></li><li>the <a href="/api/ui-react/functions/state-hooks/usevaluestate/"><code>useValueState</code></a> hook for reading and writing a single <a href="/api/store/type-aliases/store/value/"><code>Value</code></a></li><li>the <a href="/api/ui-react/functions/state-hooks/useparamvaluesstate/"><code>useParamValuesState</code></a> hook for reading and writing all query parameters</li><li>the <a href="/api/ui-react/functions/state-hooks/useparamvaluestate/"><code>useParamValueState</code></a> hook for reading and writing a single query parameter</li></ul><p>These hooks are particularly useful when building forms, editors, or any UI that requires bidirectional data binding. They handle all the memoization and re-rendering logic for you, just like the standard hooks.</p><h3 id="other-hook-types">Other Hook Types</h3><p>The hooks to read and write <a href="/api/the-essentials/creating-stores/store/"><code>Store</code></a> data (described above) will be the ones you most commonly use. For completeness, there are three other broad groups of hooks. Firstly, there are those that create callbacks to delete data (such as the <a href="/api/ui-react/functions/store-hooks/usedelrowcallback/"><code>useDelRowCallback</code></a> hook), which should be self-explanatory.</p><p>Then there are hooks that are used to create objects (including <a href="/api/the-essentials/creating-stores/store/"><code>Store</code></a> objects, but also <a href="/api/metrics/interfaces/metrics/metrics/"><code>Metrics</code></a>, and <a href="/api/indexes/interfaces/indexes/indexes/"><code>Indexes</code></a> objects, and so on). These are essentially convenient aliases for memoization so that object creation can be performed inside a component without fear of creating a new instance per render:</p><pre><code><span class="keyword">import</span> <span class="punctuation">{</span>useCreateStore<span class="punctuation">}</span> <span class="keyword">from</span> <span class="string">'tinybase/ui-react'</span><span class="punctuation">;</span>
0 commit comments