We could give each Hook a name and then store the Hooks in an object instead of an array. However, this would not make for a nice API, and we would also always have to think of coming up with unique names for Hooks:

// NOTE: Not the actual React Hook API
const [ name, setName ] = useState('nameHook', '')

Furthermore, what would happen when the conditional is set to false, or an item is removed from the loop? Would we clear the Hook state? If we do not clear the Hook state, we might be causing memory leaks.

Even if we solved all these problems, there would still be the problem of name collisions. If we, for example, create a custom Hook that makes use of the useState Hook, and call it nameHook, then we cannot call any other Hook nameHook in our component anymore, or we will cause a name collision. This is even the case for Hook names from libraries, so we need to make sure we avoid name collisions with Hooks that have been defined by libraries as well!