Why is offsetHeight available on components but not clientHeight?

[gbirke]

I recently ran into a situation where I converted a DOM element into a component, but kept the ref on it. Suddenly, the parts of my code that used the clientHeight of my ref no longer worked because apparently components only support offsetHeight. I now have two options:

1. use forwardRef to pass the reference to the DOM element from my component to the parent. This looks ugly.
2. swap clientHeight with offsetHeight, but that might miscalculate when it gets a border or pseudo-elements.

Is there a better way to get the client height of a component?

[harshagarwalnyu]

In Preact, a ref attached to a component (not a DOM element) gives you the component instance, not the underlying DOM node. offsetHeight appears to work because Preact's component instance proxies a small set of DOM-like properties through its .base reference, but clientHeight is not in that set.

ref.current.base is the actual DOM element — clientHeight works there:

const myRef = useRef();
// myRef.current = Preact component instance
// myRef.current.base = actual DOM element

console.log(myRef.current.base.clientHeight); // works
console.log(myRef.current.base.offsetHeight); // also works

But .base is an implementation detail and can break with future Preact versions.

---

Correct solution: forwardRef

import { forwardRef } from 'preact/compat';

const MyComponent = forwardRef(function MyComponent(props, ref) {
  return <div ref={ref} className="my-component">{props.children}</div>;
});

// Parent:
const domRef = useRef();
<MyComponent ref={domRef} />
// domRef.current = the <div> DOM element directly
// domRef.current.clientHeight works perfectly

This is the correct, stable, React-compatible pattern. forwardRef is in preact/compat and works identically to React's version.

---

On your two options:

1. forwardRef — not ugly, this is the standard pattern. Takes 3 lines.
2. Swapping clientHeight for offsetHeight — don't do this. They differ when the element has overflow: scroll content, borders, or CSS box-sizing changes. clientHeight includes padding but excludes borders; offsetHeight includes borders. Wrong measurement causes layout bugs.