Function useState

src/react/core.ts:1613–1662

(initialValue: T)

};

export const useState = <T>(initialValue: T) => {
  if (!currentTreeRef.renderTree?.currentlyRendering) {
    throw new Error("Cannot call use state outside of a react component");
  }

  const currentStateOrder =
    currentTreeRef.renderTree.currentLocalCurrentHookOrder;
  currentTreeRef.renderTree.currentLocalCurrentHookOrder += 1;

  const capturedCurrentlyRenderingRenderNode =
    currentTreeRef.renderTree.currentlyRendering;

  if (capturedCurrentlyRenderingRenderNode.kind === "empty-slot") {
    throw new Error(
      "Invariant Error: A node that triggered a set state cannot be an empty slot"
    );
  }

  if (!capturedCurrentlyRenderingRenderNode.hasRendered) {
    capturedCurrentlyRenderingRenderNode.hooks.push({
      kind: "state",
      value: initialValue,
    });
  }

  const hookMetadata =
    capturedCurrentlyRenderingRenderNode.hooks[currentStateOrder];

  if (hookMetadata.kind !== "state") {
    throw new Error("Different number of hooks rendered between render");
  }

  return [
    hookMetadata.value as T,
    (value: T) => {
      if (!capturedCurrentlyRenderingRenderNode.computedViewTreeNodeId) {
        throw new Error(
          "Invariant: set state trying to re-render unmounted component"
        );
      }

      if (!currentTreeRef.viewTree || !currentTreeRef.renderTree) {
        throw new Error("Invariant error, no view tree or no render tree");
      }

      hookMetadata.value = value;
      triggerReRender({ capturedCurrentlyRenderingRenderNode });
    },
  ] as const;
};

export const render = (
  rootElement: ReturnType<typeof createElement>,