I added this because I thought it made more sense to just "nope out" if htmlDocument isn't present, but it doesn't resolve the null errors in the setLocked function below. Why is that? @sirreal do you happen to know?

Function declarations are hoisted up to the beginning of scope. So this condition doesn't skip them -- they effectively are before it, at the beginning of the function.

In this particular case, the htmlDocument checks are not necessary. All the document-accessing code is ever run only in componentDidMount/componentWillUnmount lifecycles methods and these are guaranteed to never be called by the server renderer.

It would be nice if we could tell TypeScript somehow that in this case the htmlDocument is always valid. With some lock( htmlDocument as HTMLDocument ) syntax maybe.

Generally, I believe the way how this component is written is unnecessarily complicated. createScrollLockComponent is not a part of public API (is not reexported by the index.js module) and can be removed. Something like this should work perfectly well:

function setLocked( locked ) {
  // naked reference to document. it's safe
  document.body.scrollTop = ...
}

export default function ScrollLock() {
  useEffect( () => {
    setLocked( true );
    return () => setLocked( false );
  }, [] );

  return null;
}

That's all. References to document are safe even on a Node.js server.

I don't think it's that simple @jsnajdr. The component also tracks the number of scroll lock requests so that multiple scroll locks in the same page continue to work as expected.

Yes, there is reference counting with a module-global lockCounter variable. setLocked inc/decrements it and does anything only when it increased from 0 to 1 or decreases from 1 to 0. That shouldn't complicate the outline I shared very much.

Do we need this check? I can never remember what runs in SRR, but if componentDidMount runs then we'll need this right, otherwise setLocked will run and document will be undefined.

SSR runs only the constructor and the rare componentWillMount, nothing else. didMount is already an effect (equivalent mostly to useEffect) and SSR doesn't do effects.

Gotcha, thanks for confirming. I'll remove the extra check.