[compiler] enablePreserveExistingMemo memoizes primitive-returning functions

`@enablePreserveExistingMemoizationGuarantees` mode currently does not guarantee memoization of primitive-returning functions. We're often able to infer that a function returns a primitive based on how its result is used, for example `foo() + 1` or `object[getIndex()]`, and by default we do not currently memoize computation that produces a primitive. The reasoning behind this is that the compiler is primarily focused on stopping cascading updates — it's fine to recompute a primitive since we can cheaply compare that primitive and avoid unnecessary downstream recomputation. But we've gotten a lot of feedback that people find this surprising, and that sometimes the computation can be expensive enough that it should be memoized.

This PR changes `@enablePreserveExistingMemoizationGuarantees` mode to ensure that primitive-returning functions get memoized. Other modes will not memoize these functions. Separately from this we are considering enabling this mode by default.

.codesandbox/ci.json

@@ -1,7 +1,7 @@
 {
   "packages": ["packages/react", "packages/react-dom", "packages/react-server-dom-webpack", "packages/scheduler"],
   "buildCommand": "download-build-in-codesandbox-ci",
-  "node": "18",
+  "node": "20",
   "publishDirectory": {
     "react": "build/oss-experimental/react",
     "react-dom": "build/oss-experimental/react-dom",

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AlignReactiveScopesToBlockScopesHIR.ts

@@ -175,6 +175,41 @@ export function alignReactiveScopesToBlockScopesHIR(fn: HIRFunction): void {
       if (node != null) {
         valueBlockNodes.set(fallthrough, node);
       }
+    } else if (terminal.kind === 'goto') {
+      /**
+       * If we encounter a goto that is not to the natural fallthrough of the current
+       * block (not the topmost fallthrough on the stack), then this is a goto to a
+       * label. Any scopes that extend beyond the goto must be extended to include
+       * the labeled range, so that the break statement doesn't accidentally jump
+       * out of the scope. We do this by extending the start and end of the scope's
+       * range to the label and its fallthrough respectively.
+       */
+      const start = activeBlockFallthroughRanges.find(
+        range => range.fallthrough === terminal.block,
+      );
+      if (start != null && start !== activeBlockFallthroughRanges.at(-1)) {
+        const fallthroughBlock = fn.body.blocks.get(start.fallthrough)!;
+        const firstId =
+          fallthroughBlock.instructions[0]?.id ?? fallthroughBlock.terminal.id;
+        for (const scope of activeScopes) {
+          /**
+           * activeScopes is only filtered at block start points, so some of the
+           * scopes may not actually be active anymore, ie we've past their end
+           * instruction. Only extend ranges for scopes that are actually active.
+           *
+           * TODO: consider pruning activeScopes per instruction
+           */
+          if (scope.range.end <= terminal.id) {
+            continue;
+          }
+          scope.range.start = makeInstructionId(
+            Math.min(start.range.start, scope.range.start),
+          );
+          scope.range.end = makeInstructionId(
+            Math.max(firstId, scope.range.end),
+          );
+        }
+      }
     }
 
     /*

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneNonEscapingScopes.ts

@@ -411,7 +411,9 @@ class CollectDependenciesVisitor extends ReactiveFunctionVisitor<
     this.state = state;
     this.options = {
       memoizeJsxElements: !this.env.config.enableForest,
-      forceMemoizePrimitives: this.env.config.enableForest,
+      forceMemoizePrimitives:
+        this.env.config.enableForest ||
+        this.env.config.enablePreserveExistingMemoizationGuarantees,
     };
   }
 
@@ -534,9 +536,23 @@ class CollectDependenciesVisitor extends ReactiveFunctionVisitor<
       case 'JSXText':
       case 'BinaryExpression':
       case 'UnaryExpression': {
-        const level = options.forceMemoizePrimitives
-          ? MemoizationLevel.Memoized
-          : MemoizationLevel.Never;
+        if (options.forceMemoizePrimitives) {
+          /**
+           * Because these instructions produce primitives we usually don't consider
+           * them as escape points: they are known to copy, not return references.
+           * However if we're forcing memoization of primitives then we mark these
+           * instructions as needing memoization and walk their rvalues to ensure
+           * any scopes transitively reachable from the rvalues are considered for
+           * memoization. Note: we may still prune primitive-producing scopes if
+           * they don't ultimately escape at all.
+           */
+          const level = MemoizationLevel.Memoized;
+          return {
+            lvalues: lvalue !== null ? [{place: lvalue, level}] : [],
+            rvalues: [...eachReactiveValueOperand(value)],
+          };
+        }
+        const level = MemoizationLevel.Never;
         return {
           // All of these instructions return a primitive value and never need to be memoized
           lvalues: lvalue !== null ? [{place: lvalue, level}] : [],

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-if.expect.md

@@ -46,14 +46,16 @@ function useFoo(t0) {
     t1 = $[0];
   }
   let items = t1;
-  bb0: if ($[1] !== cond) {
-    if (cond) {
-      items = [];
-    } else {
-      break bb0;
-    }
+  if ($[1] !== cond) {
+    bb0: {
+      if (cond) {
+        items = [];
+      } else {
+        break bb0;
+      }
 
-    items.push(2);
+      items.push(2);
+    }
     $[1] = cond;
     $[2] = items;
   } else {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-memoize-primitive-function-call-non-escaping-useMemo.expect.md

@@ -0,0 +1,77 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  const result = useMemo(
+    () => makeObject(props.value).value + 1,
+    [props.value]
+  );
+  console.log(result);
+  return 'ok';
+}
+
+function makeObject(value) {
+  console.log(value);
+  return {value};
+}
+
+export const TODO_FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [
+    {value: 42},
+    {value: 42},
+    {value: 3.14},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
+import { useMemo } from "react";
+import { makeObject_Primitives, ValidateMemoization } from "shared-runtime";
+
+function Component(props) {
+  const result = makeObject(props.value).value + 1;
+
+  console.log(result);
+  return "ok";
+}
+
+function makeObject(value) {
+  console.log(value);
+  return { value };
+}
+
+export const TODO_FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+  sequentialRenders: [
+    { value: 42 },
+    { value: 42 },
+    { value: 3.14 },
+    { value: 3.14 },
+    { value: 42 },
+    { value: 3.14 },
+    { value: 42 },
+    { value: 3.14 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-memoize-primitive-function-call-non-escaping-useMemo.js

@@ -0,0 +1,32 @@
+// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  const result = useMemo(
+    () => makeObject(props.value).value + 1,
+    [props.value]
+  );
+  console.log(result);
+  return 'ok';
+}
+
+function makeObject(value) {
+  console.log(value);
+  return {value};
+}
+
+export const TODO_FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [
+    {value: 42},
+    {value: 42},
+    {value: 3.14},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+  ],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-memoize-primitive-function-call-non-escaping.expect.md

@@ -0,0 +1,81 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  const result = makeObject(props.value).value + 1;
+  console.log(result);
+  return 'ok';
+}
+
+function makeObject(value) {
+  console.log(value);
+  return {value};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [
+    {value: 42},
+    {value: 42},
+    {value: 3.14},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
+import { useMemo } from "react";
+import { makeObject_Primitives, ValidateMemoization } from "shared-runtime";
+
+function Component(props) {
+  const result = makeObject(props.value).value + 1;
+  console.log(result);
+  return "ok";
+}
+
+function makeObject(value) {
+  console.log(value);
+  return { value };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+  sequentialRenders: [
+    { value: 42 },
+    { value: 42 },
+    { value: 3.14 },
+    { value: 3.14 },
+    { value: 42 },
+    { value: 3.14 },
+    { value: 42 },
+    { value: 3.14 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) "ok"
+"ok"
+"ok"
+"ok"
+"ok"
+"ok"
+"ok"
+"ok"
+logs: [42,43,42,43,3.14,4.140000000000001,3.14,4.140000000000001,42,43,3.14,4.140000000000001,42,43,3.14,4.140000000000001]

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-memoize-primitive-function-call-non-escaping.js

@@ -0,0 +1,29 @@
+// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  const result = makeObject(props.value).value + 1;
+  console.log(result);
+  return 'ok';
+}
+
+function makeObject(value) {
+  console.log(value);
+  return {value};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [
+    {value: 42},
+    {value: 42},
+    {value: 3.14},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+  ],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-primitive-function-calls.expect.md

@@ -0,0 +1,107 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  const result = useMemo(() => {
+    return makeObject(props.value).value + 1;
+  }, [props.value]);
+  return <ValidateMemoization inputs={[props.value]} output={result} />;
+}
+
+function makeObject(value) {
+  console.log(value);
+  return {value};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [
+    {value: 42},
+    {value: 42},
+    {value: 3.14},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
+import { useMemo } from "react";
+import { makeObject_Primitives, ValidateMemoization } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(7);
+  let t0;
+  if ($[0] !== props.value) {
+    t0 = makeObject(props.value);
+    $[0] = props.value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const result = t0.value + 1;
+  let t1;
+  if ($[2] !== props.value) {
+    t1 = [props.value];
+    $[2] = props.value;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] !== result || $[5] !== t1) {
+    t2 = <ValidateMemoization inputs={t1} output={result} />;
+    $[4] = result;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+function makeObject(value) {
+  console.log(value);
+  return { value };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+  sequentialRenders: [
+    { value: 42 },
+    { value: 42 },
+    { value: 3.14 },
+    { value: 3.14 },
+    { value: 42 },
+    { value: 3.14 },
+    { value: 42 },
+    { value: 3.14 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[42],"output":43}</div>
+<div>{"inputs":[42],"output":43}</div>
+<div>{"inputs":[3.14],"output":4.140000000000001}</div>
+<div>{"inputs":[3.14],"output":4.140000000000001}</div>
+<div>{"inputs":[42],"output":43}</div>
+<div>{"inputs":[3.14],"output":4.140000000000001}</div>
+<div>{"inputs":[42],"output":43}</div>
+<div>{"inputs":[3.14],"output":4.140000000000001}</div>
+logs: [42,3.14,42,3.14,42,3.14]

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-primitive-function-calls.js

@@ -0,0 +1,30 @@
+// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  const result = useMemo(() => {
+    return makeObject(props.value).value + 1;
+  }, [props.value]);
+  return <ValidateMemoization inputs={[props.value]} output={result} />;
+}
+
+function makeObject(value) {
+  console.log(value);
+  return {value};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [
+    {value: 42},
+    {value: 42},
+    {value: 3.14},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+  ],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx-and-break.expect.md

@@ -49,12 +49,12 @@ import {
 } from "shared-runtime";
 
 function useFoo(t0) {
-  const $ = _c(3);
+  const $ = _c(4);
   const { data } = t0;
   let obj;
   let myDiv = null;
-  bb0: if (data.cond) {
-    if ($[0] !== data.cond1) {
+  if ($[0] !== data.cond || $[1] !== data.cond1) {
+    bb0: if (data.cond) {
       obj = makeObject_Primitives();
       if (data.cond1) {
         myDiv = <Stringify value={mutateAndReturn(obj)} />;
@@ -62,13 +62,14 @@ function useFoo(t0) {
       }
 
       mutate(obj);
-      $[0] = data.cond1;
-      $[1] = obj;
-      $[2] = myDiv;
-    } else {
-      obj = $[1];
-      myDiv = $[2];
     }
+    $[0] = data.cond;
+    $[1] = data.cond1;
+    $[2] = obj;
+    $[3] = myDiv;
+  } else {
+    obj = $[2];
+    myDiv = $[3];
   }
   return myDiv;
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/useMemo-multiple-if-else.expect.md

@@ -34,17 +34,16 @@ import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
 import { useMemo } from "react";
 
 function Component(props) {
-  const $ = _c(6);
+  const $ = _c(5);
   let t0;
-  bb0: {
-    let y;
-    if (
-      $[0] !== props.a ||
-      $[1] !== props.b ||
-      $[2] !== props.cond ||
-      $[3] !== props.cond2
-    ) {
-      y = [];
+  if (
+    $[0] !== props.a ||
+    $[1] !== props.b ||
+    $[2] !== props.cond ||
+    $[3] !== props.cond2
+  ) {
+    bb0: {
+      const y = [];
       if (props.cond) {
         y.push(props.a);
       }
@@ -54,17 +53,15 @@ function Component(props) {
       }
 
       y.push(props.b);
-      $[0] = props.a;
-      $[1] = props.b;
-      $[2] = props.cond;
-      $[3] = props.cond2;
-      $[4] = y;
-      $[5] = t0;
-    } else {
-      y = $[4];
-      t0 = $[5];
+      t0 = y;
     }
-    t0 = y;
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.cond;
+    $[3] = props.cond2;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
   }
   const x = t0;
   return x;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-useMemo-if-else-both-early-return.expect.md

@@ -0,0 +1,118 @@
+
+## Input
+
+```javascript
+import {useMemo} from 'react';
+import {
+  makeObject_Primitives,
+  mutate,
+  Stringify,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({cond}) {
+  const memoized = useMemo(() => {
+    const value = makeObject_Primitives();
+    if (cond) {
+      return value;
+    } else {
+      mutate(value);
+      return value;
+    }
+  }, [cond]);
+  return <ValidateMemoization inputs={[cond]} output={memoized} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false}],
+  sequentialRenders: [
+    {cond: false},
+    {cond: false},
+    {cond: true},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useMemo } from "react";
+import {
+  makeObject_Primitives,
+  mutate,
+  Stringify,
+  ValidateMemoization,
+} from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(7);
+  const { cond } = t0;
+  let t1;
+  if ($[0] !== cond) {
+    const value = makeObject_Primitives();
+    if (cond) {
+      t1 = value;
+    } else {
+      mutate(value);
+      t1 = value;
+    }
+    $[0] = cond;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const memoized = t1;
+  let t2;
+  if ($[2] !== cond) {
+    t2 = [cond];
+    $[2] = cond;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== memoized || $[5] !== t2) {
+    t3 = <ValidateMemoization inputs={t2} output={memoized} />;
+    $[4] = memoized;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: false }],
+  sequentialRenders: [
+    { cond: false },
+    { cond: false },
+    { cond: true },
+    { cond: true },
+    { cond: false },
+    { cond: true },
+    { cond: false },
+    { cond: true },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[false],"output":{"a":0,"b":"value1","c":true,"wat0":"joe"}}</div>
+<div>{"inputs":[false],"output":{"a":0,"b":"value1","c":true,"wat0":"joe"}}</div>
+<div>{"inputs":[true],"output":{"a":0,"b":"value1","c":true}}</div>
+<div>{"inputs":[true],"output":{"a":0,"b":"value1","c":true}}</div>
+<div>{"inputs":[false],"output":{"a":0,"b":"value1","c":true,"wat0":"joe"}}</div>
+<div>{"inputs":[true],"output":{"a":0,"b":"value1","c":true}}</div>
+<div>{"inputs":[false],"output":{"a":0,"b":"value1","c":true,"wat0":"joe"}}</div>
+<div>{"inputs":[true],"output":{"a":0,"b":"value1","c":true}}</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-useMemo-if-else-both-early-return.js

@@ -0,0 +1,35 @@
+import {useMemo} from 'react';
+import {
+  makeObject_Primitives,
+  mutate,
+  Stringify,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({cond}) {
+  const memoized = useMemo(() => {
+    const value = makeObject_Primitives();
+    if (cond) {
+      return value;
+    } else {
+      mutate(value);
+      return value;
+    }
+  }, [cond]);
+  return <ValidateMemoization inputs={[cond]} output={memoized} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false}],
+  sequentialRenders: [
+    {cond: false},
+    {cond: false},
+    {cond: true},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+  ],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-multiple-if-else.expect.md

@@ -33,17 +33,16 @@ import { c as _c } from "react/compiler-runtime";
 import { useMemo } from "react";
 
 function Component(props) {
-  const $ = _c(6);
+  const $ = _c(5);
   let t0;
-  bb0: {
-    let y;
-    if (
-      $[0] !== props.a ||
-      $[1] !== props.b ||
-      $[2] !== props.cond ||
-      $[3] !== props.cond2
-    ) {
-      y = [];
+  if (
+    $[0] !== props.a ||
+    $[1] !== props.b ||
+    $[2] !== props.cond ||
+    $[3] !== props.cond2
+  ) {
+    bb0: {
+      const y = [];
       if (props.cond) {
         y.push(props.a);
       }
@@ -53,17 +52,15 @@ function Component(props) {
       }
 
       y.push(props.b);
-      $[0] = props.a;
-      $[1] = props.b;
-      $[2] = props.cond;
-      $[3] = props.cond2;
-      $[4] = y;
-      $[5] = t0;
-    } else {
-      y = $[4];
-      t0 = $[5];
+      t0 = y;
     }
-    t0 = y;
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.cond;
+    $[3] = props.cond2;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
   }
   const x = t0;
   return x;

packages/eslint-plugin-react-hooks/README.md

@@ -22,15 +22,22 @@ yarn add eslint-plugin-react-hooks --dev
 
 #### >= 6.0.0
 
-For users of 6.0 and beyond, simply add the `recommended` config.
+For users of 6.0 and beyond, add the `recommended` config.
 
 ```js
-import * as reactHooks from 'eslint-plugin-react-hooks';
+// eslint.config.js
+import reactHooks from 'eslint-plugin-react-hooks';
+import { defineConfig } from 'eslint/config';
 
-export default [
-  // ...
-  reactHooks.configs.recommended,
-];
+export default defineConfig([
+  {
+    files: ["src/**/*.{js,jsx,ts,tsx}"],
+    plugins: {
+      'react-hooks': reactHooks,
+    },
+    extends: ['react-hooks/recommended'],
+  },
+]);
 ```
 
 #### 5.2.0
@@ -38,12 +45,18 @@ export default [
 For users of 5.2.0 (the first version with flat config support), add the `recommended-latest` config.
 
 ```js
-import * as reactHooks from 'eslint-plugin-react-hooks';
+import reactHooks from 'eslint-plugin-react-hooks';
+import { defineConfig } from 'eslint/config';
 
-export default [
-  // ...
-  reactHooks.configs['recommended-latest'],
-];
+export default defineConfig([
+  {
+    files: ["src/**/*.{js,jsx,ts,tsx}"],
+    plugins: {
+      'react-hooks': reactHooks,
+    },
+    extends: ['react-hooks/recommended-latest'],
+  },
+]);
 ```
 
 ### Legacy Config (.eslintrc)