[Bug]: useLayoutEffect warnings from DataTable in SSR usage

[ecrvich]

Package

@carbon/react

Browser

No response

Package version

1.40

React version

17

Description

Our console log is blowing up with these exceptions from DataTable nowadays (just upgraded from 1.20 to 1.40):

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at Table (c:\GitClones\CDD-Hub\node_modules\@carbon\react\lib\components\DataTable\Table.js:58:5)
    at div
    at TableContainer (c:\GitClones\CDD-Hub\node_modules\@carbon\react\lib\components\DataTable\TableContainer.js:28:5)
    at DataTable (c:\GitClones\CDD-Hub\node_modules\@carbon\react\lib\components\DataTable\DataTable.js:94:5)

Reproduction/example

I think you just need to use DataTable with some SSR framework like Remix or Next.js

Steps to reproduce

Pretty sure all you need to do is be using SSR with DataTable, this appears to be a generic useLayoutEffect drawback. You can read about solutions here:

https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85

Suggested Severity

Severity 4 = Unrelated to a user task, has a workaround or does not need a workaround.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

@ecrvich Thanks for pointing this out. In this case we can probably fix the issue by converting these two usages to use our internal useIsomorphicEffect helper instead of useLayoutEffect.