From efee9d4b336dabaa834e644c9818c689cfff646a Mon Sep 17 00:00:00 2001
From: Omri Ruvio <omriruvio@gmail.com>
Date: Sat, 22 Apr 2023 16:32:45 +0300
Subject: [PATCH] fix: memoization issue in SplitPane component

This commit fixes an issue with the `useMemo` hook in the `SplitPane` component, which was causing a warning about the size of the memoized array changing between renders. The issue was caused by variables that were not memoized and were changing on each render.

To fix the issue, we memoized the variables that were causing the issue using the `useMemo` hook, including `children`, `propSizes`, and `wrapSize`. This ensures that these variables are not recreated on each render, preventing the warning about the size of the memoized array changing.

Additional minor type corrections were made.
---
 src/SplitPane.tsx | 8 ++++++--
 src/sash.tsx      | 2 +-
 src/types.ts      | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/SplitPane.tsx b/src/SplitPane.tsx
index 5e6ca47..2aa5912 100644
--- a/src/SplitPane.tsx
+++ b/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])
diff --git a/src/sash.tsx b/src/sash.tsx
index 6271e87..37f94ea 100644
--- a/src/sash.tsx
+++ b/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);
 
diff --git a/src/types.ts b/src/types.ts
index f64a40b..99602fb 100644
--- a/src/types.ts
+++ b/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>;