react 19.2.8: useRef

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.useRef 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.useRef
Constraints:
  - executionContext: node
Required runtime conditions:
  - ecosystem: npm
  - language: javascript
  - moduleSystem: cjs
  - packageManager: npm@10.9.8
  - runtime: node@22.23.2

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:1c8d71bdb8ce64dd2698dd5e776658d98a39cf79e695553adb602c5caba377c7","constraints":{"executionContext":"node"},"contract":["assert useRef is exported by react and equals React.useRef","assert useRef outside a dispatcher throws TypeError due to null ReactSharedInternals dispatcher","assert useRef initializes mutable ref object with given primitive, object, or undefined initial value","assert useRef returns stable ref object identity and preserves mutated values across subsequent renders"],"goal":"verify react.useRef in pkg:npm/react@19.2.8","kind":"HOW","packages":["pkg:npm/react@19.2.8"],"schemaVersion":1,"symbols":["react.useRef"]},"contractCommand":["node","test/contract.mjs"],"environment":{"arch":"x64","distro":"ubuntu","ecosystem":"npm","executionContext":"node","language":"javascript","libc":"glibc","libcVersion":"2.39","moduleSystem":"cjs","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@19.2.8"],"schemaVersion":1,"subject":"pkg:npm/react@19.2.8","symbols":["react.useRef"],"verifierAdapter":"node-typescript@1"}

{
  "name": "sample-react-useref",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-react-useref",
      "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-useref",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "dependencies": {
    "react": "19.2.8"
  },
  "scripts": {
    "test": "node test/contract.mjs"
  }
}

{
  "schemaVersion": 1,
  "goal": "verify react.useRef in pkg:npm/react@19.2.8",
  "kind": "HOW",
  "packages": [
    "pkg:npm/react@19.2.8"
  ],
  "symbols": [
    "react.useRef"
  ],
  "constraints": {
    "executionContext": "node"
  },
  "runtimeConditions": {
    "ecosystem": "npm",
    "language": "javascript",
    "moduleSystem": "cjs",
    "packageManager": "npm@10.9.8",
    "runtime": "node@22.23.2"
  }
}

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

// 1. Export verification
assert.equal(typeof useRef, 'function', 'useRef must be exported as a function');
assert.equal(React.useRef, useRef, 'React.useRef must equal named export useRef');

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

// 3. 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 = {
      useRef: (initialValue) => {
        const index = this.hookIndex++;
        if (index >= this.hooks.length) {
          const refObject = { current: initialValue };
          this.hooks.push(refObject);
        }
        return this.hooks[index];
      },
    };
  }

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

// 4. Test useRef initialization across different value types
const renderer = new MinimalHookRenderer();
let refInstance1;
let refInstance2;
let refInstance3;
let refInstance4;

const testObject = { key: 'value' };
const testFunction = () => 'result';

function SampleComponent() {
  refInstance1 = useRef(42);
  refInstance2 = useRef('hello');
  refInstance3 = useRef(testObject);
  refInstance4 = useRef();
  return {
    num: refInstance1.current,
    str: refInstance2.current,
    obj: refInstance3.current,
    undef: refInstance4.current,
  };
}

const firstRender = renderer.render(SampleComponent);
assert.equal(firstRender.num, 42, 'useRef initializes primitive number');
assert.equal(firstRender.str, 'hello', 'useRef initializes primitive string');
assert.equal(firstRender.obj, testObject, 'useRef preserves object reference identity');
assert.equal(firstRender.undef, undefined, 'useRef() defaults current to undefined');

// 5. Ref object structure verification
assert.ok(Object.prototype.hasOwnProperty.call(refInstance1, 'current'), 'Ref object has current property');
assert.equal(typeof refInstance1, 'object', 'useRef returns an object');

// 6. Mutability and stability across re-renders
const capturedRef1 = refInstance1;
const capturedRef3 = refInstance3;

// Mutate ref value synchronously
capturedRef1.current = 100;
capturedRef3.current.key = 'updated';

// Render again
const secondRender = renderer.render(SampleComponent);

// Assert stable object reference
assert.equal(refInstance1, capturedRef1, 'Ref object identity is stable across renders');
assert.equal(refInstance3, capturedRef3, 'Ref object identity is stable across renders');

// Assert updated value persisted without reset to initial value
assert.equal(secondRender.num, 100, 'useRef preserves mutated value across renders instead of reinitializing');
assert.equal(secondRender.obj.key, 'updated', 'useRef preserves mutated nested object state across renders');

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