Home made useObserver & HOC implementations... still works

[seivan]

I made a home baked implementation of useObserver and observer (HOC) a while ago to learn more about the internals.
This was made like two years ago and some stuff have changed since then, however I am surprised to see it still working.
I was hoping someone could give their input on what it is actually missing compared to current mobx-react-lite

useObserver hook.
forceUpdate & useReaction are extracted into their own snippets for sake of brevity.

export const useObserver = (
  component: ComponentFunction,
  hookName: string = "useObserver"
): JSX.Element => {


  const forceUpdate = useForceUpdate()
  const reactionRef = useReaction(hookName, forceUpdate)

  useReactionDebug(reactionRef.current)

  let rendered!: ReturnType<typeof component>;
  let exception: unknown

  reactionRef.current?.track(() => {
    try {
      rendered = component()
    } catch (e: unknown) {
      exception = e
    }
  })

  if (null != exception) {
    throw exception // re-throw any exceptions catched during rendering
  }

  return rendered as JSX.Element
};

It still actually works.
One thing I noticed that it did better was in React Dev Tools, it shows both HOC being used, and not just memo

That's used with the following HOC:

withObserver (HOC)

// Has four function signatures where everything is optional except component. 
// Instead of showing them all, I use pseudo code in the signature 
function withObserver<P extends {},>(
  displayName?: string,
  memo?: false | PropsAreEqual<P>,
  component: ComponentFunction<P>
): ComponentFunction<P, false, JSX.Element>


  const [_displayName, _memo, _component] = {.... } // Managing function signature values. 

  if (ReactMemoSymbol && _component["$$typeof"] === ReactMemoSymbol) {
    const warning = `[mobx-react-granix] You are trying to use \`withObserver\` on a function component wrapped in either another \`withObserver\` or \`React.memo\`. The observer already applies 'React.memo' for you.`
    console.warn(warning)
    if (process.env.NODE_ENV === 'production') {
      return _component as ComponentFunction<P, false, JSX.Element>
    }
    else {
      throw new Error(warning)
    }

  }

  const componentName = _displayName || _component.displayName || _component.name || "AnonymousComponent"

  function ObserverComponent(props: P) {
    return useObserver(() => {
      return _component(props);
    }, componentName);
  }

  ObserverComponent.displayName = `withObserver(${componentName})`;

  let wrappedComponent = _memo === false ? ObserverComponent : React.memo(ObserverComponent, _memo);

  return wrappedComponent as ComponentFunction<P, false, JSX.Element>
};

I extracted the code from useObserver hook here to make snippet easier to consume. They are inlined. I know you shouldn't call hooks inside functions, but it also works in case anyone was curious.

const useForceUpdate: (() => () => void) = "production" === process.env.NODE_ENV ?
  function reactionRender() {
    const [_, setTick] = React.useState([])
    return () => setTick([])
  }
  :
  function reactionRenderCount() {
    const [tick, setTick] = React.useState(0)
    React.useDebugValue(tick, (x) => x)
    return () => setTick(tick => tick + 1)
  }

const useReaction = (hookName: string, forceUpdate: () => void): React.MutableRefObject<Reaction | undefined> => {
  const isMountedRef = React.useRef(false);
  const reactionRef = React.useRef<Reaction | undefined>(undefined);

  if (null == reactionRef.current) {
    const newReaction = new Reaction(`observer(${hookName})`, () => {
      if (isMountedRef.current === true) {
        forceUpdate()
      }
      else {
        newReaction.dispose()
        reactionRef.current = undefined
      }
    })

    reactionRef.current = newReaction
  }

  React.useEffect(() => {

    if (null != reactionRef.current) {
      isMountedRef.current = true
    }
    else {
      reactionRef.current = new Reaction(`observer(${hookName})`, () => {
        forceUpdate()
      })

      forceUpdate()
    }
    return () => {
      reactionRef.current?.dispose()
      reactionRef.current = undefined
    }
  }, [])



  return reactionRef
}


const fetchDependencies = (reaction?: Reaction) => {
  return null != reaction ? getDependencyTree(reaction).dependencies || ["No dependencies"] : "No Reaction"
}

const useReactionDebug = (reaction?: Reaction) => {
  React.useDebugValue(reaction, fetchDependencies)
}

The types are defined below.
I can't tell what the difference is now, but back then I recall that there was issues with React.FC having implicit children.
Also, I wanted to make sure primitive types were valid. Things might have changed since then, including React 18 allowing undefined as return type.

export type PropsAreEqual<P> = (
  prevProps: Readonly<P>,
  nextProps: Readonly<P>
) => boolean;

export type ComponentRendered<C = undefined> = C extends undefined
  ? Exclude<React.ReactNode, undefined>
  : C;

export type ComponentDisplayName<Optional = true> = Optional extends true
  ? { displayName?: string }
  : { displayName: string };

export type ComponentFunction<
  P = undefined,
  Optional = true,
  C = undefined
> = ComponentDisplayName<Optional> &
  (P extends undefined
    ? () => ComponentRendered<C>
    : (props: P) => ComponentRendered<C>);