'troubleshooting steps when React.memo() not working?
I have a component with some tabs. Each tab selector loads its own datagrid. After a tab has been selected and its datagrid has been loaded, the datagrid should be essentially cached so that toggling away and back to the tab should simply write out the previous datagrid that was loaded/cached. The datagrid entity that gets loaded for each tab/entity essentially looks like this:
<MyDataGrid entity={entity} />
I've wrapped the datagrid component definition with the memo() function like this:
const MyDataGrid = memo((props: IncludeListProps): React.ReactElement => {
debugger;
});
However, the debugger breakpoint is getting hit within the component every time. What is the sequence of steps that you would use to go about troubleshooting something like this?
UPDATE
Providing some additional info based on comments below. A tab strip on top refreshes the display div underneath. So yes the props of MyDataGrid change (eg props.entity.id).
But what I need to do is figure out the best way to cache/memoize each MyDataGrid created per tab. I'm thinking maybe a div collection where each div will be reserved to hold MyDataGrid for a specific tab. Then divs will display inline/none based on the current tab selection. Does this seem like the most straightforward approach?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
