components/tooltip replace "useLayoutEffect" with "useSafeLayoutEffect" (#2021)

Author: friedemannsommer

.changeset/selfish-ties-enjoy.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/tooltip": patch
+---
+
+replaced "useLayoutEffect" with "useSafeLayoutEffect" in "useTooltip" hook to prevent unnecessary React warnings

packages/components/tooltip/package.json

@@ -45,6 +45,7 @@
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/aria-utils": "workspace:*",
     "@nextui-org/framer-transitions": "workspace:*",
+    "@nextui-org/use-safe-layout-effect": "workspace:*",
     "@react-aria/overlays": "^3.18.1",
     "@react-aria/tooltip": "^3.6.4",
     "@react-stately/tooltip": "^3.4.5",

packages/components/tooltip/src/use-tooltip.ts

@@ -4,7 +4,7 @@ import type {OverlayTriggerProps} from "@react-types/overlays";
 import type {HTMLMotionProps} from "framer-motion";
 import type {OverlayOptions} from "@nextui-org/aria-utils";
 
-import {ReactNode, Ref, useId, useImperativeHandle, useLayoutEffect} from "react";
+import {ReactNode, Ref, useId, useImperativeHandle} from "react";
 import {useTooltipTriggerState} from "@react-stately/tooltip";
 import {mergeProps} from "@react-aria/utils";
 import {useTooltip as useReactAriaTooltip, useTooltipTrigger} from "@react-aria/tooltip";
@@ -16,6 +16,7 @@ import {ReactRef, mergeRefs} from "@nextui-org/react-utils";
 import {createDOMRef} from "@nextui-org/react-utils";
 import {useMemo, useRef, useCallback} from "react";
 import {toReactAriaPlacement, getArrowPlacement} from "@nextui-org/aria-utils";
+import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect";
 
 interface Props extends Omit<HTMLNextUIProps, "content"> {
   /**
@@ -180,7 +181,7 @@ export function useTooltip(originalProps: UseTooltipProps) {
     containerPadding,
   });
 
-  useLayoutEffect(() => {
+  useSafeLayoutEffect(() => {
     if (!updatePositionDeps.length) return;
     // force update position when deps change
     updatePosition();