How can I use React Hooks with Firebase Realtime Database?

How can I use React Hooks with Firebase Realtime Database?

You can use the useEffect and useState hooks to manage data from Firebase Realtime Database in your React app.

Can you show me a code example?

Sure! Here's a simple example:

import React, { useEffect, useState } from 'react';
import firebase from 'firebase/app';
import 'firebase/database';

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const dbRef = firebase.database().ref('myData');
    dbRef.on('value', (snapshot) => {
      const newData = snapshot.val();
      setData(newData);
    });

    return () => dbRef.off(); // Cleanup subscription
  }, []);

  return <div>{JSON.stringify(data)}</div>;
};

This code fetches data from the Firebase Realtime Database and updates the component state.

What if I want to add data to the database?

You can use the set method to add data. For example:

const addData = (newItem) => {
  const dbRef = firebase.database().ref('myData');
  dbRef.push(newItem);
};

Call addData with the new item you want to add.