Dead Simple Firebase React Hook

useFirebaseDemo.js

//useFirebase.js

import firebase from 'firebase';
import {useState, useEffect} from 'react';

export function useFirebase(refName){
  const [state, setState] = useState(null);

  useEffect(()=>{
    firebase.database().ref(refName).on('value', snapshot => {
      setState(snapshot.val())
    })
  }, [refName])

  const setRef = (newValue) => {
    firebase.database().ref(refName).set(newValue)
  }

  //todo: return setRef as an array [state, setRef]
  return [state, setRef];
}


// Example usage:
// Note: Make sure you initialize firebase! 
//       (I recommend you do this in index.js or similer since Firebase throws an error if you attempt to initialize twice)

import React from 'react';
import { useFirebase } from './useFirebase';

export default function Hi() {
  const [foo, setFoo] = useFirebase('foo');

  return (
    <div>
      <div>Hooks version - Foo: {foo}</div>
      <button onClick={()=>{setFoo('ayyy')}}>Update</button>
    </div>
  );
}

Good stuff right here

Ultra minified version (193 Bytes):

import z from"firebase";import{useState as f,useEffect as g}from"react";export default e=>{let[t,a]=f(),r=z.database().ref(e);g(e=>{r.on("value",e=>{a(e.val())})},[e]);return[t,e=>{r.set(e)}]};