Michael Landis
1 min readMar 25, 2021

--

One recommendation I’d add is to, whenever possible, reserve Hooks for providing data and flags, and Components for providing Components.

With the example of creating a Hook to provide a Modal, you gain the benefit of putting the configuration in Hook arguments, and you get a method to open the modal, but you lose the ability to optionally create the component. Since every hook must run every time, if a component could show one of a variety of modals, you’ll need hooks and variables populated for every single modal, even if only one ever gets rendered.

You also end up mixing two independent ways of thinking into your code. Hooks have specific invocation rules, while Components have a specific code representation. Outputting a Component from a Hook means needing to track both sets of limitations and declarations simultaneously.

By keeping a Component a Component, you get the benefit of working with it just like any other Component. You can create a wrapper to simplify the interface you expose for the modal, if you like.

Other than that, I wholeheartedly agree with your recommendations! Great article.

--

--

Michael Landis
Michael Landis

Written by Michael Landis

Front-end web developer, React enthusiast, vagabond.

No responses yet