Katkat
Back

Explain React and Firebase data interaction

GofundmeSoftware Engineer · Technical Screen
EasySoftware EngineerTechnical ScreenSoftware Engineering Fundamentals

Last updated

This question tests your understanding of data synchronization patterns between a React frontend and Firebase, specifically focusing on the trade-offs between real-time listeners and manual data fetching.

Scenario

You are building a fundraising dashboard for a platform like GoFundMe. The dashboard needs to display the current total amount raised, which updates frequently as donations come in. You are using React for the frontend and Firebase (Firestore) as your backend.

Task

Explain how you would architect the data retrieval for this component. Specifically, address the following:

  1. Compare onSnapshot (real-time listener) versus getDoc (one-time fetch). When would you choose one over the other in a production environment?
  2. How would you handle the cleanup of data subscriptions in a React functional component to prevent memory leaks?
  3. If you needed to perform a secure server-side operation (e.g., triggering a thank-you email or updating a ledger) every time a donation occurs, how would you integrate Firebase Cloud Functions without exposing sensitive business logic to the client?

Example Context

If your TotalRaised component uses onSnapshot, the UI updates automatically without a page refresh. However, consider the impact on:

  • User experience if the component re-renders too frequently.
  • Firebase billing (read counts).
  • Network overhead on mobile devices with unstable connections.

Hints

Hint 1

Consider the lifecycle methods or hooks necessary to unsubscribe from an active listener when a component unmounts.

Hint 2

Think about the cost-benefit analysis regarding read operations when your application scales to millions of concurrent users.

Hint 3

Firebase Security Rules handle access control, but Cloud Functions provide a secure environment to run privileged code that shouldn't live in the client-side bundle.

Follow-up questions

  • How do you handle offline persistence in Firebase, and what are the implications for data consistency?
  • If you wanted to implement a 'loading' state while the initial data is being fetched, how would you structure your React state management?
  • What strategies would you use to prevent 'over-fetching' data from Firestore if you only need a specific subset of fields for the dashboard?