reactjs - React.lazy サスペンスの使用と onLoad prop の使用に違いはありますか?

Question

以下に示すものに対して、React Lazy と Supense を使用する利点はどれかを知りたいです。最初の例は useState と Onload Prop を使用しており、2 番目の例は React Lazy と Suspense を使用しています。

const ImageComponent = ({ src }) => {
    const [load, setLoad] = useState(false);

    //handles load of the image
    const handleOnload = () => {
        setLoad(true);
    };

    return (
        <>
            {!load && <Spinner>}
            <img
                src={src}
                alt="Avatar"
                onLoad={handleOnload}
                style={{
                    height: '192px',
                    width: '50%',
                    display: load ? 'inline' : 'none',
                }}
            />
        </>
    );
};

VSこれ

        <Suspense
                fallback={
                    <Spinner style={{ width: '50%' }} />
                }
            >
            <ImageComponent src={listItem.download_url} />
        </Suspense>

ImageComponent.js

const ImageComponent = ({ src }) => {
    return (
        <img
            src={src}
            alt="Avatar"
            style={{
                height: '192px',
                width: '50%',
            }}
        />
    );
};

export default ImageComponent;