Function useController

packages/react/src/use-controller.ts:114–190

(
  React: typeof window.React,
  createController: (host: ReactiveControllerHost) => C
)

 * create function is only called once per component.
 */
export const useController = <C extends ReactiveController>(
  React: typeof window.React,
  createController: (host: ReactiveControllerHost) => C
): C => {
  const {useState, useLayoutEffect} = React;

  // State to force updates of the React component
  const [kickCount, kick] = useState(0);

  // Create and store the controller instance. We use useState() instead of
  // useMemo() because React does not guarantee that it will preserve values
  // created with useMemo().
  // TODO (justinfagnani): since this controller are mutable, this may cause
  // issues such as "shearing" with React concurrent mode. The solution there
  // will likely be to snapshot the controller state with something like
  // `useMutableSource`:
  // https://github.com/reactjs/rfcs/blob/master/text/0147-use-mutable-source.md
  // We can address this when React's concurrent mode is closer to shipping.

  let shouldDisconnect = false;
  const [host] = useState(() => {
    const host = new ReactControllerHost<C>(kickCount, kick);
    const controller = createController(host);
    host._primaryController = controller;
    // Note, calls to `useState` are expected to produce no side effects and in
    // StrictMode this is enforced by not running effects for the first render.
    //
    // This happens in StrictMode:
    // 1. Throw away render: component function runs but does not call effects
    // 2. Real render: component function runs and *does* call effects,
    // 2.a. if first render, run effects and
    // 2.a.1 mount,
    // 2.a.2 unmount,
    // 2.a.3 remount
    // 2b. if not first render, just run effects
    //
    // To preserve update lifecycle ordering and run it before this hook
    // returns, run connected here but schedule and async disconnect (handles
    // lifecycle balance for `(1) Throw away render`).
    // The disconnect is cancelled if the effects actually run (handles
    // `(2.a.1) Real render, mount`).
    host._connected();
    shouldDisconnect = true;
    microtask.then(() => {
      if (shouldDisconnect) {
        host._disconnected();
      }
    });
    return host;
  });

  host._updatePending = true;

  // This effect runs only on mount/unmount of the component (via the empty
  // deps array). If the controller has just been created, it's scheduled
  // a disconnect so that it behaves correctly in StrictMode (see above).
  // The returned callback here disconnects the host when the component is
  // unmounted (handles `(2.a.2) Real render, unmount` above).