title: How to sync firebase with react functional components
body: <p>I would like to sync my component React  with Firebase but i use a functional component i found somes answers in internet but it's seems complicated and doesn't worked for me
  and i can't use this : useEffect(() =&gt; { base.syncState('/', { context: this, state: 'messages' }) });</p>
  <p>my code  is</p>
  <pre><code>import React,{useEffect, useState} from 'react'
  import Formulaire from './component/Formulaire'
  import Message from './component/Message'
  import {useParams} from 'react-router-dom'
  import database from './Base'
  import { getDatabase, ref, set,onValue } from &quot;firebase/database&quot;;
  
  function App() {
    const [state , setState] = useState({
      messages : {},
      pseudo : useParams().pseudo,
    })
    const addMessage = (message) =&gt;{
      state.messages[`message-${Date.now()}`] = message
      setState({pseudo : state.pseudo ,messages : state.messages})
    }
  
      const msg = Object.keys(state.messages)
      const lastMessages = msg.map(key=&gt;{
        return &lt;Message key={key} pseudo={state.messages[key].pseudo} message = {state.messages[key].message} /&gt;
      })
    return (
      &lt;div className=&quot;container-lg col-4 mt-5&quot;&gt;
        &lt;div&gt;
          {lastMessages}
        &lt;/div&gt;
        &lt;Formulaire length={150} addMessage ={addMessage} pseudo={state.pseudo} /&gt;
      &lt;/div&gt;
    )
  }
  
  
  
  export default App
  </code></pre>
  <p>And my firebaseApp code :</p>
  <pre><code>import { initializeApp } from 'firebase/app';
  import { getDatabase } from &quot;firebase/database&quot;;
  
  // TODO: Replace with your app's Firebase project configuration
  const firebaseConfig = {
    apiKey: &quot;AIzaSyB2CFjr32PoNdsnfvEgt_AijgE18lNKz2c&quot;,
    authDomain: &quot;chat-app-42ed5.firebaseapp.com&quot;,
    projectId: &quot;chat-app-42ed5&quot;,
    storageBucket: &quot;chat-app-42ed5.appspot.com&quot;,
    messagingSenderId: &quot;880643875911&quot;,
    appId: &quot;1:880643875911:web:9d04114b45bb40c2627d62&quot;,
    measurementId: &quot;G-MP1VZCGRDP&quot;
  };
  
  const app = initializeApp(firebaseConfig);
  
  // Get a reference to the database service
  const database = getDatabase(app);
  
  export default database
  </code></pre>