--- title: Using Firebase with ReactJS | daily.dev description: A walkthrough of integrating Firebase's realtime database with a React Todo app, using React's componentWillMount and componentWillUnmount lifecycle methods to... canonical: https://daily.dev/posts/using-firebase-with-reactjs-gej32rldn twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Using Firebase with ReactJS | daily.dev og:description: A walkthrough of integrating Firebase's realtime database with a React Todo app, using React's componentWillMount and componentWillUnmount lifecycle methods to... og:url: https://daily.dev/posts/using-firebase-with-reactjs-gej32rldn og:image: https://api.daily.dev/og/posts/GEj32RldN.png og:image:alt: Using Firebase with ReactJS og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Using Firebase with ReactJS **[Firebase](https://daily.dev/sources/firebase-blog)** · 7 min read · 0 upvotes · 0 comments ## Summary A walkthrough of integrating Firebase's realtime database with a React Todo app, using React's componentWillMount and componentWillUnmount lifecycle methods to sync state with a Firebase reference. The post also introduces ReactFireMixin, a mixin that simplifies binding this.state directly to Firebase nodes as arrays or objects, removing the need for manual event handling and cleanup. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I sync a React component's state with a Firebase realtime database node? Bind the component to a Firebase reference using the ReactFireMixin's bindAsArray or bindAsObject methods inside componentWillMount, which creates a one-way binding from Firebase to this.state. Changes to the Firebase data automatically update state, but updating state directly does not write back to Firebase - writes must go through the Firebase reference itself. _Developers wiring realtime data into React apps can follow ecosystem changes like this on daily.dev._ ### Without a mixin, how do I add and remove a Firebase listener in a React component's lifecycle methods? Create the Firebase reference in componentWillMount and attach an 'on(child_added, ...)' listener that pushes each item into local state via setState, then call firebaseRef.off() in componentWillUnmount to detach the listener and avoid leaks. New items are added by calling push() on the Firebase reference rather than updating state directly. _Anyone comparing manual Firebase bindings to helper libraries can track React backend patterns on daily.dev._ ## Similar posts on daily.dev - [React Basics: Interactivity and State](https://daily.dev/posts/react-basics-interactivity-and-state-ddclrvgu3) · Telerik · 1 upvotes · 0 comments - [React tutorial: Get started with the React JavaScript library](https://daily.dev/posts/react-tutorial-get-started-with-the-react-javascript-library-elwrrjcen) · InfoWorld · 1 upvotes · 0 comments - [What Firebase’s Docs Don’t Tell You About Remote Config in React Native \(2026\)](https://daily.dev/posts/what-firebase-s-docs-don-t-tell-you-about-remote-config-in-react-native-2026--063rjk39t) · Medium · 0 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#react](https://daily.dev/tags/react), [#infrastructure](https://daily.dev/tags/infrastructure), [#firebase](https://daily.dev/tags/firebase) [View this post on daily.dev](https://daily.dev/posts/using-firebase-with-reactjs-gej32rldn) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Using Firebase with ReactJS","url":"https://daily.dev/posts/using-firebase-with-reactjs-gej32rldn","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/using-firebase-with-reactjs-gej32rldn"},"datePublished":"2026-08-23T12:20:15.424Z","dateModified":"2026-08-23T12:29:28.237Z","description":"A walkthrough of integrating Firebase's realtime database with a React Todo app, using React's componentWillMount and componentWillUnmount lifecycle methods to...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/7ed721de96163685d26ab7e314be3ebc?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/7ed721de96163685d26ab7e314be3ebc?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Firebase","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Firebase","logo":"https://media.daily.dev/image/upload/s--i395oqZH--/f_auto,q_auto/v1787487448/logos/firebase-blog?_a=BAMAMicg0","url":"https://daily.dev/sources/firebase-blog"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/using-firebase-with-reactjs-gej32rldn","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"javascript,react,infrastructure,firebase","timeRequired":"PT7M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Firebase","item":"https://daily.dev/sources/firebase-blog"},{"@type":"ListItem","position":3,"name":"Using Firebase with ReactJS"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/using-firebase-with-reactjs-gej32rldn#faq","mainEntity":[{"@type":"Question","name":"How do I sync a React component's state with a Firebase realtime database node?","acceptedAnswer":{"@type":"Answer","text":"Bind the component to a Firebase reference using the ReactFireMixin's bindAsArray or bindAsObject methods inside componentWillMount, which creates a one-way binding from Firebase to this.state. Changes to the Firebase data automatically update state, but updating state directly does not write back to Firebase - writes must go through the Firebase reference itself. Developers wiring realtime data into React apps can follow ecosystem changes like this on daily.dev."}},{"@type":"Question","name":"Without a mixin, how do I add and remove a Firebase listener in a React component's lifecycle methods?","acceptedAnswer":{"@type":"Answer","text":"Create the Firebase reference in componentWillMount and attach an 'on(child_added, ...)' listener that pushes each item into local state via setState, then call firebaseRef.off() in componentWillUnmount to detach the listener and avoid leaks. New items are added by calling push() on the Firebase reference rather than updating state directly. Anyone comparing manual Firebase bindings to helper libraries can track React backend patterns on daily.dev."}}]} ```