compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dispatch-spread-event-marks-event-frozen.expect.md
...Component() {
const dispatch = useDispatch();
// const [state, setState] = useState(0);
return (
{
...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-capturing-map-after-hook.expect.md
## Input
```javascript
import {useEffect, useState} from 'react';
import {mutate} from 'shared-runtime';
function Component(props) {
const x =...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-mutable-map-after-hook.expect.md
## Input
```javascript
import {useEffect, useState} from 'react';
import {mutate} from 'shared-runtime';
function Component(props) {
const x =...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-import-specifier.expect.md
## Input
```javascript
import type {SetStateAction, Dispatch} from 'react';
import {useState} from 'react';
function Component(_props: {}) {
const [x, _setX]: [number, Dispatch
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-memoize-array-with-immutable-map-after-hook.expect.md
## Input
```javascript
import {useEffect, useState} from 'react';
function Component(props) {
const x = [props.value];
useEffect(() => {},...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutable-range-extending-into-ternary.expect.md
## Input
```javascript
import {useState} from 'react';
function Component(props) {
const items = props.items ? props.items.slice()...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-stale-closure-forward-reference.expect.md
## Input
```javascript
import {useState} from 'react';
/**
* Repro for https://github.com/facebook/react/issues/35122
*
*...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-unreachable-code-early-return-in-useMemo.expect.md
...ableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
import {useMemo, useState} from 'react';
import {ValidateMemoization, identity} from 'shared-runtime';
function...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/resolve-react-hooks-based-on-import-name.expect.md
## Input
```javascript
import {useState as useReactState} from 'react';
function Component() {
const [state, setState] =...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-9718e30b856c.expect.md
... if (a) return;
if (b) {
console.log('true');
} else {
console.log('false');
}
useState();
}
```
## Error
```
Found 1 error:
Error: Hooks must always be called in a consistent...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-c906cace44e9.expect.md
...might not warn otherwise.
// This *must* be invalid.
function useHook() {
if (a) return;
useState();
}
```
## Error
```
Found 1 error:
Error: Hooks must always be called in a consistent...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-f3d6c5e9c83d.expect.md
... if (b) {
console.log('true');
} else {
console.log('false');
}
if (a) return;
useState();
}
```
## Error
```
Found 1 error:
Error: Hooks must always be called in a consistent...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-f69800950ff0.expect.md
...not warn otherwise.
// This *must* be invalid.
function useHook({bar}) {
let foo1 = bar && useState();
let foo2 = bar || useState();
let foo3 = bar ?? useState();
}
```
## Error
```
Found...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-449a37146a83.expect.md
...{
return function ComponentWithHookInsideCallback() {
function handleClick() {
useState();
}
};
}
```
## Error
```
Found 1 error:
Error: Hooks must be called at the top...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-76a74b4666e9.expect.md
...be confusing.
function ComponentWithHookInsideCallback() {
function handleClick() {
useState();
}
}
```
## Error
```
Found 1 error:
Error: Hooks must be called at the top level in...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-0e2214abc294.expect.md
...endering
function RegressionTest() {
if (page == null) {
throw new Error('oh no!');
}
useState();
}
```
## Code
```javascript
// Valid because exceptions abort rendering
function...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-2e405c78cb80.expect.md
## Input
```javascript
// Valid because hooks can call hooks.
function useHook() {
useState() && a;
}
```
## Code
```javascript
// Valid because hooks can call hooks.
function...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-69521d94fa03.expect.md
...{
if (propName === true) {
} else {
}
}
const [myState, setMyState] = useState(null);
}
```
## Code
```javascript
// Valid because the neither the condition nor the loop...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-c5d1f3143c4c.expect.md
...for incorrectly flagged valid code.
function RegressionTest() {
const foo = cond ? a : b;
useState();
}
```
## Code
```javascript
// Regression test for incorrectly flagged valid...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-df4d750736f3.expect.md
...@expectNothingCompiled
// Valid because they're not matching use[A-Z].
fooState();
_use();
_useState();
use_hook();
// also valid because it's not matching the PascalCase namespace
jest.useFakeTim...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-e0a5db3ae21e.expect.md
...@skip
// Unsupported input
// Valid because hooks can call hooks.
function useHook() {
useState();
}
const whatever = function useHook() {
useState();
};
const useHook1 = () => {
...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-fadd52c1e460.expect.md
... doing it,
// consider specific cases documented above that contain reasoning.
function a() {
useState();
}
const whatever = function b() {
useState();
};
const c = () => {
useState();
};
let d...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-e29c874aa913.expect.md
... might not warn otherwise.
// This *must* be invalid.
function useHook() {
try {
f();
useState();
} catch {}
}
```
## Error
```
Found 1 error:
Error: Hooks must always be called in a...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-191029ac48c8.expect.md
... they are confusing anyway due to the use*() convention
// already being associated with Hooks.
useState();
if (foo) {
const foo = React.useCallback(() => {});
}
useCustomHook();
```
##...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-2c51251df67a.expect.md
...@expectNothingCompiled @skip
// Passed but should have failed
(class {
useHook() {
useState();
}
});
```
## Code
```javascript
// @expectNothingCompiled @skip
// Passed but should...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-8303403b8e4c.expect.md
...have failed
class ClassComponentWithHook extends React.Component {
render() {
React.useState();
}
}
```
## Code
```javascript
// @expectNothingCompiled @skip
// Passed but should...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-9c79feec4b9b.expect.md
...@expectNothingCompiled @skip
// Passed but should have failed
(class {
h = () => {
useState();
};
});
```
## Code
```javascript
// @expectNothingCompiled @skip
// Passed but should...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-ddeca9708b63.expect.md
...@expectNothingCompiled @skip
// Passed but should have failed
(class {
i() {
useState();
}
});
```
## Code
```javascript
// @expectNothingCompiled @skip
// Passed but should...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-e675f0a672d8.expect.md
...dangerous and might not warn otherwise.
// This *must* be invalid.
function renderItem() {
useState();
}
function List(props) {
return props.items.map(renderItem);
}
```
## Code
```javascri...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-e69ffce323c3.expect.md
...@expectNothingCompiled @skip
// Passed but should have failed
(class {
useHook = () => {
useState();
};
});
```
## Code
```javascript
// @expectNothingCompiled @skip
// Passed but should...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/optimize-ssr.expect.md
...nput
```javascript
// @enableOptimizeForSSR
function Component() {
const [state, setState] = useState(0);
const ref = useRef(null);
const onChange = e => {
setState(e.target.value);
};
...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-infer-event-handlers-from-setState.expect.md
...nput
```javascript
// @enableOptimizeForSSR
function Component() {
const [state, setState] = useState(0);
const ref = useRef(null);
const onChange = e => {
// The known setState call...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-infer-event-handlers-from-startTransition.expect.md
...Component() {
const [, startTransition] = useTransition();
const [state, setState] = useState(0);
const ref = useRef(null);
const onChange = e => {
// The known startTransition...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-callback-simple.expect.md
...idateExhaustiveMemoizationDependencies:false
function component() {
const [count, setCount] = useState(0);
const increment = useCallback(() => setCount(count + 1));
return
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-effect-cleanup-reassigns.expect.md
## Input
```javascript
import {useEffect, useState} from 'react';
/**
* Example of a function expression whose return value shouldn't have
* a...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-snap-test.expect.md
## Input
```javascript
import {useEffect, useState} from 'react';
function Component() {
const [state, setState] = useState('hello');
...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-set-state-in-useEffect-from-ref.expect.md
## Input
```javascript
// @validateNoSetStateInEffects @outputMode:"lint"
import {useState, useRef, useEffect} from 'react';
function Tooltip() {
const ref = useRef(null);
const...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-arithmetic.expect.md
...@validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
import {useState, useRef, useLayoutEffect} from 'react';
function Component() {
const ref = useRef({size:...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-array-index.expect.md
...@validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
import {useState, useRef, useEffect} from 'react';
function Component() {
const ref = useRef([1, 2, 3, 4,...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-function-call.expect.md
...@validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
import {useState, useRef, useEffect} from 'react';
function Component() {
const ref = useRef(null);
const...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-controlled-by-ref-value.expect.md
...owSetStateFromRefsInEffects @loggerTestOnly @compilationMode:"infer" @outputMode:"lint"
import {useState, useRef, useEffect} from 'react';
function Component({x, y}) {
const previousXRef =...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.expect.md
## Input
```javascript
// @validateNoSetStateInEffects @outputMode:"lint"
import {useEffect, useState} from 'react';
function Component() {
const [state, setState] = useState(0);
useEffect(()...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.expect.md
## Input
```javascript
// @validateNoSetStateInEffects @outputMode:"lint"
import {useEffect, useState} from 'react';
function Component() {
const [state, setState] = useState(0);
useEffect(()...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-via-useEffectEvent-listener.expect.md
...NoSetStateInEffects @loggerTestOnly @compilationMode:"infer"
import {useEffect, useEffectEvent, useState} from 'react';
const shouldSetState = false;
function Component() {
const [state,...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-via-useEffectEvent-with-ref.expect.md
...@enableAllowSetStateFromRefsInEffects @loggerTestOnly @compilationMode:"infer"
import {useState, useRef, useEffect, useEffectEvent} from 'react';
function Component({x, y}) {
const...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useLayoutEffect-from-ref.expect.md
...@validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
import {useState, useRef, useLayoutEffect} from 'react';
function Tooltip() {
const ref = useRef(null);
...
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-uncalled-function-with-mutable-range-is-valid.expect.md
...{
const logEvent = useLogging(props.appId);
const [currentStep, setCurrentStep] = useState(0);
// onSubmit gets the same mutable range as `logEvent`, since that is called
// later....
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-unconditional-lambda-which-conditionally-sets-state-ok.expect.md
## Input
```javascript
// @validateNoSetStateInRender
import {useState} from 'react';
function Component(props) {
const [x, setX] = useState(0);
const foo = ()...
compiler/packages/snap/src/sprout/README.md
...enforce that only `isComponent: true` fixtures can use React hooks.
```ts
import {useState} from 'react';
```
- If your fixture wants to export multiple functions to Sprout to run,...
packages/react-devtools/CHANGELOG.md
...://github.com/bvaughn) in [#21520](https://github.com/facebook/react/pull/21520))
* Bugfix for `useState()` object with `hasOwnProperty` key ([bvaughn](https://github.com/bvaughn) in [#21524](https://...
packages/react/README.md
...mance.html#use-the-production-build) when deploying your application.
## Usage
```js
import { useState } from 'react';
import { createRoot } from 'react-dom/client';
function Counter() {
const...
Note: By default, only markdown files (.md, .mdx) are searched. To search other file types, use a glob parameter like ?glob=**/* or ?glob=**/*.ts