{"id":351354,"date":"2024-05-20T12:32:39","date_gmt":"2024-05-20T12:32:39","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=351354"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=351354","title":{"rendered":"<span>React Custom Hook: useArray<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>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 &#171;useArray&#187; hook, one of the many carefully crafted hooks available in the collection of React custom hooks.<\/p>\n<p>Github:\u00a0<a href=\"https:\/\/github.com\/sergeyleschev\/react-custom-hooks\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/github.com\/sergeyleschev\/react-custom-hooks<\/u><\/a><\/p>\n<pre><code class=\"javascript\">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 } }<\/code><\/pre>\n<p>The useArray hook utilizes the useState hook from React to initialize and manage the array state. It returns an object with the following functions:<\/p>\n<ul>\n<li>\n<p>push(element): Adds the specified element to the array.<\/p>\n<\/li>\n<li>\n<p>filter(callback): Filters the array based on the provided callback function, removing elements that don&#8217;t satisfy the condition.<\/p>\n<\/li>\n<li>\n<p>update(index, newElement): Replaces the element at the specified index with the newElement.<\/p>\n<\/li>\n<li>\n<p>remove(index): Removes the element at the specified index from the array.<\/p>\n<\/li>\n<li>\n<p>clear(): Clears the array, setting it to an empty array.<\/p>\n<\/li>\n<\/ul>\n<p>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.<\/p>\n<pre><code class=\"javascript\">import useArray from \".\/useArray\"  export default function ArrayComponent() {     const { array, set, push, remove, filter, update, clear } = useArray([         1, 2, 3, 4, 5, 6,     ])      return (         &lt;div>             &lt;div>{array.join(\", \")}&lt;\/div>             &lt;button onClick={() => push(7)}>Add 7&lt;\/button>             &lt;button onClick={() => update(1, 9)}>Change Second Element To 9&lt;\/button>             &lt;button onClick={() => remove(1)}>Remove Second Element&lt;\/button>             &lt;button onClick={() => filter(n => n &lt; 3)}>                 Keep Numbers Less Than 4             &lt;\/button>             &lt;button onClick={() => set([1, 2])}>Set To 1, 2&lt;\/button>             &lt;button onClick={clear}>Clear&lt;\/button>         &lt;\/div>     ) }<\/code><\/pre>\n<p>Throughout this article series, we focused on one of the gems from the collection of React custom hooks \u2013 &#171;useArray.&#187; This hook, sourced from the &#171;react-custom-hooks&#187; repository, revolutionizes how we work with arrays in our React applications. By leveraging &#171;useArray,&#187; we effortlessly managed dynamic lists and data structures, making array manipulation a smooth and efficient process.<\/p>\n<p>Full Version | React Custom Hooks: <a href=\"https:\/\/habr.com\/en\/articles\/746760\/\" rel=\"noopener noreferrer nofollow\">https:\/\/habr.com\/en\/articles\/746760\/<\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/752750\/\"> https:\/\/habr.com\/ru\/articles\/752750\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>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 &#171;useArray&#187; hook, one of the many carefully crafted hooks available in the collection of React custom hooks.<\/p>\n<p>Github:\u00a0<a href=\"https:\/\/github.com\/sergeyleschev\/react-custom-hooks\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/github.com\/sergeyleschev\/react-custom-hooks<\/u><\/a><\/p>\n<pre><code class=\"javascript\">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 } }<\/code><\/pre>\n<p>The useArray hook utilizes the useState hook from React to initialize and manage the array state. It returns an object with the following functions:<\/p>\n<ul>\n<li>\n<p>push(element): Adds the specified element to the array.<\/p>\n<\/li>\n<li>\n<p>filter(callback): Filters the array based on the provided callback function, removing elements that don&#8217;t satisfy the condition.<\/p>\n<\/li>\n<li>\n<p>update(index, newElement): Replaces the element at the specified index with the newElement.<\/p>\n<\/li>\n<li>\n<p>remove(index): Removes the element at the specified index from the array.<\/p>\n<\/li>\n<li>\n<p>clear(): Clears the array, setting it to an empty array.<\/p>\n<\/li>\n<\/ul>\n<p>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.<\/p>\n<pre><code class=\"javascript\">import useArray from \".\/useArray\"  export default function ArrayComponent() {     const { array, set, push, remove, filter, update, clear } = useArray([         1, 2, 3, 4, 5, 6,     ])      return (         &lt;div>             &lt;div>{array.join(\", \")}&lt;\/div>             &lt;button onClick={() => push(7)}>Add 7&lt;\/button>             &lt;button onClick={() => update(1, 9)}>Change Second Element To 9&lt;\/button>             &lt;button onClick={() => remove(1)}>Remove Second Element&lt;\/button>             &lt;button onClick={() => filter(n => n &lt; 3)}>                 Keep Numbers Less Than 4             &lt;\/button>             &lt;button onClick={() => set([1, 2])}>Set To 1, 2&lt;\/button>             &lt;button onClick={clear}>Clear&lt;\/button>         &lt;\/div>     ) }<\/code><\/pre>\n<p>Throughout this article series, we focused on one of the gems from the collection of React custom hooks \u2013 &#171;useArray.&#187; This hook, sourced from the &#171;react-custom-hooks&#187; repository, revolutionizes how we work with arrays in our React applications. By leveraging &#171;useArray,&#187; we effortlessly managed dynamic lists and data structures, making array manipulation a smooth and efficient process.<\/p>\n<p>Full Version | React Custom Hooks: <a href=\"https:\/\/habr.com\/en\/articles\/746760\/\" rel=\"noopener noreferrer nofollow\">https:\/\/habr.com\/en\/articles\/746760\/<\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/752750\/\"> https:\/\/habr.com\/ru\/articles\/752750\/<\/a><br \/><\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-351354","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/351354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=351354"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/351354\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=351354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=351354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=351354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}