Fix useState() mutation warnings

eslint.config.js

@@ -3,18 +3,21 @@ const pluginJs = require('@eslint/js');
 const tseslint = require('typescript-eslint');
 const pluginReact = require('eslint-plugin-react');
 const eslintConfigPrettier = require('eslint-config-prettier');
+const reactCompiler = require('eslint-plugin-react-compiler');
 
 module.exports = [
   { languageOptions: { globals: globals.browser } },
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
   pluginReact.configs.flat.recommended,
   eslintConfigPrettier,
+  reactCompiler.configs.recommended,
   {
     files: ['**/*.{ts,tsx}'],
     rules: {
       'react/react-in-jsx-scope': 'off',
       'react/display-name': 'off',
     },
+    ignores: ['dist/**', 'docs/**', 'node_modules/**', '*.d.ts']
   },
 ];

package.json

@@ -27,27 +27,29 @@
     "clean": "rimraf dist/",
     "copy-types": "shx cp src/index.d.ts dist/index.d.ts",
     "start-demo": "cd docs && pnpm run start",
-    "watch": "tsc-watch -p . --onSuccess 'pnpm run copy-types'"
+    "watch": "tsc-watch -p . --onSuccess 'pnpm run copy-types'",
+    "lint": "eslint src/**"
   },
   "devDependencies": {
-    "@eslint/js": "^9.10.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "eslint": "^9.10.0",
-    "eslint-config-prettier": "^9.1.0",
+    "@eslint/js": "^9.36.0",
+    "@types/react": "^19.1.15",
+    "@types/react-dom": "^19.1.9",
+    "eslint": "^9.36.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-react": "^7.36.1",
-    "globals": "^15.12.0",
-    "prettier": "^3.3.3",
-    "rimraf": "^4.4.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-compiler": "19.1.0-rc.2",
+    "globals": "^16.4.0",
+    "prettier": "^3.6.2",
+    "rimraf": "^6.0.1",
     "shx": "^0.3.4",
-    "tsc-watch": "^6.2.1",
-    "typescript": "5.6.3",
-    "typescript-eslint": "^8.5.0"
+    "tsc-watch": "^7.1.1",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.44.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "packageManager": "[email protected]+sha512.c89847b0667ddab50396bbbd008a2a43cf3b581efd59cf5d9aa8923ea1fb4b8106c041d540d08acb095037594d73ebc51e1ec89ee40c88b30b8a66c0fae0ac1b"
-}
+}

src/Popover.tsx

@@ -55,7 +55,7 @@ const PopoverInternal = forwardRef(
       boundaryInset,
     });
 
