@geee-be/react-utils 1.1.1 → 1.1.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @geee-be/react-utils
 
+## 1.1.2
+
+### Patch Changes
+
+- 7c9d2da: Try to avoid hydration error
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/hooks/use-history-state.js

@@ -1,13 +1,19 @@
 'use client';
 import { useEffect, useState } from 'react';
 import { deserialize, getInitialValue, serialize } from './state.util.js';
+const LOADING = Symbol('loading');
 export const useHistoryState = (key, initialValue, replace = true, options) => {
     if (typeof history === 'undefined') {
-        return [undefined, () => { }];
+        return [undefined, () => { }, false];
     }
-    const [value, setValue] = useState(() => deserialize(history.state?.[key], options?.fromSerializable) ??
-        getInitialValue(initialValue));
+    const [value, setValue] = useState(LOADING);
     useEffect(() => {
+        setValue(deserialize(history.state?.[key], options?.fromSerializable) ??
+            getInitialValue(initialValue));
+    }, [key, options?.fromSerializable, initialValue]);
+    useEffect(() => {
+        if (value === LOADING)
+            return;
         if (replace) {
             history.replaceState({ ...history.state, [key]: serialize(value, options?.toSerializable) }, '');
         }
@@ -15,5 +21,12 @@ export const useHistoryState = (key, initialValue, replace = true, options) => {
             history.pushState({ ...history.state, [key]: serialize(value, options?.toSerializable) }, '');
         }
     }, [key, value, options?.toSerializable, replace]);
-    return [value, setValue];
+    if (value === LOADING) {
+        return [undefined, () => { }, false];
+    }
+    return [
+        value,
+        (v) => setValue(v),
+        true,
+    ];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geee-be/react-utils",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "",
   "keywords": [],
   "license": "MIT",
@@ -34,6 +34,7 @@
     "build-storybook": "storybook build",
     "lint": "npm run lint:biome && npm run lint:types && npm run lint:unused-exports",
     "lint:biome": "biome ci src/",
+    "lint:biome:fix": "biome check src/ --apply",
     "lint:types": "tsc --noEmit",
     "lint:unused-exports": "ts-unused-exports tsconfig.unused-exports.json --excludePathsFromReport=src/index.ts",
     "prestart:dev": "rimraf dist/*",

package/src/hooks/use-history-state.ts

@@ -5,22 +5,34 @@ import { useEffect, useState } from 'react';
 import type { InitialValue, SerializationOptions } from './state.util.js';
 import { deserialize, getInitialValue, serialize } from './state.util.js';
 
+type Response<T> =
+  | [T, Dispatch<SetStateAction<T>>, true]
+  | [undefined, Dispatch<SetStateAction<T>>, false];
+
+const LOADING = Symbol('loading');
+
 export const useHistoryState = <T, S = T>(
   key: string,
   initialValue: InitialValue<T>,
   replace = true,
   options?: SerializationOptions<T, S>,
-): [T, Dispatch<SetStateAction<T>>] => {
+): Response<T> => {
   if (typeof history === 'undefined') {
-    return [undefined as any, () => {}];
+    return [undefined, () => {}, false];
   }
-  const [value, setValue] = useState<T>(
-    () =>
+
+  const [value, setValue] = useState<T | typeof LOADING>(LOADING);
+
+  useEffect(() => {
+    setValue(
       deserialize(history.state?.[key], options?.fromSerializable) ??
-      getInitialValue(initialValue),
-  );
+        getInitialValue(initialValue),
+    );
+  }, [key, options?.fromSerializable, initialValue]);
 
   useEffect(() => {
+    if (value === LOADING) return;
+
     if (replace) {
       history.replaceState(
         { ...history.state, [key]: serialize(value, options?.toSerializable) },
@@ -34,5 +46,13 @@ export const useHistoryState = <T, S = T>(
     }
   }, [key, value, options?.toSerializable, replace]);
 
-  return [value, setValue];
+  if (value === LOADING) {
+    return [undefined, () => {}, false];
+  }
+
+  return [
+    value,
+    (v) => setValue(v as SetStateAction<T | typeof LOADING>),
+    true,
+  ];
 };