The only React hook you will need for boolean states

Toggling Modal visibility; hiding, and showing messages, there are many scenarios where you’ll find yourself writing the same code. But there's a solution: useBooleanState

Going straight to the code, this is how it looks:

I give you an example. Let’s say you want to toggle a Modal visibility. One option would be something like this:

That’s basically the same code structure you would use every time you want to toggle something. Visibility, states (enabled, disabled, etc), the list keeps going.

Let’s see how it looks when we use the useBooleanState hook:

Same code, way less lines and verbosity. The semantic and the functionality is kept. That’s it.

I saw similar hooks out there where a different naming is used like ‘useToggle’ or ‘useModal’. I rather keep it as generic as possible so other developers are not afraid of employing it whenever they need.

The hook useBooleanState is one of those things a good developer would like to keep in his tool box. I hope you find useful for your future projects. Happy coding.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store