React Table uses React Hooks both internally and externally for almost all of its configuration and lifecycle management. Naturally, this is what allows React Table to be headless and lightweight while still having a concise and simple API.
React Table is essentially a compatible collection of custom React hooks:
useTable is the primary hook used to build a React Table. It serves as the starting point for every option and every plugin hook that React Table supports. The options passed into
useTable are supplied to every plugin hook after it in the order they are supplied, eventually resulting in a final
instance object that you can use to build your table UI and interact with the table's state.
useTableis called. A table instance is created.
instance.stateis resolved from either a custom user state or an automatically generated one.
useTablelogic proceeds to run, each plugin hook type is used at a specific point in time with each individual hook function being executed the order it was registered.
useTable, which the developer then uses to construct their table.
This multi-stage process is the secret sauce that allows React Table plugin hooks to work together and compose nicely, while not stepping on each others toes.
To dive deeper into plugins, see Plugins and the Plugin Guide
The order and usage of plugin hooks must follow The Laws of Hooks, just like any other custom hook. They must always be unconditionally called in the same order.
NOTE: In the event that you want to programmatically enable or disable plugin hooks, most of them provide options to disable their functionality, eg.
React Table relies on memoization to determine when state and side effects should update or be calculated. This means that every option you pass to
useTable should be memoized either via
React.useMemo (for objects) or
React.useCallback (for functions).