Skip to content

[BUG] useLayoutEffect warning in dev mode #954

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
joulev opened this issue Feb 21, 2023 · 4 comments · Fixed by #956
Closed

[BUG] useLayoutEffect warning in dev mode #954

joulev opened this issue Feb 21, 2023 · 4 comments · Fixed by #956
Labels

Comments

@joulev
Copy link

joulev commented Feb 21, 2023

Describe the bug
When using react-tooltip, there is a useLayoutEffect warning, although the tooltip itself works fine.

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 he (/Users/joulev/dev/www/debug/node_modules/.pnpm/react-
[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/react-tooltip/dist/react-
tooltip.cjs.min.js:15:3103)
    at exports.Tooltip (/Users/joulev/dev/www/debug/node_modules/.pnpm/react-
[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/react-tooltip/dist/react-
tooltip.cjs.min.js:15:7943)
    ...

Version of Package
v5.8.1

To Reproduce

Expected behavior
No warning should be shown.

Screenshots
N/A

Additional context
The repro repo uses Next.js 13, but this one is different from #933 as I have disabled SWC minification.

@joulev joulev added the Bug label Feb 21, 2023
@gabrieljablonski
Copy link
Member

According to this link a few big react projects currently use the following workaround:

import { useLayoutEffect, useEffect } from 'react';
const useIsomorphicLayoutEffect =
  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
export default useIsomorphicLayoutEffect;

Apparently there aren't any undesired side effects, so we're probably going to include this soon.

Thanks for reporting it.

@gabrieljablonski
Copy link
Member

[email protected] has been released with this fix.

@k2xl
Copy link

k2xl commented Oct 30, 2023

I'm seeing this on "react-tooltip": "^5.21.6",

@gabrieljablonski
Copy link
Member

@k2xl please open a new issue and provide more information about your environment (framework you're using and the version, etc). If possible, a reproducible sample would help a lot.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants