Skip to content

Commit 3d76b25

Browse files
author
Gianmarco Manni
committed
update readme
1 parent 35e8203 commit 3d76b25

1 file changed

Lines changed: 26 additions & 0 deletions

File tree

README.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff 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+
```

0 commit comments

Comments
 (0)