Hookille voidaan välittää resizeMode-parametrilla arvo height tai width, jolloin seurataan vain korkeutta tai leveyttä. Tämä mahdollistaa suorituskyvyn optimoinnin vähentämällä uudelleenrenderöintiä tilanteissa, joissa on tarve seurata vain toista arvoa.
Esimerkissä arvot päivittyvät vain leveyden muuttuessa.
function ResizeObserverExample() {
const ref = useRef<HTMLDivElement>(null);
const { height, width } = useResizeObserver(ref, { resizeMode: "width" });
return (
<div ref={ref}>
<Box variant="primary">
Elementin korkeus on: <strong>{height} px</strong>
<br />
Elementin leveys on: <strong>{width} px</strong>
</Box>
</div>
);
}
Esimerkissä arvot päivittyvät vain korkeuden muuttuessa.
function ResizeObserverExample() {
const ref = useRef<HTMLDivElement>(null);
const { height, width } = useResizeObserver(ref, { resizeMode: "height" });
return (
<div ref={ref}>
<Box variant="primary">
Elementin korkeus on: <strong>{height} px</strong>
<br />
Elementin leveys on: <strong>{width} px</strong>
</Box>
</div>
);
}