Custom Hooks + Firebase = 😍

Calum Moore
May 29, 2019 · 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…

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!