TinyBase logoTinyBase β

useWillFinishTransactionListener

The useWillFinishTransactionListener hook registers a listener function with a Store that will be called just before other non-mutating listeners are called at the end of the transaction.

useWillFinishTransactionListener(
  listener: TransactionListener,
  listenerDeps?: DependencyList,
  storeOrStoreId?: StoreOrStoreId,
): void
TypeDescription
listenerTransactionListener

The function that will be called before the end of a transaction.

listenerDeps?DependencyList

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.

storeOrStoreId?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.

returnsvoid

This has no return value.

Unlike the addWillFinisTransactionListener method, which returns a listener Id and requires you to remove it manually, the useWillFinishTransactionListener 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.

Example

This example uses the useWillFinishTransactionListener hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

import {
  Provider,
  useWillFinishTransactionListener,
} from 'tinybase/ui-react';
import React from 'react';
import {createRoot} from 'react-dom/client';
import {createStore} from 'tinybase';

const App = ({store}) => (
  <Provider store={store}>
    <Pane />
  </Provider>
);
const Pane = () => {
  useWillFinishTransactionListener(() =>
    console.log('Will finish transaction'),
  );
  return <span>App</span>;
};

const store = createStore();
const app = document.createElement('div');
const root = createRoot(app);
root.render(<App store={store} />);
console.log(store.getListenerStats().transaction);
// -> 1

store.setValue('open', false);
// -> 'Will finish transaction'

root.unmount();
console.log(store.getListenerStats().transaction);
// -> 0

Since

v4.2.2