-<span class="punctuation">)</span><span class="operator">:</span> PersisterOrUndefined</code></pre><div class="table"><table><tr><th></th><th>Type</th><th>Description</th></tr><tr><th><code>store</code></th><td><code><span class="type"><a href="#/api/store/interfaces/store/store/">Store</a></span></code></td><td><p>A reference to the <a href="#/api/store/interfaces/store/store/"><code>Store</code></a> for which to create a new <a href="#/api/persisters/interfaces/persister/persister/"><code>Persister</code></a> object.</p></td></tr><tr><th><code>create</code></th><td><code><span class="punctuation">(</span>store<span class="operator">:</span> <span class="type"><a href="#/api/store/interfaces/store/store/">Store</a></span><span class="punctuation">)</span> <span class="operator">=></span> PersisterOrUndefined</code></td><td><p>A function for performing the creation steps of the <a href="#/api/persisters/interfaces/persister/persister/"><code>Persister</code></a> object for the <a href="#/api/store/interfaces/store/store/"><code>Store</code></a>.</p></td></tr><tr><th><code>createDeps<span class="operator">?</span></code></th><td><code>DependencyList</code></td><td><p>An optional array of dependencies for the <code>create</code> function, which, if any change, result in its rerun. This parameter defaults to an empty array.</p></td></tr><tr><th><code>then<span class="operator">?</span></code></th><td><code><span class="punctuation">(</span>persister<span class="operator">:</span> PersisterOrUndefined<span class="punctuation">)</span> <span class="operator">=></span> <span class="builtin">Promise</span><span class="operator"><</span><span class="keyword">void</span><span class="operator">></span></code></td><td><p>An optional callback for performing asynchronous post-creation steps on the <a href="#/api/persisters/interfaces/persister/persister/"><code>Persister</code></a>, such as starting automatic loading and saving.</p></td></tr><tr><th><code>thenDeps<span class="operator">?</span></code></th><td><code>DependencyList</code></td><td><p>An optional array of dependencies for the <code>then</code> callback, which, if any change, result in its rerun. This parameter defaults to an empty array.</p></td></tr><tr><th><code>destroy<span class="operator">?</span></code></th><td><code><span class="punctuation">(</span>persister<span class="operator">:</span> PersisterOrUndefined<span class="punctuation">)</span> <span class="operator">=></span> <span class="keyword">void</span></code></td><td><p>An optional callback whenever the <a href="#/api/persisters/interfaces/persister/persister/"><code>Persister</code></a> is destroyed due to a change in the <code>createDeps</code> dependencies. destroyDeps?: React.DependencyList,</p></td></tr><tr><th><code>destroyDeps<span class="operator">?</span></code></th><td><code>DependencyList</code></td><td><p>An optional array of dependencies for the <code>destroy</code> callback, which, if any change, result in <code>destroy</code> and <code>then</code> being rerun. This parameter defaults to an empty array.</p></td></tr><tr><th class="right">returns</th><td><code>PersisterOrUndefined</code></td><td><p></p><p>A reference to the <a href="#/api/persisters/interfaces/persister/persister/"><code>Persister</code></a>.</p><p></p></td></tr></table></div><p>It is possible to create a <a href="#/api/persisters/interfaces/persister/persister/"><code>Persister</code></a> outside of the React app with the regular createPersister function and pass it in, but you may prefer to create it within the app, perhaps inside the top-level component. To defend against a new <a href="#/api/persisters/interfaces/persister/persister/"><code>Persister</code></a> being created every time the app renders or re-renders, the <code>useCreatePersister</code> hook wraps the creation in a memoization, and provides a second callback so that you can configure the <a href="#/api/persisters/interfaces/persister/persister/"><code>Persister</code></a>, once, and asynchronously, when it is created.</p><p>If your <code>create</code> function (the second parameter to the hook) contains dependencies, the changing of which should cause the <a href="#/api/persisters/interfaces/persister/persister/"><code>Persister</code></a> to be recreated, you can provide them in an array in the third parameter, just as you would for any React hook with dependencies. The <a href="#/api/store/interfaces/store/store/"><code>Store</code></a> passed in as the first parameter of this hook is used as a dependency by default.</p><p>A second <code>then</code> callback can be provided as the fourth parameter. This is called after the creation, and, importantly, can be asynchronous, so that you can configure the <a href="#/api/persisters/interfaces/persister/persister/"><code>Persister</code></a> with the startAutoLoad method and startAutoSave method, for example. If this callback contains dependencies, the changing of which should cause the <a href="#/api/persisters/interfaces/persister/persister/"><code>Persister</code></a> to be reconfigured, you can provide them in an array in the fifth parameter. The <a href="#/api/persisters/interfaces/persister/persister/"><code>Persister</code></a> itself is used as a dependency by default.</p><p>Since v4.3.0, the <code>create</code> function can return undefined, meaning that you can enable or disable persistence conditionally within this hook. This is useful for applications which might turn on or off their cloud persistence or collaboration features. As a result, the <code>then</code> callback may also get passed undefined, which you should handle accordingly.</p><p>Since v4.3.19, a <code>destroy</code> function can be provided which will be called after an old <a href="#/api/persisters/interfaces/persister/persister/"><code>Persister</code></a> is destroyed due to a change in the <code>createDeps</code> dependencies that is creating a new one. Use this to clean up any underlying storage objects that you set up during the <code>then</code> function, for example. If this callback itself contains additional dependencies, you can provide them in an array in the seventh parameter.</p><p>This hook ensures the <a href="#/api/persisters/interfaces/persister/persister/"><code>Persister</code></a> object is destroyed whenever a new one is created or the component is unmounted.</p><section class="s6"><h6>Examples</h6><p>This example creates a <a href="#/api/persisters/interfaces/persister/persister/"><code>Persister</code></a> at the top level of a React application. Even though the App component is rendered twice, the <a href="#/api/persisters/interfaces/persister/persister/"><code>Persister</code></a> creation only occurs once by default.</p><pre><code><span class="keyword">const</span> <span class="function-variable">App</span> <span class="operator">=</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="operator">=></span> <span class="punctuation">{</span>
0 commit comments