File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -46,3 +46,29 @@ In this configuration the table is fully dynamic meaning that the consumer of th
4646| you want the data table to handle the sorting but would like to influence the sorting from the outside | no | yes |
4747| you want to manually sort your data AND you want to mange the state yourself | yes | yes |
4848| you want the data table to handle the sorting and you don't want to manually influence the state | no | no |
49+
50+ ### How to avoid infinite loops
51+
52+ #### Wrap columns in a useMemo hook
53+
54+ Columns must be wrapped in a useMemo, avoiding that they change on every render.
55+
56+ ``` tsx
57+ const columns = useMemo (() => [
58+ columnHelper .display (),
59+ columnHelper .accessor (),
60+ ...
61+ ], [deps ]);
62+ ```
63+
64+ #### ColumnHelper must be stale
65+
66+ Be sure that columnHelper utility does not change on every render. For this reason, you have to declare columnHelper outside of the component.
67+
68+ ``` tsx
69+ const columnHelper = createReactDataTableColumnHelper <T >();
70+
71+ const MyComponent = () => {
72+ ...
73+ }
74+ ```
You can’t perform that action at this time.
0 commit comments