在 react 中加载后获取 Suspense 元素的高度（尺寸）

Question

Basically I was trying to render a really really long list (potentially async) in React and I only want to render the visible entries±10 up and down.

I decided to get the height of the component that's holding the list, then calculate the overall list height/row height, as well as the scroll position to decide where the user have scrolled.

In the case below, SubWindow is a general component that could hold a list, or a picture, etc... Therefore, I decided it wasn't the best place for the calculations. Instead, I moved the calc to a different component and tried to use a ref instead

const BananaWindow = (props) => {
    const contentRef = useRef(null)

    const [contentRefHeight, setContentRefHeight] = useState(0)

    useEffect(()=>setContentRefHeight(contentRef.current.offsetHeight), [contentRef])

    //calc which entries to include
    startIdx = ... 
    endIdx = ...
    ......

    return ( 
        <SubWindow 
            ref={contentRef} 
            title="all bananas" 
            content={
                <AllBananas 
                    data={props.data} 
                    startIdx={startIdx} 
                    endIdx={endIdx}
                />
            }
        />
    )
}

//this is a more general component. accepts a title and a content
const SubWindow = forwardRef((props, contentRef) => {
    return (
    <div className="listContainer">
        <div className="title">
            {props.title}
        </div>
        <div className="list" ref={contentRef}>
            {props.content}
        </div>
    </div>
})

//content for all the bananas
const AllBanana = (props) => {
    const [data, setData] = useState(null)
    
    //data could be from props.data, but also could be a get request
    if (props.data === null){
        //DATA FETCHING
        setData(fetch(props.addr).then()...)
    }

    return(
        <Suspense fallback={<div>loading...</div>}>
            //content
        </Suspense>
}

PROBLEM : In BananaWindow , the useEffect is triggered only for initial mounting and painting. So I only ended up getting the offsetWidth of the placeholder. The useEffect does nothing when the content of SubWindow finishes loading.

UPDATE : Tried to use callback ref and it still only showed the height of the placeholder. Trying resize observer. But really hope there's a simpler/out of the box way for this...

Answer 1

So I solved it usingResizeObserver . I modified the hook from this repo to fit my project.