v7.3.0

Introducing State Hooks

This release introduces a new family of convenience hooks that follow React's useState pattern, making it even easier to read and write TinyBase data in your React components.

Each state hook returns a tuple containing both the current value and a setter function, eliminating the need to use separate getter and setter hooks.

State hooks combine the functionality of getter hooks (like the useRow hook) and setter callback hooks (like the useSetRowCallback hook) into a single, convenient API that feels just like React's useState:

import {createStore} from 'tinybase';
import {useCellState} from 'tinybase/ui-react';

const store = createStore().setRow('pets', 'fido', {
  species: 'dog',
  color: 'brown',
});

const PetEditor = () => {
  const [color, setColor] = useCellState('pets', 'fido', 'color', store);

  return (
    <div>
      <div>Color: {color}</div>
      <button onClick={() => setColor('black')}>Change Color</button>
    </div>
  );
};

Available State Hooks

This release includes eight new state hooks covering the most common data access patterns:

• The useTablesState hook for reading and writing all Tables
• The useTableState hook for reading and writing a single Table
• The useRowState hook for reading and writing a single Row
• The useCellState hook for reading and writing a single Cell
• The useValuesState hook for reading and writing all Values
• The useValueState hook for reading and writing a single Value
• The useParamValuesState hook for reading and writing all query ParamValues
• The useParamValueState hook for reading and writing a single query ParamValue

These hopefully mean less boilerplate, are particularly useful when building forms, editors, or any interactive UI that needs bidirectional data binding.

Demo Updates

We've updated a few of the demos to showcase these new state hooks:

• The Countries demo now uses the useCellState hook for the star/unstar toggle functionality.
• The Todo App demo uses the useCellState hook to simplify todo completion toggling, and the useValueState hook for managing the selected type filter.
• The Car Analysis demo uses the useParamValueState hook to manage query parameters for dimensions, measures, and aggregates. Much more elegant!

Check out these demos to see the state hooks in action.