Работа с массивами по новому. 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