react 18.3.1: useSyncExternalStore

Clean-room public code sample — generation instructions

Write a brand-new, minimal, self-contained code sample in this clean-room directory.
Do not copy, paraphrase, or reference any existing project source. Work only from this spec.

A csx.json manifest scaffold already exists. Do not recreate it from memory. Preserve its case.goal, packages and symbols; fill its empty case.contract with exact assertions and correct its environment, commands and verifierAdapter for the files you generate.

Goal: verify useSyncExternalStore in pkg:npm/react@18.3.1
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/react@18.3.1
Demonstrate these symbols/APIs:
  - useSyncExternalStore

Rules:
  - One focused purpose; the smallest project that proves the goal.
  - Include a contract test (test/contract.*) that runs OFFLINE and exits 0 exactly when the goal behavior works.
  - Pin every dependency with a lockfile so resolution is reproducible.
  - No secrets, credentials, or tokens. No real URLs (only example.com or localhost). No absolute paths.
  - No personal names, emails, company names, or project identifiers of any kind.
  - No binaries and no generated output (node_modules, dist, target, venv, .git, .env).
  - Keep it under 200 files and 256KB packed.

{"case":{"caseId":"case:sha256:99643031054d76c1636efb4eb9bcc5e73fc9efb6e866d994c9e7962de4dd8b36","contract":["react package.json declares export mappings and version 18.3.1","react exports useSyncExternalStore as a function on the default client runtime interface","react useSyncExternalStore throws a TypeError when invoked outside an active component render dispatcher","react useSyncExternalStore delegates subscribe, getSnapshot, and getServerSnapshot callbacks to the active ReactCurrentDispatcher","react useSyncExternalStore passes undefined for omitted getServerSnapshot argument to the dispatcher"],"goal":"verify useSyncExternalStore in pkg:npm/react@18.3.1","kind":"HOW","packages":["pkg:npm/react@18.3.1"],"schemaVersion":1,"symbols":["useSyncExternalStore"]},"contractCommand":["node","test/contract.mjs"],"environment":{"arch":"x64","distro":"ubuntu","ecosystem":"npm","language":"javascript","libc":"glibc","libcVersion":"2.39","moduleSystem":"esm","os":"linux","osVersionBucket":"24","packageManager":"npm","packageManagerVersion":"10.9.8","runtime":"node","runtimeVersion":"22.23.2","schemaVersion":1},"license":"MIT-0","packages":["pkg:npm/react@18.3.1"],"schemaVersion":1,"subject":"pkg:npm/react@18.3.1","symbols":["useSyncExternalStore"],"verifierAdapter":"node-typescript@1"}

{
  "name": "sample-react-use-sync-external-store",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-react-use-sync-external-store",
      "version": "1.0.0",
      "license": "MIT-0",
      "dependencies": {
        "react": "18.3.1"
      }
    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
      "license": "MIT"
    },
    "node_modules/loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
      "license": "MIT",
      "dependencies": {
        "js-tokens": "^3.0.0 || ^4.0.0"
      },
      "bin": {
        "loose-envify": "cli.js"
      }
    },
    "node_modules/react": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
      "license": "MIT",
      "dependencies": {
        "loose-envify": "^1.1.0"
      },
      "engines": {
        "node": ">=0.10.0"
      }
    }
  }
}

{
  "name": "sample-react-use-sync-external-store",
  "version": "1.0.0",
  "type": "module",
  "private": true,
  "license": "MIT-0",
  "dependencies": {
    "react": "18.3.1"
  }
}

{
  "schemaVersion": 1,
  "goal": "verify useSyncExternalStore in pkg:npm/react@18.3.1",
  "kind": "HOW",
  "packages": [
    "pkg:npm/react@18.3.1"
  ],
  "symbols": [
    "useSyncExternalStore"
  ]
}

import assert from 'node:assert/strict';
import fs from 'node:fs';
import { createRequire } from 'node:module';
import React from 'react';

const require = createRequire(import.meta.url);

// Contract 1: react package.json declares export mappings and version 18.3.1
{
  const pkgJsonPath = require.resolve('react/package.json');
  assert.ok(fs.existsSync(pkgJsonPath));
  const pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, 'utf8'));
  assert.strictEqual(pkgJson.name, 'react');
  assert.strictEqual(pkgJson.version, '18.3.1');
  assert.strictEqual(pkgJson.exports['.']['default'], './index.js');
}

// Contract 2: react exports useSyncExternalStore as a function on the default client runtime interface
{
  assert.strictEqual(typeof React.useSyncExternalStore, 'function');
  assert.strictEqual(React.version, '18.3.1');
}

// Contract 3: react useSyncExternalStore throws a TypeError when invoked outside an active component render dispatcher
{
  const internals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
  assert.ok(internals && typeof internals === 'object');
  assert.strictEqual(internals.ReactCurrentDispatcher.current, null);

  assert.throws(
    () => {
      React.useSyncExternalStore(() => () => {}, () => 0);
    },
    {
      name: 'TypeError'
    }
  );
}

// Contract 4: react useSyncExternalStore delegates subscribe, getSnapshot, and getServerSnapshot callbacks to the active ReactCurrentDispatcher
{
  const internals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
  let receivedCall = null;
  const mockSnapshot = { count: 42 };

  internals.ReactCurrentDispatcher.current = {
    useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
      receivedCall = { subscribe, getSnapshot, getServerSnapshot };
      return mockSnapshot;
    }
  };

  try {
    const subscribe = () => () => {};
    const getSnapshot = () => mockSnapshot;
    const getServerSnapshot = () => ({ count: 0 });

    const result = React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);

    assert.strictEqual(result, mockSnapshot);
    assert.ok(receivedCall !== null);
    assert.strictEqual(receivedCall.subscribe, subscribe);
    assert.strictEqual(receivedCall.getSnapshot, getSnapshot);
    assert.strictEqual(receivedCall.getServerSnapshot, getServerSnapshot);
  } finally {
    internals.ReactCurrentDispatcher.current = null;
  }
}

// Contract 5: react useSyncExternalStore passes undefined for omitted getServerSnapshot argument to the dispatcher
{
  const internals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
  let receivedCall = null;

  internals.ReactCurrentDispatcher.current = {
    useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
      receivedCall = { subscribe, getSnapshot, getServerSnapshot };
      return 'client-value';
    }
  };

  try {
    const subscribe = () => () => {};
    const getSnapshot = () => 'client-value';

    const result = React.useSyncExternalStore(subscribe, getSnapshot);

    assert.strictEqual(result, 'client-value');
    assert.ok(receivedCall !== null);
    assert.strictEqual(receivedCall.subscribe, subscribe);
    assert.strictEqual(receivedCall.getSnapshot, getSnapshot);
    assert.strictEqual(receivedCall.getServerSnapshot, undefined);
  } finally {
    internals.ReactCurrentDispatcher.current = null;
  }
}

console.log('All react.useSyncExternalStore contract tests passed.');