1. 5

  2. 1

    We need to call our hooks in the same order every render of Component. Those are the rules. To accomplish this, we’ve followed a common organizational pattern with our declarations of state near the top of our component and our various event handlers further down. But in following this pattern, we’ve separated the toggle state and its event handlers with the interruption of declaring another instance of useState. Even worse, our input state is separated from its related handlers by three unrelated function declarations. Just imagine this in your codebase and I’m sure you’ve seen far worse! This can quickly become a nightmare.

    (Emphasis mine) This is not the strongest argument. One does not follow from the other — there’s nothing forcing you to put things in an order that doesn’t make sense. Re-order the standard hooks for clarity to get most of the benefits without the indirection.

    Each abstraction creates more seams, and more opportunities for awkward names and interfaces:

    const [toggleState, { on, off, toggle }] = useOnOff();
    const [inputState, { handleInputChange, resetInput }] = useInput();

    I have single-file-at-a-time text-editor approach to development (as opposed to the tiled-window IDE workflow), so I may have an aversion to jump to definition, but I prefer a bit more inlining, accompanied by comments as needed.