fix(datagrid): add useMemo() calls

[wkeese]

Closes #5908, refs #5930.

Add useMemo() wrappers to useRowRenderer() and useSelectRows() to avoid needless Datagrid rerenders.

What did you change?

Added useMemo() wrappers in useRowRenderer() and useSelectRows() to avoid resetting datagridState.rows unnecessarily.

How did you test and verify your work?

Ran storybook examples and tested in my own app.

I suggest diffing ignoring whitespace.

[netlify]

✅ Deploy Preview for carbon-for-ibm-products ready!

Name	Link
🔨 Latest commit	cd7addd
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/6703ee8f6cdb06000873f831
😎 Deploy Preview	https://deploy-preview-5949--carbon-for-ibm-products.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[devadula-nandan]

Hi @wkeese,

I observe that these changes prevents the re-updation of rows[], but aren't fixing the re-rendering of the rows, which was the main objective of the issue if I am right.
pls find the recording below, and correct me if I got the reduced use case reproduction in the story wrong.

Screen.Recording.2024-08-29.at.6.47.12.PM.mov

[devadula-nandan]

I suspect the root cause of this is the mentioned props, might not have memoization.

[wkeese]

Hi @devadula-nandan. Thanks for looking at this! I think my PR is just one step on a long road to fixing the problem.

I didn't know about the problem with callbacks. Can we fix it with useCallback()? Or if that's impossible due to closure variables like datagridState, then useEventCallback()?

I thought there was another issue too though, with the allColumns variable, which is much harder to memoize. Strangely it didn't show up in your trace.

I've never used that react profiling tab. Is that what told you about the callback props changing?

[devadula-nandan]

Update: I see the issue is with the root constantly rendering.

As you can observe In my reduced case the time state in SelectableRow (root in your case) changes every second, which triggers the re-rendering of component (parent), which in turn triggers the re-rendering of the datagrid(child) which is the expected behaviour in react, so the entire datagrid re-renders in this case, which was also observed in the profiling,
One way to avoid this is to seperate whatever logic is causing the re-rendering in the root, into its own component and contain the state changes within it, if it's feasible in your case. So the datagrid wont be effected.i have checked this in my local and I will be providing a codesandbox Demonstrating this.

[wkeese]

Well, the code you're talking about was just to make a simple test case. The actual culprit, for unknown reasons, is useColumnRightAlign().