<pre class="shiki github-dark shaku"><code>import { useState, useCallback, useMemo } from 'react'type UseArrayActions&lt;T&gt; = { push: (item: T) =&gt; void, removeByIndex: (index: number) =&gt; void}export function useArray&lt;T&gt;(initialValue: T[]): { value: T[] } &amp; UseArrayActions&lt;T&gt; { const [value, setValue] = useState&lt;T[]&gt;(initialValue); const push = useCallback((item: T) =&gt; setValue((prev) =&gt; [...prev, item]), []); const removeByIndex = useCallback((index: number) =&gt; setValue((prev) =&gt; { const copy = prev.slice(); copy.splice(index, 1); return copy; }), []); return useMemo(() =&gt; ({ value, push, removeByIndex }), [value, push, removeByIndex]);}</code></pre>

The clearest and chortest solution without unnecessary re-renders

When array is used in React state, we need to deal with actions such as push and remove. Implement useArray() to make life easier. const {value, push,…