React Custom Hook: useArray

React Custom Hook: useArray
React Custom Hook: useArray

In this article series, we embark on a journey through the realm of custom React hooks, discovering their immense potential for elevating your development projects. Our focus today is on the "useArray" hook, one of the many carefully crafted hooks available in the collection of 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 } }

The useArray hook utilizes the useState hook from React to initialize and manage the array state. It returns an object with the following functions:

  • push(element): Adds the specified element to the array.
  • filter(callback): Filters the array based on the provided callback function, removing elements that don't satisfy the condition.
  • update(index, newElement): Replaces the element at the specified index with the newElement.
  • remove(index): Removes the element at the specified index from the array.
  • clear(): Clears the array, setting it to an empty array.

The advantages of using this custom hook are twofold: it simplifies the management of array states and provides a cleaner and more readable code structure. With the useArray hook, you can easily add, update, remove, filter, and clear elements in an array without dealing with complex logic.

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

Throughout this article series, we focused on one of the gems from the collection of React custom hooks "useArray". This hook, sourced from the "react-custom-hooks" repository, revolutionizes how we work with arrays in our React applications.

Начать дискуссию
Стартап Mark Engineering представил книжную ИИ-закладку за $129 — но пользователи не поняли, как она работает и какую проблему решает

Заодно пошутили, что устройству уготовано место рядом с «умной» брошью от Humane.

88
66
22
11
реклама
разместить
Xiaomi открыла продажи спортивного электромобиля SU7 Ultra

Пока в Китае, по цене от 529,9 тысячи юаней (около 6,2 млн рублей).

Источник здесь и далее: Xiaomi, Carnewschina
1010
66
11
11
Как тестировать объявления в Telegram Ads для максимального результата?

Эффективная реклама в Telegram начинается с тестирования. Запустить объявление — это одно, но без анализа и оптимизации сложно добиться хороших показателей. В агентствах используется проверенный алгоритм тестирования креативов, который помогает снижать стоимость подписчика и повышать конверсию.

Как тестировать объявления в Telegram Ads для максимального результата?
11
«Абсолютно неинтересно, какие там придумывают санкции»: Герман Греф — о дивидендах «Сбера», санкциях и благодарности Apple за уход из России

Выжимка заявлений главы банка со звонка с аналитиками и инвесторами.

Источник: ТАСС
3636
1818
55
Отсутствие на рынке РФ качественных банковских сервисов - конечно же благо для Грефа, кто бы спорил
Анализ договора за 10 секунд с помощью AI

________________
Время настройки бота: 1 минута
Время анализа договора: 10 секунд
________________
▪ — Прописываем инструкцию (промт)
▪ — Тестируем
▪ — Используем

Анализ договора за 10 секунд с помощью AI
1919
1111
33
22
11
Как оценить сервис своего бизнеса?
Как оценить сервис своего бизнеса?

Если ваша компания просто оказывает услугу, но не создаёт клиенту комфорт, то можно считать, что вы теряете деньги. Почему? Потому что сервис – это не только про «сделали и забыли», а про ощущения, которые остаются у клиента после взаимодействия с вами.

В VK никто не покупает? Клиент Vitamin.tools объясняет, что вы делаете не так

«VK пользуются все: и подростки, и пенсионеры. И среди них много платёжеспособных людей. Им можно продать почти любой продукт, если работать вдолгую: заинтересовывать, прогревать, отвечать на вопросы, напоминать о себе». — Рассказывает клиент рекламной экосистемы Vitamin.tools, возвращающей до 18% от пополнения рекламы, маркетолог Кирилл Чарушин.

В VK никто не покупает? Клиент Vitamin.tools объясняет, что вы делаете не так
3737
1010
55
22
ВК дно, это такой же хладеющий труп как и однокласники.
[]