How to create a responsive React hook to listen for changes to cookies

1//@ts-nocheck
2"use client";
3import { useState, useCallback, useEffect } from "react";
4import Cookies from "js-cookie"
5// Define the return type of the hook
6type UseCookieReturn<T> = [
7  T | null, // Value of the cookie
8  (newValue: T, options?: unknown) => void, // Function to update the cookie
9  () => void // Function to delete the cookie
10];
11
12
13// Polyfilled cookieStore wrappers. 
14async function getCookie(cookieName: string) : Promise<string | null> {
15  if("cookieStore" in window) {
16    return (await cookieStore.get(cookieName))?.value ?? null;
17  } 
18
19  return Cookies.get(cookieName) ?? null;
20}
21
22async function setCookie(cookieName: string, value: string, options?: unknown) : Promise<void> {
23  if("cookieStore" in window) {
24    return cookieStore.set(cookieName, value, options);
25  } 
26
27  Cookies.set(cookieName, value, options as CookieAttributes);
28}
29
30async function deleteCookie(cookie: string) : Promise<void> {
31  if("cookieStore" in window) {
32    return cookieStore.delete(cookie);
33  } 
34
35  Cookies.remove(cookie);
36}
37
38export function listenForCookieChange(cookieName: string, onChange: (newValue: string | null) => void) : (() => void) {
39
40  // If the cookieStore is available, we can can use the change event listener
41  if("cookieStore" in window) {
42    const changeListener = (event) => {
43      const foundCookie = event.changed.find((cookie) => cookie.name === cookieName);
44      if (foundCookie) {
45        onChange(foundCookie.value);
46        return
47      }
48
49      const deletedCookie = event.deleted.find((cookie) => cookie.name === cookieName);
50      if(deletedCookie) {
51        onChange(null);
52      }
53    };
54
55    cookieStore.addEventListener("change", changeListener);
56
57    // We return a clean up function for the effect
58    return () => {
59      cookieStore.removeEventListener("change", changeListener);
60    };
61  }
62
63  // If cookieStore is not available, we poll for changes. 
64  const interval = setInterval(() => {
65    const cookie = Cookies.get(cookieName);
66    if(cookie) {
67      onChange(cookie);
68    } else {
69      onChange(null);
70    }
71  }, 1000);
72
73  // We still return a clean up function for the effect
74  return () => {
75    clearInterval(interval);
76  }
77}
78
79export default function useCookieWithListener<T>(
80  name: string,
81  defaultValue: T
82): UseCookieReturn<T> {
83
84  // For first render, we use the default value
85  // This for SSR purposes - SSR will not have cookies and we don't want a hydration error
86  // Of course this gives you a flash of the default value
87  // It will be up to you to handle this - perhaps you want to display nothing until the cookie is loaded
88  const [value, setValue] = useState<T | null>(defaultValue);
89
90  useEffect(() => {
91
92    // The initial value of the cookie on the client, if it exists 
93    getCookie(name).then((cookie) => {
94      if (cookie) {
95        console.log(cookie, typeof cookie)
96        
97        try {
98          setValue(JSON.parse(cookie));
99        } catch (err) {
100          setValue(cookie as T);
101        }
102      }
103    });
104
105    // Any subsequent changes to the cookie will be listened to
106    // and set into state
107    return listenForCookieChange(name, (newValue) => {  
108      try {
109        setValue(newValue? JSON.parse(newValue) : null);
110      } catch (err) {
111        setValue(newValue as T);
112      }
113    });
114  }, [name]);
115
116  // For updates to the cookie we just update the cookie store directly,
117  // And allow the event listener to update the state
118  const updateCookie = useCallback(
119    (newValue: T, options?: unknown) => {
120      setCookie(name, JSON.stringify(newValue), options);
121    },
122    [name]
123  );
124
125  const _deleteCookie = useCallback(() => {
126    deleteCookie(name);
127  }, [name]);
128
129  return [value, updateCookie, _deleteCookie];
130}
131