Calum Moore
May 29 · 1 min read

React hooks are absolutely awesome, they make abstracting away common utilities so incredibly simple!

I recently needed to use Firebase in an app (https://webframe.xyz), and my default instinct was to Google “Firebase React module” to find some kind of Firebase helper that would work with React. I did find one, but it seemed a bit complicated to setup and then I had a thought…

What if I could use that new React Hooks thing? It’s both new and cool, so obviously that’s the way to go 😂.

So, here is my finished hook (easy, reusable):

For comparison, here’s an equivalent class approach (harder, not reusable):

The biggest advantage with hooks, is that you can re-use it in all of your components (and it works with function components too) — whereas the class approach needs to be manually copied across each time!

Hope that helps! 👍🏽

If you enjoyed this article please tap that green hand 🙏.

And check out 1productaweek.com, to find out why we’re building one product a week.

1productaweek

I’m building and launching 1 product a week — follow me as I take on this challenge!

Calum Moore

Written by

1productaweek

I’m building and launching 1 product a week — follow me as I take on this challenge!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade