make the array match defensive

CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 0.5.7
+
+_2024-06-14_
+
+### Bugfix
+
+- `arrayMatch` is now null-safe
+
 ## 0.5.6
 
 _2024-06-14_

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fluid-table",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "description": "A React table inspired by react-window",
   "author": "Mckervin Ceme <mckervinc@live.com>",
   "license": "MIT",

src/TableContext.tsx

@@ -171,7 +171,7 @@ function TableContextProvider<T>({ children, initialState }: ProviderProps<T>) {
           (refreshed.minColumnWidth || _stateOnMount.current.minColumnWidth) ?? 80,
           refreshed.columns
         );
-        if (!arraysMatch(widths, _stateOnMount.current.pixelWidths!)) {
+        if (!arraysMatch(widths, _stateOnMount.current.pixelWidths)) {
           refreshed.pixelWidths = widths;
         }
       }

src/util.ts

@@ -13,18 +13,26 @@ export const cx = (...args: (string | number | null | boolean | undefined)[]) =>
     .join(" ");
 };
 
-export const arraysMatch = <T>(arr1: T[], arr2: T[]) => {
-  if (arr1.length !== arr2.length) {
-    return false;
+export const arraysMatch = <T>(arr1: T[] | null | undefined, arr2: T[] | null | undefined) => {
+  if (arr1 == null && arr2 == null) {
+    return true;
   }
 
-  for (var i = 0; i < arr1.length; i++) {
-    if (arr1[i] !== arr2[i]) {
+  if (arr1 != null && arr2 != null) {
+    if (arr1.length !== arr2.length) {
       return false;
     }
+
+    for (var i = 0; i < arr1.length; i++) {
+      if (arr1[i] !== arr2[i]) {
+        return false;
+      }
+    }
+
+    return true;
   }
 
-  return true;
+  return false;
 };
 
 export const randomString = (num: number) => {