firebase React でチャット機能を実装したいのですが、その前段階でテキストのレンダリングが上手くいきません。

Question

実現したいこと

Reactとfirebaseでチャット機能を実現したいと考えていますが、その前段で思ったとおりの動作をしてくれないので、ご回答をお願いしたいと思っております。どうかよろしくお願いします。質問に回答して頂くにあたって不明点ありましたら追記、返答させて頂きます。

新しいテキストをレンダリングするために、自身で作成したInputコンポーネントにテキストを入力し、Buttonコンポーネントをクリックすると、その入力したテキストが1回レンダリングされるようにしたいのですが、1回のクリックで2回レンダリングされ入力したテキストが2回分表示されてしまします。

発生している問題

inputタグ(コンポーネント)にテキストを入力し、buttonタグ(コンポーネント)を1クリックすると2回テキストが表示される。

コードの説明

1,Chatコンポーネントがレンダリングされた直後にcomponentDidMountでloadText関数を呼び出し、firebaseに書き込んでいるテキストと投稿者を読み出して表示させています。
2,テキストをinputタグに入力し、ボタンをクリックしてhandleSubmit関数を呼び出し、firebaseに書き込みを行う。
3,firebaseへの書き込みが発生した時点で、loadtext関数内部のonSnapshotが作動する。書き込みがされた最新の状態firebaseを読み込み、それをconstructor内部にsetStateしrender()を呼び出す。

私の認識では3でsetStateを一度しか実行していないので、レンダリングも1回しかされないという認識ですが、2回レンダリングうまくいきません。ちなみに、2回表示されるテキストについてコンソールで確認すると、先に表示された方のserverTimeStampがnullで、後に表示された方に正しく値が入っているという違いがありました。

該当のソースコード

chat.component.jsx

import React from 'react'
import './chat.styles.scss'
import Input from '../../component/input/input.component'
import Button from '../../component/button/button.component'
import {Link} from 'react-router-dom'
import {auth,firestore, serverTimeStamp} from '../../firebase/firebase.utils'

class Chat extends React.Component {
    constructor(){
    super()

        this.state={
            text:'',
            displayName:'',
            uid:'',
            message:[]
        }
    }

    loadText = () =>{

        firestore.collection('text').orderBy('serverTimeStamp','desc').onSnapshot(snapshot => {

            snapshot.docChanges().forEach(change => {
                if (change.type == 'removed'){

                } else {
                    const {text,displayName,serverTimeStamp} = change.doc.data()
                    const message = this.state.message
                    const obj = {text:text,displayName:displayName,serverTimeStamp:serverTimeStamp,id:change.doc.id}
                    this.setState({message:message.concat(obj)})
                } 

            })

        })

    }


    componentDidMount(){
        auth.onAuthStateChanged(async (user)  =>{
            if(!user){
                alert('ログインしてください')
                this.props.history.push('/')
            } else{ 
                const {uid,displayName} = user
                this.setState({displayName:displayName,uid:uid})     
            }
        })

        this.loadText()
    }


    signOut=()=>{
        auth.signOut()
    }


    handleChange = (e) => {
        const {value} =e.target
        this.setState({text:value})
    }

    handleSubmit = (e) => {
        e.preventDefault()

        firestore.collection('text').add({
            displayName:this.state.displayName,
            uid:this.state.uid,
            text:this.state.text,        
            serverTimeStamp:serverTimeStamp()
        })
        this.setState({text:''})
    }

    render(){
        const convesation= this.state.message.map((message,index) => {
            return(
                <div className='message' key={index} >
                    <div>{message.text}</div>
                    <div className='contributor'>投稿者:{message.displayName}</div>
                </div>
            )
        })
        return(

            <div className='chat'>

                <div className='convesation-area'>
                    {convesation}
                </div>

                <form onSubmit={this.handleSubmit}>
                <Input
                    type='text'
                    name='text'
                    handleChange={this.handleChange}
                    value={this.state.text}
                    placeholder='テキストを入力してください'
                />
                <Button
                    chlldren='送信'
                /> 
                </form>
                    <Link className='signout' to='/' onClick={this.signOut}>サインアウト</Link>
            </div>
        )
    }

}

export default Chat  

補足情報（FW/ツールのバージョンなど）

・環境
OS:Windows10

・FWなどののバージョン
"firebase": "^7.15.5",
"node-sass": "^4.14.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1""
"node.js" v12.16.1

Answer 1

loadText関数の

const {text,displayName,serverTimeStamp} = change.doc.data()

下に、

if(serverTimeStamp == null){
    return
 }

を書き加えることで解決しました。

理由としては、firebaseのserverTimeStamp()は、実行された瞬間にnullが入り、しばらくすると値が入る仕組みになっており、nullが返された時(added)にonSnapshotが実行され、nullがなにかしらの値に修正(modified)されたときにdocChangesが実行され、結果的にsetStateが2回連続で実行されることになったため1クリックで同じテキストが2回表示されたものと考えられます。