Hacker News new | ask | show | jobs
by dceddia 2476 days ago
> useState with an array with more than 1 component setting the state...

It sounds like you might be setting state by modifying the array and then calling the setter. This won't work:

    array.push(thing)
    setArray(array)
Instead, you have to update the array immutably, like setArray([...array, thing]).

> useCallback for event listeners

useEffect is usually the right place to set up event listeners (and has a built-in way of cleaning them up, by returning a cleanup function).

> Sometimes I want to return null before a hook.

Hooks pretty much have to be at the very top of the component, and eslint-ignore'ing those errors will probably cause weird issues later. Better to think about another way to solve the problem that doesn't involve returning early.

An issue I ran into recently: I had a modal Edit dialog with some form state that was initialized with the current values of the thing I wanted to edit. If that modal was always mounted and merely shown/hidden (<Modal isOpen={itemToEdit}/>), the state would be initialized once and wouldn't update when I changed the item-to-be-edited. The fix was to unmount the dialog, and only mount it when there was an item to edit, {itemToEdit && <Modal isOpen={true}/>}