Работа с массивами по-новому. React Custom Hook: useArray

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

Github

import { useState } from "react"

export default function useArray(defaultValue) {
    const [array, setArray] = useState(defaultValue)

    function push(element) {
        setArray(a => [...a, element])
    }

    function filter(callback) {
        setArray(a => a.filter(callback))
    }

    function update(index, newElement) {
        setArray(a => [
            ...a.slice(0, index),
            newElement,
            ...a.slice(index + 1, a.length),
        ])
    }

    function remove(index) {
        setArray(a => [...a.slice(0, index), ...a.slice(index + 1, a.length)])
    }

    function clear() {
        setArray([])
    }

    return { array, set: setArray, push, filter, update, remove, clear }
}

Хук useArray использует хук useState из React для инициализации состояния массива и управления им. Он возвращает объект со следующими функциями:

• push(element): Добавляет указанный элемент в массив.

• filter(callback): Фильтрует массив на основе предоставленной функции обратного вызова, удаляя элементы, которые не удовлетворяют условию.

• update(index, newElement): заменяет элемент с указанным индексом на новый элемент.

• remove(index): Удаляет элемент с указанным индексом из массива.

• clear(): Очищает массив, превращая его в пустой массив.

Хук useArray упрощает управление состояниями массива и обеспечивает более понятную структуру кода. С помощью хука useArray вы можете легко добавлять, обновлять, удалять, фильтровать и очищать элементы в массиве, не прибегая к сложной логике.

import useArray from "./useArray"

export default function ArrayComponent() {
    const { array, set, push, remove, filter, update, clear } = useArray([
        1, 2, 3, 4, 5, 6,
    ])

    return (
        <div>
            <div>{array.join(", ")}</div>
            <button onClick={() => push(7)}>Add 7</button>
            <button onClick={() => update(1, 9)}>Change Second Element To 9</button>
            <button onClick={() => remove(1)}>Remove Second Element</button>
            <button onClick={() => filter(n => n < 3)}>
                Keep Numbers Less Than 4
            </button>
            <button onClick={() => set([1, 2])}>Set To 1, 2</button>
            <button onClick={clear}>Clear</button>
        </div>
    )
}

В этой серии статей мы сосредоточили внимание на одном из ключевых элементов коллекции пользовательских хуков React — «useArray». Этот хук, полученный из репозитория «react‑custom‑hooks», изменяет то, как мы работаем с массивами в наших приложениях React. Используя «useArray», мы без особых усилий управляли динамическими списками и структурами данных, превращая манипулирование массивами в плавный и эффективный процесс.

Полная версия | React Custom Hooks