feat(LocalStorage): set initialValue

packages/react/src/hooks/useCookie/useCookie.ts

@@ -12,11 +12,13 @@ interface Attributes {
 /**
  * The hook that returns the current value of a cookie, a callback to update the cookie and a callback to remove the cookie.
  * @param name The name of the cookie.
+ * @param {boolean} [initial=true] If set true, hook will set initial value.
  * @returns The current value of a cookie, a callback to update the cookie and a callback to remove the cookie.
  */
 export const useCookie = <T extends string | null = null>(
   name: string,
-  defaultValue?: T
+  defaultValue?: T,
+  initial?: boolean
 ): [string | T, (data: string, attributes?: Attributes) => void, () => void] => {
   const initialValue = useMemo(() => {
     const cookie = document.cookie.split('; ').find((c) => c.startsWith(`${encodeURIComponent(name)}=`));
@@ -25,6 +27,10 @@ export const useCookie = <T extends string | null = null>(
       return decodeURIComponent(cookie.slice(cookie.indexOf('=') + 1));
     }
 
+    if (initial && defaultValue) {
+      document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(defaultValue)}`;
+    }
+
     return (defaultValue ?? null) as T;
   }, []);
 

packages/react/src/hooks/useLocalStorage/useLocalStorage.ts

@@ -6,6 +6,7 @@ import { useCallback, useMemo, useState } from 'react';
  * @param initialValue The initial value to set, if value in `localStorage` is empty.
  * @param {Object} options The options object.
  * @param {boolean} [options.raw=true] If set true, hook will not attempt to JSON serialize stored values.
+ * @param {boolean} [options.initial=true] If set true, hook will set initial value.
  * @param {Object} [options.serializer=JSON.stringify] Custom serializer.
  * @param {Object} [options.deserializer=JSON.parse] Custom deserializer.
  * @returns The current `localStorage` value, a callback to update the value and a callback to remove the value.
@@ -16,6 +17,7 @@ export const useLocalStorage = <T = null>(
   initialValue?: T,
   options?: {
     raw?: boolean;
+    initial?: boolean;
     serializer?: (value: T) => string;
     deserializer?: (value: string) => T;
   }
@@ -30,6 +32,10 @@ export const useLocalStorage = <T = null>(
         return raw ? storageValue : deserializer(storageValue);
       }
 
+      if (options?.initial) {
+        localStorage.setItem(key, raw ? (initialValue as unknown as string) : serializer(initialValue));
+      }
+
       return initialValue ?? null;
     } catch {
       return initialValue ?? null;
@@ -48,7 +54,7 @@ export const useLocalStorage = <T = null>(
 
   const remove = useCallback(() => {
     localStorage.removeItem(key);
-    setValue(initialValue ?? null);
+    setValue(null);
   }, [key, initialValue]);
 
   return [value, update, remove];

packages/react/src/hooks/useSessionStorage/useSessionStorage.ts

@@ -6,6 +6,7 @@ import { useCallback, useMemo, useState } from 'react';
  * @param initialValue The initial value to set, if value in `sessionStorage` is empty.
  * @param {Object} options The options object.
  * @param {boolean} [options.raw=true] If set true, hook will not attempt to JSON serialize stored values.
+ * @param {boolean} [options.initial=true] If set true, hook will set initial value.
  * @param {Object} [options.serializer=JSON.stringify] Custom serializer.
  * @param {Object} [options.deserializer=JSON.parse] Custom deserializer.
  * @returns The current `sessionStorage` value, a callback to update the value and a callback to remove the value.
@@ -16,6 +17,7 @@ export const useSessionStorage = <T = null>(
   initialValue?: T,
   options?: {
     raw?: boolean;
+    initial?: boolean;
     serializer?: (value: T) => string;
     deserializer?: (value: string) => T;
   }
@@ -30,6 +32,10 @@ export const useSessionStorage = <T = null>(
         return raw ? storageValue : deserializer(storageValue);
       }
 
+      if (options?.initial) {
+        localStorage.setItem(key, raw ? (initialValue as unknown as string) : serializer(initialValue));
+      }
+
       return initialValue ?? null;
     } catch {
       return initialValue ?? null;
@@ -48,7 +54,7 @@ export const useSessionStorage = <T = null>(
 
   const remove = useCallback(() => {
     sessionStorage.removeItem(key);
-    setValue(initialValue ?? null);
+    setValue(null);
   }, [key, initialValue]);
 
   return [value, update, remove];