Firebaseとの連携でちょいハマりした原因はReact18での「クライアントレンダリングAPIの更新」が原因だった。

ReactとFirebaseとの連携を勉強していてRealtime Databaseにデータが送れないと作業が止まっていました。
原因は、Firebase周りの設定が原因だと思っていましたが、React18に対応した記述に対応できていなかったことでした。

実際のコード

対応前

import React, { useState } from 'react';
- import ReactDOM from 'react-dom';
+ import { createRoot } from 'react-dom/client';

// 省略

const App = () => {
  // 省略
};

- ReactDOM.render(<App />, document.getElementById('app'));
+ const container = document.getElementById('app');
+ const root = createRoot(container);
+ root.render(<App />);

結論

コンソールにエラーが出ていたのに動いているから大丈夫…と思っていたのが良くなかった。
バージョンによるエラー関連を潰してからFirebaseの設定を見直すのが最適な方法でした。

詳しい情報は公式ページに書いてあるのでエラーでお困りの方は一読することをオススメします。

以上です。
誰かのお役に立てることを祈っております。