React - 调度后获取元素的高度

该组件有几个填充内容的异步调度：

    useEffect(() => {
        dispatch(fetchAllItems())
        dispatch(fetchAllPositions())
        dispatch(fetchAllUsers())
    }, [])

然后我挂在 ref 元素上：

    const mainRef = useRef<HTMLDivElement>(null)

然后尝试获取相同元素的高度useEffect：

    mainRef.current && console.log(mainRef.current.clientHeight)

因此，0 被返回到控制台。据我了解，这正是由于调度而发生的 - 当元素还没有时间填充内容时就获取了元素的高度。

问题：我到底什么时候可以获得填充元素的高度？据我了解，我们必须等到所有调度完成，告诉我如何实现这个

整个组件：

import {FC, useEffect, useRef, useState} from 'react'
import cn from 'classnames'
import {fetchAllItems, fetchAllUsers, fetchAllPositions, useAppDispatch, useAppSelector} from '_store'
import {OrgHeader} from 'widgets/OrgHeader'
import {OrgItem} from 'widgets/OrgItem'
import s from './OrgPage.module.scss'

export interface OrgPageProps {
    className?: string
}

export const OrgPage:FC<OrgPageProps> = ({className}) => {
    const dispatch = useAppDispatch()
    const {items, positions} = useAppSelector(state => state.orgItems)

    const {scale} = useAppSelector(state => state.orgHeader)
    const startRef = useRef<HTMLDivElement>(null)

    const [mainHeight, setMainHeight] = useState(0)
    const mainRef = useRef<HTMLDivElement>(null)

    useEffect(() => {
        dispatch(fetchAllItems())
        dispatch(fetchAllPositions())
        dispatch(fetchAllUsers())

        if (mainRef.current) {
            setMainHeight(mainRef.current.clientHeight)
        }
    }, [])

    return (
        <div className={cn(s.orgPage, [className])}>
            {mainHeight}
            <OrgHeader className={s.header}/>
            <div className={s.main} ref={mainRef}>
                <div className={s.start} ref={startRef}>
                    {items.map(item => {
                        const itemPositions = positions.find(position => position.item_id === item.id)
                        if (!itemPositions) return

                        return (
                            <OrgItem
                                key={item.id}
                                name={item.name}
                                id={item.id}
                                administration={item.administration}
                                positions={itemPositions}
                            />
                        )
                    })}
                </div>
            </div>
        </div>
    )
}