[Перевод] Работа с массивами по новому. React Custom Hook: useArray22.07.2024 08:00

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

Github:  https://github.com/sergeyleschev/react-custom-hooks

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 (
        

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

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

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

© Habrahabr.ru