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.
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 }
}
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.
Full Version | React Custom Hooks:
https://dev.to/sergeyleschev/supercharge-your-react-projects-with-custom-hooks-pl4
