react 19.0.0: useDeferredValue

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 useDeferredValue in pkg:npm/react@19.0.0
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/react@19.0.0
Demonstrate these symbols/APIs:
  - useDeferredValue
Required runtime conditions:
  - ecosystem: golang
  - language: go
  - packageManager: go@1.26.6
  - runtime: go@1.26.6

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:e3289e06a180139ffcf21dacfe8052d5c28c26c8727d10a25b2cfdae23389286","contract":["react package.json exports useDeferredValue and version 19.0.0","react exports useDeferredValue as a function matching the named and default exports","useDeferredValue throws an invalid hook call error when invoked outside component rendering context","useDeferredValue delegates value and initialValue to the active hook dispatcher","useDeferredValue supports single-argument invocation passing undefined as initialValue to the dispatcher","SearchResults component executes useDeferredValue inside custom dispatcher and renders React element"],"goal":"verify useDeferredValue in pkg:npm/react@19.0.0","kind":"HOW","packages":["pkg:npm/react@19.0.0"],"schemaVersion":1,"symbols":["useDeferredValue"]},"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@19.0.0"],"schemaVersion":1,"subject":"pkg:npm/react@19.0.0","symbols":["useDeferredValue"],"verifierAdapter":"node-typescript@1"}

{
  "name": "sample-react-use-deferred-value",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-react-use-deferred-value",
      "version": "1.0.0",
      "license": "MIT-0",
      "dependencies": {
        "react": "19.0.0"
      }
    },
    "node_modules/react": {
      "version": "19.0.0",
      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
      "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
      }
    }
  }
}

{
  "name": "sample-react-use-deferred-value",
  "version": "1.0.0",
  "type": "module",
  "private": true,
  "license": "MIT-0",
  "dependencies": {
    "react": "19.0.0"
  }
}

{
  "schemaVersion": 1,
  "goal": "verify useDeferredValue in pkg:npm/react@19.0.0",
  "kind": "HOW",
  "packages": [
    "pkg:npm/react@19.0.0"
  ],
  "symbols": [
    "useDeferredValue"
  ],
  "runtimeConditions": {
    "ecosystem": "golang",
    "language": "go",
    "packageManager": "go@1.26.6",
    "runtime": "go@1.26.6"
  }
}

import React, { useDeferredValue } from 'react';

/**
 * Component demonstrating useDeferredValue for deferring a search query update.
 *
 * @param {object} props
 * @param {string} props.query - Current search query.
 * @param {string} [props.initialQuery] - Optional initial deferred value for first render in React 19.
 * @returns {object} React element with deferred query value.
 */
export function SearchResults({ query, initialQuery }) {
  const deferredQuery = useDeferredValue(query, initialQuery);
  return React.createElement('div', { 'data-deferred': deferredQuery }, deferredQuery);
}

/**
 * Runs a hook function within a custom dispatcher context.
 *
 * @param {Function} callback - Function executing hook calls.
 * @param {object} dispatcher - Custom React dispatcher implementation.
 * @returns {any} Result of callback.
 */
export function withCustomDispatcher(callback, dispatcher) {
  const internals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
  const previousDispatcher = internals.H;
  try {
    internals.H = dispatcher;
    return callback();
  } finally {
    internals.H = previousDispatcher;
  }
}

import assert from 'node:assert/strict';
import fs from 'node:fs';
import { createRequire } from 'node:module';
import React, { useDeferredValue } from 'react';
import { SearchResults, withCustomDispatcher } from '../src/index.js';

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

// Contract 1: react package.json exports useDeferredValue and version 19.0.0
{
  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, '19.0.0');
  assert.strictEqual(pkgJson.exports['.']['default'], './index.js');
}

// Contract 2: react exports useDeferredValue as a function matching the named and default exports
{
  assert.strictEqual(React.version, '19.0.0');
  assert.strictEqual(typeof React.useDeferredValue, 'function');
  assert.strictEqual(typeof useDeferredValue, 'function');
  assert.strictEqual(React.useDeferredValue, useDeferredValue);
}

// Contract 3: useDeferredValue throws an invalid hook call error when invoked outside component rendering context
{
  assert.throws(
    () => {
      useDeferredValue('test-value');
    },
    {
      name: 'TypeError',
      message: /Cannot read properties of null/
    }
  );
}

// Contract 4: useDeferredValue delegates value and initialValue to the active hook dispatcher
{
  let recordedCall = null;
  const mockDispatcher = {
    useDeferredValue(value, initialValue) {
      recordedCall = { value, initialValue };
      return initialValue !== undefined ? initialValue : value;
    }
  };

  const result = withCustomDispatcher(() => {
    return useDeferredValue('updated-term', 'initial-term');
  }, mockDispatcher);

  assert.deepStrictEqual(recordedCall, {
    value: 'updated-term',
    initialValue: 'initial-term'
  });
  assert.strictEqual(result, 'initial-term');
}

// Contract 5: useDeferredValue supports single-argument invocation passing undefined as initialValue to the dispatcher
{
  let recordedCall = null;
  const mockDispatcher = {
    useDeferredValue(value, initialValue) {
      recordedCall = { value, initialValue };
      return value;
    }
  };

  const result = withCustomDispatcher(() => {
    return useDeferredValue('current-input');
  }, mockDispatcher);

  assert.deepStrictEqual(recordedCall, {
    value: 'current-input',
    initialValue: undefined
  });
  assert.strictEqual(result, 'current-input');
}

// Contract 6: SearchResults component executes useDeferredValue inside custom dispatcher and renders React element
{
  const mockDispatcher = {
    useDeferredValue(value, initialValue) {
      return initialValue || value;
    }
  };

  const rendered = withCustomDispatcher(() => {
    return SearchResults({ query: 'deferred-search', initialQuery: 'placeholder' });
  }, mockDispatcher);

  assert.strictEqual(React.isValidElement(rendered), true);
  assert.strictEqual(rendered.type, 'div');
  assert.strictEqual(rendered.props['data-deferred'], 'placeholder');
  assert.strictEqual(rendered.props.children, 'placeholder');
}

console.log('All useDeferredValue contract tests passed.');