React native 这能改进吗？

好的，我希望我能很好地解释这一点。 我正在创建一个可以查看消息的应用程序（带有react native）。在主屏幕上，您可以看到带有未读/新消息的徽章。不知何故，这在第一次加载应用程序时不起作用，但当我导航到另一个屏幕并返回主页时，它会显示徽章（在短暂延迟后，您将在代码中看到这一点）

虽然它看起来很有效，但我认为还有改进的余地，所以我希望你们中的一位可以看看代码，看看哪里可以改进

这是我目前掌握的代码：

export default class Home extends React.Component {
    constructor(props) {
        super(props)
        this.announce = firebase.firestore().collection('announcements');
        this.state = {
            newAnnouncements: 0,
        }
    }
    componentDidMount() {
        let userId;
        let countHasRead;
        let countAnnounce;
        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                userId = user.uid
            }
        });
        setTimeout(() => {
            this.announce
                .get()
                .then(snapshot => {
                    countAnnounce = snapshot.size;
                });
            this.announce
                .where('hasread.userId', '==', userId)
                .get()
                .then(snapshot => {
                    countHasRead = snapshot.size;
                })
                .catch(err => {
                    console.log('Error getting documents', err);
                });
            setTimeout(() => {
                this.setState({newAnnouncements: countAnnounce - countHasRead});
            }, 1000);
        }, 500);
    }
}

---

然后在徽章中使用

this.state.newAnnouncements

。

我相信这是一个感谢的问题，我会在那里提问