React Hooks & Functional Components
React Hooks are fully supported within ag-Grid - please refer to our working example in GitHub.
We can break down the type of Hooks you can use within ag-Grid into two broad categories - those that have lifecycle methods (such as Filters) and those that don't (such as Cell Renderers).
Hooks without Lifecycle Methods
Cell Renderers, Loading Cell Renderers and Overlay Components are examples of components without lifecycle methods.
For this type of Hook you don't have to do anything special and the Hook should work as expected within ag-Grid, although it would often be easier to simply use a functional component in these cases (as there won't be any state to maintain).
Hooks with Lifecycle Methods
Filters, Cell Editors and Floating Filter Components are examples of components that have mandatory lifecycle methods.
For these types of components you'll need to wrap your hook with
forwardRef and then expose Grid
related lifecycle methods
useImperativeHandle, for example:
Hook Cell Editor
The same applies to any other component to be used within the grid that requires lifecycle methods to be present.
If you don't want to output anything on
render then return an empty string rather than
If you return
null then React simply won't render the component and the Grid is unable to determine if this
is by design or an error.