-    const childRef = useRef<HTMLElement | undefined>();
+    const childRef = useRef<HTMLElement | null>(null);
 
     const [popoverState, setPopoverState] = useState<PopoverState>({
       align,
@@ -166,7 +166,7 @@ const PopoverInternal = forwardRef(
         Object.keys(containerStyle ?? {}).forEach(
           (key) =>
             delete popoverElement.style[
-              key as keyof Omit<typeof containerStyle, 'length' | 'parentRule'>
+            key as keyof Omit<typeof containerStyle, 'length' | 'parentRule'>
             ],
         );
       };

src/index.d.ts

@@ -30,7 +30,7 @@ export type PopoverState = {
   hasViolations: boolean;
 };
 
-export type ContentRenderer = (popoverState: PopoverState) => JSX.Element;
+export type ContentRenderer = (popoverState: PopoverState) => React.JSX.Element;
 
 export type PositionTransformValue = {
   top?: number;
@@ -53,7 +53,7 @@ export type UseArrowContainerProps = {
 };
 
 export type ArrowContainerProps = UseArrowContainerProps & {
-  children: JSX.Element;
+  children: React.JSX.Element;
   className?: string;
   style?: React.CSSProperties;
   arrowStyle?: React.CSSProperties;
@@ -80,9 +80,9 @@ export type UsePopoverProps = BasePopoverProps & {
 };
 
 export type PopoverProps = BasePopoverProps & {
-  children: JSX.Element;
+  children: React.JSX.Element;
   positions?: PopoverPosition[] | PopoverPosition;
-  content: ContentRenderer | JSX.Element;
+  content: ContentRenderer | React.JSX.Element;
   ref?: React.Ref<HTMLElement>;
   containerStyle?: Partial<CSSStyleDeclaration>;
   onClickOutside?: (e: MouseEvent) => void;
@@ -120,5 +120,5 @@ export type UseArrowContainerResult = {
 export const usePopover: (props: UsePopoverProps) => UsePopoverResult;
 export const useArrowContainer: (props: UseArrowContainerProps) => UseArrowContainerResult;
 
-export const Popover: (props: PopoverProps) => JSX.Element | null;
-export const ArrowContainer: (props: ArrowContainerProps) => JSX.Element | null;
+export const Popover: (props: PopoverProps) => React.JSX.Element | null;
+export const ArrowContainer: (props: ArrowContainerProps) => React.JSX.Element | null;

src/useElementRef.ts

@@ -1,22 +1,20 @@
-import { useRef, useState, useLayoutEffect } from 'react';
+import { useRef, useLayoutEffect } from 'react';
 import { CreateContainerProps, createContainer } from './util';
 
 export const useElementRef = ({ containerClassName, containerStyle }: CreateContainerProps) => {
-  const ref = useRef<HTMLDivElement>();
+  const ref = useRef<HTMLDivElement>(null);
 
-  const [element] = useState(() =>
-    createContainer({ containerStyle, containerClassName: containerClassName }),
-  );
+  if (ref.current == null) {
+    ref.current = createContainer({ containerStyle, containerClassName: containerClassName })
+  }
 
   useLayoutEffect(() => {
-    element.className = containerClassName;
-  }, [containerClassName, element]);
+    ref.current.className = containerClassName;
+  }, [containerClassName]);
 
   useLayoutEffect(() => {
-    Object.assign(element.style, containerStyle);
-  }, [containerStyle, element]);
-
-  ref.current = element;
+    Object.assign(ref.current.style, containerStyle);
+  }, [containerStyle])
 
   return ref;
 };

src/usePopover.ts

@@ -48,8 +48,8 @@ export const usePopover = ({
   const popoverRef = useElementRef({
     containerClassName:
       containerClassName != null &&
-      containerClassName.length > 0 &&
-      containerClassName !== 'react-tiny-popover-container'
+        containerClassName.length > 0 &&
+        containerClassName !== 'react-tiny-popover-container'
         ? `react-tiny-popover-container ${containerClassName}`
         : 'react-tiny-popover-container',
     containerStyle: POPOVER_STYLE,
@@ -59,8 +59,8 @@ export const usePopover = ({
     ({
       positionIndex = 0,
       parentRect = parentElement.getBoundingClientRect(),
-      childRect = childRef?.current?.getBoundingClientRect(),
-      scoutRect = scoutRef?.current?.getBoundingClientRect(),
+      childRect = childRef?.current.getBoundingClientRect(),
+      scoutRect = scoutRef?.current.getBoundingClientRect(),
       popoverRect = popoverRef.current.getBoundingClientRect(),
       boundaryRect = boundaryElement === parentElement
         ? parentRect
@@ -74,18 +74,18 @@ export const usePopover = ({
         const { top: inputTop, left: inputLeft } =
           typeof transform === 'function'
             ? transform({
-                childRect,
-                popoverRect,
-                parentRect,
-                boundaryRect,
-                padding,
-                align,
-                nudgedTop: 0,
-                nudgedLeft: 0,
-                boundaryInset,
-                violations: EMPTY_RECT,
-                hasViolations: false,
-              })
+              childRect,
+              popoverRect,
+              parentRect,
+              boundaryRect,
+              padding,
+              align,
+              nudgedTop: 0,
+              nudgedLeft: 0,
+              boundaryInset,
+              violations: EMPTY_RECT,
+              hasViolations: false,
+            })
             : transform;
 
         const finalLeft = Math.round(parentRect.left + inputLeft - scoutRect.left);