CODEWITHSUNDEEP
reactjsfirebasefirebase-remote-config
Bala sandeep Pappula
Bala sandeep Pappula

Reputation: 1

How to Fetch and Listen for Real-Time Updates from Firebase Remote Config in React?

I am trying to fetch and listen for real-time updates from Firebase Remote Config in my React app. The initial fetch works fine, but I want to ensure that updates to the testing_web parameter are applied dynamically without requiring a page reload.

Here is my implementation:

import {
  fetchAndActivate,
  getValue,
  addOnConfigUpdateListener,
} from "firebase/remote-config";
import React, { useEffect, useState } from "react";
import { remoteConfig } from "../../config/firebaseConfig";

const App = () => {
  const [welcomeMessage, setWelcomeMessage] = useState("Loading...");

  useEffect(() => {
    // Fetch and activate Remote Config on app load
    fetchAndActivate(remoteConfig)
      .then(() => {
        const message = getValue(remoteConfig, "testing_web").asString();
        console.log("Fetched on load:", message);
        setWelcomeMessage(message);
      })
      .catch((error) => console.error("Remote Config error:", error));

    // Listen for real-time updates from Firebase Remote Config
    const unsubscribe = addOnConfigUpdateListener(remoteConfig, () => {
      fetchAndActivate(remoteConfig).then(() => {
        const updatedMessage = getValue(remoteConfig, "testing_web").asString();
        console.log("Updated remotely:", updatedMessage);
        setWelcomeMessage(updatedMessage);
      });
    });

    return () => unsubscribe(); // Cleanup on unmount
  }, []);

  return (
    <div>
      <h1>{welcomeMessage}</h1>
    </div>
  );
};

export default App;

Upvotes: 0

Views: 33

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 599956

Realtime updates for Firebase Remote Config are only available for mobile clients, not for web clients - so it is not available in the JavaScript SDK.

The common workaround is to more frequently fetch the remote config values and apply them in your own code. While this is listed as an anti-pattern in the Firebase documentation, I know of quite a few developers who actually do this in production.

Alternatively, you can store your configuration data in Firestore and use its realtime listeners (which do work on web), but in that case you'll lose all the management features from Remote Config.

Upvotes: 0

Related Questions