Documentation: useScreenClass with elementRef does not recalculate when ref is set

[ArthurClemens]

The docs give this example:

function Example2() {
  const elementRef = useRef(null);
  const screenClass = useScreenClass(elementRef);
  return (
    <div ref={elementRef}>...</div>
  );
}

This assumes that screenClass is calculated based on the element width, but that only works after an update (for example screen resize), because setting a ref does not rerender the component.

The result is that on first render the screenClass is off.

Instead use this approach:

function Example2() {
  const elementRef = useRef();
  const [, _setRefElement] = useState();

  const setRefElement = (ref) => {
    if (!elementRef.current) {
      elementRef.current = ref;
      _setRefElement(ref);
    }
  };

  const screenClass = useScreenClass(elementRef);

  return (
    <div ref={setElementRef}>...</div>
  );
}