Custom Hooks + Firebase = 😍

Calum Moore
May 29, 2019 · 1 min read
Image for post
Image for post

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…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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