Как отображать асинхронные данные в React + Firestore?

Я учусь реагировать без redux, mobx или каких-либо других библиотек. Причина, по которой я не использую redux и так далее, заключается в том, что кто-то сказал мне, что важно научиться реагировать перед использованием библиотек. Я пытаюсь получить данные из firestore и визуализировать их, но из-за асинхронности я застрял на визуализации данных. Я не могу выполнить рендеринг, потому что не получаю данные при рендеринге.

Моя версия реакции - 16, и я тренируюсь реагировать с помощью firestore. Вот мой код.

Я буду признателен вам за любой ваш совет. Спасибо.

CategoryButtonSet.js

import React from 'react';
import CategoryButton from './CategoryButton';
import {test} from '../shared/Firebase';

export default class CategoryButtonSet extends React.Component {
categories = [];

componentDidMount() {
    test().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            this.categories.push(doc.id).bind(this);
        });
    });
}

render() {
    if (this.categories.length !== 0) {
        console.info(this.categories);
        return (
            <div className = "category-block">
                This block is for the category button set.
                {
                    this.categories.map(category => <CategoryButton key = {category} name = {category}/>)
                }
            </div>
        );
    } else {
        return <div>Loading...</div>;
      }
    }  
}

CategoryButton.js

import React from 'react';

export default (props) => {
    return (
        <div className = "category-block__button">
            Here's the category button.
            <button>{props.name}</button>
        </div>
    );
}