react 19.2.8: useState

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 react.useState in pkg:npm/react@19.2.8
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/react@19.2.8
Demonstrate these symbols/APIs:
  - react.useState

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:d919a23303521821d135e2756ba8ea99a692bf629f04f86de8e339caf8810b0b","contract":["assert useState outside a dispatcher throws TypeError due to null ReactSharedInternals dispatcher","assert useState initializes state with primitive value and functional initializer under dispatcher","assert setState updater updates state value on subsequent renders"],"goal":"verify react.useState in pkg:npm/react@19.2.8","kind":"HOW","packages":["pkg:npm/react@19.2.8"],"schemaVersion":1,"symbols":["react.useState"]},"contractCommand":["node","test/contract.mjs"],"environment":{"arch":"x64","distro":"ubuntu","ecosystem":"npm","libc":"glibc","libcVersion":"2.39","os":"linux","osVersionBucket":"24","packageManager":"npm","schemaVersion":1},"license":"MIT-0","packages":["pkg:npm/react@19.2.8"],"schemaVersion":1,"subject":"pkg:npm/react@19.2.8","symbols":["react.useState"],"verifierAdapter":"node-typescript@1"}

{
  "name": "sample-react-usestate",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-react-usestate",
      "version": "1.0.0",
      "dependencies": {
        "react": "19.2.8"
      }
    },
    "node_modules/react": {
      "version": "19.2.8",
      "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz",
      "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==",
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
      }
    }
  }
}

{
  "name": "sample-react-usestate",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "dependencies": {
    "react": "19.2.8"
  },
  "scripts": {
    "test": "node test/contract.mjs"
  }
}

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

import assert from 'node:assert/strict';
import React, { useState } from 'react';

// 1. Calling useState outside of a component dispatcher throws TypeError
assert.throws(
  () => {
    useState(0);
  },
  {
    name: 'TypeError',
  },
  'useState outside render/dispatcher must throw TypeError due to null dispatcher in React internals'
);

// 2. React 19 Client Internals dispatcher integration
const internals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
assert.ok(internals, 'React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE must exist');
assert.equal(internals.H, null, 'Initial dispatcher H must be null');

class MinimalHookRenderer {
  constructor() {
    this.hooks = [];
    this.hookIndex = 0;
    this.dispatcher = {
      useState: (initialState) => {
        const index = this.hookIndex++;
        if (index >= this.hooks.length) {
          const value = typeof initialState === 'function' ? initialState() : initialState;
          this.hooks.push(value);
        }
        const setState = (action) => {
          const nextValue = typeof action === 'function' ? action(this.hooks[index]) : action;
          this.hooks[index] = nextValue;
        };
        return [this.hooks[index], setState];
      },
    };
  }

  render(componentFn) {
    const prevDispatcher = internals.H;
    this.hookIndex = 0;
    internals.H = this.dispatcher;
    try {
      return componentFn();
    } finally {
      internals.H = prevDispatcher;
    }
  }
}

// 3. Test functional component using useState with direct value and functional initializer
const renderer = new MinimalHookRenderer();
let latestSetCount;
let latestSetMessage;

function CounterComponent() {
  const [count, setCount] = useState(() => 10 + 5);
  const [message, setMessage] = useState('initial');
  latestSetCount = setCount;
  latestSetMessage = setMessage;
  return { count, message };
}

const firstRender = renderer.render(CounterComponent);
assert.equal(firstRender.count, 15, 'useState initializes state with functional initializer');
assert.equal(firstRender.message, 'initial', 'useState initializes state with initial value');

// 4. Test state updates on subsequent renders
latestSetCount(20);
latestSetMessage((prev) => prev + '-updated');

const secondRender = renderer.render(CounterComponent);
assert.equal(secondRender.count, 20, 'useState reflects updated value after direct setState');
assert.equal(secondRender.message, 'initial-updated', 'useState reflects updated value after functional setState');