В этой серии статей мы отправляемся в путешествие по области настраиваемых хуков React, открывая их огромный потенциал для улучшения ваших проектов разработки. Сегодня мы сосредоточимся на хуке «useCookie», одном из многих тщательно разработанных хуков, доступных в коллекции пользовательских хуков React.

Гитхаб: https://github.com/sergeyleschev/react-custom-hooks

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]
}

Хук useCookie позволяет легко обрабатывать файлы cookie благодаря лаконичному интерфейсу. После инициализации useCookie извлекает значение cookie с указанным именем. Если файл cookie существует, он возвращает его значение; в противном случае он устанавливает для файла cookie предоставленное значение по умолчанию. Это обеспечивает бесперебойную работу для ваших пользователей, поскольку нужные данные легко доступны.

Одним из ключевых преимуществ этого пользовательского хука является возможность обновления значения cookie. Функция updateCookie, возвращаемая useCookie, позволяет изменить значение файла cookie. Вызывая эту функцию с новым значением и дополнительными параметрами, такими как срок действия или путь, вы можете мгновенно обновить файл cookie. Кроме того, хук удобно обновляет состояние, синхронизируя ваше приложение с измененным файлом cookie.

В сценариях, когда вам нужно удалить куки, на помощь приходит функция deleteCookie. Просто вызовите эту функцию, и она удалит указанный файл cookie из браузера. Хук заботится об обновлении состояния, гарантируя, что ваше приложение отразит удаление файла cookie.

import useCookie from "./useCookie"

export default function CookieComponent() {
    const [value, update, remove] = useCookie("name", "John")

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

Пользовательский хук useCookie очень универсален и может использоваться в различных контекстах. Это особенно полезно при работе с пользовательскими настройками, токенами аутентификации или любыми данными, которые должны сохраняться в разных сеансах. Независимо от того, создаете ли вы простую форму входа, корзину для покупок или многофункциональное приложение, useCookie упрощает управление файлами cookie, экономя ваше драгоценное время разработки.

Пользовательский хук useCookie улучшает управление файлами cookie в React, упрощая обновления, удаления и управление состоянием. В то время как js-cookie напрямую взаимодействует с файлами cookie браузера, useCookie абстрагирует процесс, помогая таким сценариям, как пользовательские настройки и токены аутентификации. Это особенно полезно, когда файлы cookie должны сохраняться между сеансами или для эффективной обработки в сложных приложениях.

Использование js-cookie напрямую:

import Cookies from "js-cookie"

// Set a cookie
Cookies.set("username", "john_doe")
// Get a cookie
const username = Cookies.get("username")
// Delete a cookie
Cookies.remove("username")

Использование пользовательского хука useCookie:

// Inside a component
const [username, setUsername] = useCookie("username", "john_doe")
// setUsername("new_username") can be used to update the cookie
// The hook abstracts away the direct interaction with js-cookie

1) Абстракция и синхронизация состояний:

  • Прямой js-cookie: вам необходимо управлять состоянием cookie отдельно от состояния React, что может привести к несогласованности.
  • useCookie Custom Hook: абстрагирует взаимодействие с js-cookie и синхронизирует значение cookie с состоянием React. Это упрощает управление состоянием и обеспечивает согласованность между файлами cookie и компонентами React.

2) Чистота кода:

  • Прямой js-cookie: вам необходимо управлять логикой, связанной с файлами cookie, непосредственно в ваших компонентах, что может загромождать ваш код.
  • useCookie Пользовательский хук: инкапсулирует логику cookie в повторно используемый хук, делая код вашего компонента чище и более сосредоточенным на его основной функциональности.

3) Простота использования:

  • Прямой js-cookie: вы должны помнить методы API js-cookie и вручную обрабатывать обновления и удаления файлов cookie.
  • useCookie Custom Hook: обеспечивает упрощенный интерфейс. Вам нужно вызвать хук только один раз, и он вернет значение cookie, функцию обновления и функцию удаления.

4) Настройка и контекст:

  • Прямой js-cookie: если вы хотите применить пользовательскую логику или использовать файлы cookie в более широком контексте, вы должны реализовать это самостоятельно.
  • useCookie Custom Hook: предлагает согласованный шаблон для управления файлами cookie между компонентами, упрощая реализацию пользовательской логики или интеграцию с поставщиками контекста.

Использование пользовательского хука useCookie улучшает процесс управления файлами cookie, абстрагируя низкоуровневые детали использования js-cookie, обеспечивая чистый и синхронизированный подход к обработке файлов cookie в приложении React.

Полная версия | Пользовательские хуки React: https://medium.com/@sergeyleschev/supercharge-your-projects-with-custom-hooks-4d946b297d18