fix: memoization issue in SplitPane component

src/SplitPane.tsx

@@ -59,6 +59,10 @@ const SplitPane = ({
 
     const wrapSize: number = wrapperRect[sizeName] ?? 0;
 
+    const memoizedChildren = useMemo(() => children, [children]);
+    const memoizedPropSizes = useMemo(() => [...propSizes], [propSizes]);
+    const memoizedWrapSize = useMemo(() => wrapSize, [wrapSize]);
+
     // Get limit sizes via children
     const paneLimitSizes = useMemo(() => children.map(childNode => {
         const limits = [0, Infinity];
@@ -68,7 +72,7 @@ const SplitPane = ({
             limits[1] = assertsSize(maxSize, wrapSize);
         }
         return limits;
-    }), [children, wrapSize]);
+    }), [memoizedChildren, memoizedWrapSize]);
 
     const sizes = useMemo(function () {
         let count = 0;
@@ -95,7 +99,7 @@ const SplitPane = ({
         }
 
         return res;
-    }, [...propSizes, children.length, wrapSize]);
+    }, [memoizedPropSizes, memoizedWrapSize, memoizedChildren]);
 
     const sashPosSizes = useMemo(() => (
         sizes.reduce((a, b) => [...a, a[a.length - 1] + b], [0])

src/sash.tsx

@@ -10,7 +10,7 @@ export default function Sash({
     onDragEnd,
     ...others
 }: ISashProps) {
-    const timeout = useRef<number | null>(null);
+    const timeout = useRef<NodeJS.Timeout | null>(null);
     const [active, setActive] = useState(false);
     const [draging, setDrag] = useState(false);
 

src/types.ts

@@ -53,7 +53,7 @@ export interface ISplitProps extends HTMLElementProps {
 export interface ISashProps {
     className?: string;
     style: React.CSSProperties;
-    render: (active: boolean) => void;
+    render: (active: boolean) => React.ReactNode;
     onDragStart: React.MouseEventHandler<HTMLDivElement>;
     onDragging: React.MouseEventHandler<HTMLDivElement>;
     onDragEnd: React.MouseEventHandler<HTMLDivElement>;