Cookie hook for React/Preact

usecookies.ts

const cookies: Record<string, CookieListItem> = {}
const onChangeDispatcher = new EventTarget()
const dispatch = (name: string) => onChangeDispatcher.dispatchEvent(new CustomEvent(name))

cookieStore.addEventListener('change', (event) => {
	for (const changed of event.changed) {
		cookies[changed.name] = changed
		dispatch(changed.name)
	}
	for (const deleted of event.deleted) {
		delete cookies[deleted.name]
		dispatch(deleted.name)
	}
})

export function useCookie(name: string): CookieListItem | undefined {
	const forceUpdate = useForceUpdate()

	useEffect(() => {
		let available = true

		cookieStore.get(name).then(cookie => {
			if (cookie) {
				cookies[cookie.name] = cookie

				if (available) {
					forceUpdate()
				}
			}
		})

		onChangeDispatcher.addEventListener(name, forceUpdate)

		return () => {
			available = false
			onChangeDispatcher.removeEventListener(name, forceUpdate)
		}
	}, [])

	return cookies[name]
}