Firebase Databases

Topics Covered

Firebase Overview

• Firebase is a web backend solution providing hosting, databases, and user authentication without custom backend code
• Created and managed through the Firebase Web Console at console.firebase.google.com
• Install in React projects with npm install firebase
• Configure with project credentials in your app's entry file

Realtime Database

• The database is a single giant JSON object in the Cloud allowing concurrent multi-user access
• Structure data as flat objects rather than deeply nested to optimize performance
• Security rules control read/write access — start in test mode for development, then restrict based on authentication

Data References

• Get a database reference with getDatabase()
• Create references to specific paths with ref(db, "path")
• Use forward-slash path notation for nested access (e.g., "people/sarah")

import { getDatabase, ref } from 'firebase/database';

const db = getDatabase();
const peopleRef = ref(db, "people");
const sarahRef = ref(db, "people/sarah");

Writing Data

• set() — replaces the entire value at a reference
• push() — auto-generates a unique key and adds a new child (for array-like structures)
• Both return Promises — use .then() and .catch() for handling

import { ref, set as firebaseSet } from 'firebase/database';

// set() replaces the entire value
firebaseSet(sarahRef, 43)
  .then(() => console.log("saved!"))
  .catch(err => console.log(err));

import { ref, push as firebasePush } from 'firebase/database';

// push() auto-generates a unique key
firebasePush(taskRef, { description: 'First things first' });

Reading Data with Listeners

• onValue() sets up a real-time listener that fires whenever data changes
• Callback receives a snapshot — call snapshot.val() to get the actual data
• Returns an unregister function to stop listening
• Real-time binding means automatic updates across all connected clients

import { ref, onValue } from 'firebase/database';

const unregisterFunction = onValue(amitRef, (snapshot) => {
    const amitValue = snapshot.val();
});

Effect Hook Cleanup

• useEffect can return a cleanup function that runs when the component unmounts
• Use this to disconnect Firebase listeners and prevent memory leaks
• The cleanup function is called automatically by React when the component is removed

useEffect(() => {
    const db = getDatabase();
    const amitRef = ref(db, "people/amit");

    const unregisterFunction = onValue(amitRef, (snapshot) => {
        const data = snapshot.val();
        // update state with data
    });

    // cleanup: disconnect listener on unmount
    return () => unregisterFunction();
}, []);

Firebase Arrays

• Firebase stores arrays as objects with auto-generated keys to avoid race conditions
• Always use push() instead of manual indexing for concurrent access safety
• Convert snapshot objects to arrays by mapping over Object.keys()

// Convert Firebase object to array
const allTasksKeys = Object.keys(allTasksObject);
const allTasksArray = allTasksKeys.map((key) => {
    const task = { ...allTasksObject[key] };
    task.key = key;  // save key for later reference
    return task;
});

Updating Lecture Code

• Pull starter code with Git:

git checkout starter
git pull
git checkout main
git merge starter --no-edit