useCookie Hook - a simple way to work with cookies

import { useState, useCallback } from "react"
import Cookies from "js-cookie"

export default function useCookie(name, defaultValue) {
  const [value, setValue] = useState(() => {
    const cookie = Cookies.get(name)
    if (cookie) return cookie
    Cookies.set(name, defaultValue)
    return defaultValue
  })

  const updateCookie = useCallback(
    (newValue, options) => {
      Cookies.set(name, newValue, options)
      setValue(newValue)
    },
    [name]
  )

  const deleteCookie = useCallback(() => {
    Cookies.remove(name)
    setValue(null)
  }, [name])

  return [value, updateCookie, deleteCookie]
}

import useCookie from "./useCookie"

function DisplayName() {
  const [value, update, remove] = useCookie("name", "Doe")

  return (
    <>
      <div>{value}</div>
      <button onClick={() => update("Seraj")}>Change Name To Seraj</button>
      <button onClick={remove}>Delete Cookie</button>
    </>
  )
}

export default DisplayName;