@samitouri / QOS-React / commits / 79dc706498

[compiler] Improve ref validation error message (#34003)

Improves the error message for ValidateNoRefAccessInRender, using the new diagnostic type as well as providing a longer but succinct summary of what refs are for and why they're unsafe to access in render. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34003). * #34027 * #34026 * #34025 * #34024 * #34005 * #34006 * #34004 * __->__ #34003

Joseph Savona committed Jul 29, 2025 at 10:03 UTC 79dc706498c4f8ef077167898492693197e1b975

34 files changed +270 -192

compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.ts

+112 -68

@@ -5,7 +5,11 @@

5 * LICENSE file in the root directory of this source tree.

6 */

8 -import {CompilerError, ErrorSeverity} from '../CompilerError';

8 +import {

9 + CompilerDiagnostic,

10 + CompilerError,

11 + ErrorSeverity,

12 +} from '../CompilerError';

13 import {

14 BlockId,

15 HIRFunction,

@@ -385,28 +389,40 @@ function validateNoRefAccessInRenderImpl(

389 const hookKind = getHookKindForType(fn.env, callee.identifier.type);

390 let returnType: RefAccessType = {kind: 'None'};

391 const fnType = env.get(callee.identifier.id);

392 + let didError = false;

393 if (fnType?.kind === 'Structure' && fnType.fn !== null) {

394 returnType = fnType.fn.returnType;

395 if (fnType.fn.readRefEffect) {

391 - errors.push({

392 - severity: ErrorSeverity.InvalidReact,

393 - reason:

394 - 'This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef)',

395 - loc: callee.loc,

396 - description:

397 - callee.identifier.name !== null &&

398 - callee.identifier.name.kind === 'named'

399 - ? `Function \`${callee.identifier.name.value}\` accesses a ref`

400 - : null,

401 - suggestions: null,

402 - });

396 + didError = true;

397 + errors.pushDiagnostic(

398 + CompilerDiagnostic.create({

399 + severity: ErrorSeverity.InvalidReact,

400 + category: 'Cannot access refs during render',

401 + description: ERROR_DESCRIPTION,

402 + }).withDetail({

403 + kind: 'error',

404 + loc: callee.loc,

405 + message: `This function accesses a ref value`,

406 + }),

407 + );

408 }

409 }

405 - for (const operand of eachInstructionValueOperand(instr.value)) {

406 - if (hookKind != null) {

407 - validateNoDirectRefValueAccess(errors, operand, env);

408 - } else {

409 - validateNoRefAccess(errors, env, operand, operand.loc);

410 + if (!didError) {

411 + /*

412 + * If we already reported an error on this instruction, don't report

413 + * duplicate errors

414 + */

415 + for (const operand of eachInstructionValueOperand(instr.value)) {

416 + if (hookKind != null) {

417 + validateNoDirectRefValueAccess(errors, operand, env);

418 + } else {

419 + validateNoRefPassedToFunction(

420 + errors,

421 + env,

422 + operand,

423 + operand.loc,

424 + );

425 + }

426 }

427 }

428 env.set(instr.lvalue.identifier.id, returnType);

@@ -449,7 +465,7 @@ function validateNoRefAccessInRenderImpl(

465 ) {

466 safeBlocks.delete(block.id);

467 } else {

452 - validateNoRefAccess(errors, env, instr.value.object, instr.loc);

468 + validateNoRefUpdate(errors, env, instr.value.object, instr.loc);

469 }

470 for (const operand of eachInstructionValueOperand(instr.value)) {

471 if (operand === instr.value.object) {

@@ -583,18 +599,17 @@ function destructure(

599

600 function guardCheck(errors: CompilerError, operand: Place, env: Env): void {

601 if (env.get(operand.identifier.id)?.kind === 'Guard') {

586 - errors.push({

587 - severity: ErrorSeverity.InvalidReact,

588 - reason:

589 - 'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',

590 - loc: operand.loc,

591 - description:

592 - operand.identifier.name !== null &&

593 - operand.identifier.name.kind === 'named'

594 - ? `Cannot access ref value \`${operand.identifier.name.value}\``

595 - : null,

596 - suggestions: null,

597 - });

602 + errors.pushDiagnostic(

603 + CompilerDiagnostic.create({

604 + severity: ErrorSeverity.InvalidReact,

605 + category: 'Cannot access refs during render',

606 + description: ERROR_DESCRIPTION,

607 + }).withDetail({

608 + kind: 'error',

609 + loc: operand.loc,

610 + message: `Cannot access ref value during render`,

611 + }),

612 + );

613 }

614 }

615

@@ -608,22 +623,47 @@ function validateNoRefValueAccess(

623 type?.kind === 'RefValue' ||

624 (type?.kind === 'Structure' && type.fn?.readRefEffect)

625 ) {

611 - errors.push({

612 - severity: ErrorSeverity.InvalidReact,

613 - reason:

614 - 'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',

615 - loc: (type.kind === 'RefValue' && type.loc) || operand.loc,

616 - description:

617 - operand.identifier.name !== null &&

618 - operand.identifier.name.kind === 'named'

619 - ? `Cannot access ref value \`${operand.identifier.name.value}\``

620 - : null,

621 - suggestions: null,

622 - });

626 + errors.pushDiagnostic(

627 + CompilerDiagnostic.create({

628 + severity: ErrorSeverity.InvalidReact,

629 + category: 'Cannot access refs during render',

630 + description: ERROR_DESCRIPTION,

631 + }).withDetail({

632 + kind: 'error',

633 + loc: (type.kind === 'RefValue' && type.loc) || operand.loc,

634 + message: `Cannot access ref value during render`,

635 + }),

636 + );

637 + }

638 +}

639 +

640 +function validateNoRefPassedToFunction(

641 + errors: CompilerError,

642 + env: Env,

643 + operand: Place,

644 + loc: SourceLocation,

645 +): void {

646 + const type = destructure(env.get(operand.identifier.id));

647 + if (

648 + type?.kind === 'Ref' ||

649 + type?.kind === 'RefValue' ||

650 + (type?.kind === 'Structure' && type.fn?.readRefEffect)

651 + ) {

652 + errors.pushDiagnostic(

653 + CompilerDiagnostic.create({

654 + severity: ErrorSeverity.InvalidReact,

655 + category: 'Cannot access refs during render',

656 + description: ERROR_DESCRIPTION,

657 + }).withDetail({

658 + kind: 'error',

659 + loc: (type.kind === 'RefValue' && type.loc) || loc,

660 + message: `Passing a ref to a function may read its value during render`,

661 + }),

662 + );

663 }

664 }

665

626 -function validateNoRefAccess(

666 +function validateNoRefUpdate(

667 errors: CompilerError,

668 env: Env,

669 operand: Place,

@@ -635,18 +675,17 @@ function validateNoRefAccess(

675 type?.kind === 'RefValue' ||

676 (type?.kind === 'Structure' && type.fn?.readRefEffect)

677 ) {

638 - errors.push({

639 - severity: ErrorSeverity.InvalidReact,

640 - reason:

641 - 'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',

642 - loc: (type.kind === 'RefValue' && type.loc) || loc,

643 - description:

644 - operand.identifier.name !== null &&

645 - operand.identifier.name.kind === 'named'

646 - ? `Cannot access ref value \`${operand.identifier.name.value}\``

647 - : null,

648 - suggestions: null,

649 - });

678 + errors.pushDiagnostic(

679 + CompilerDiagnostic.create({

680 + severity: ErrorSeverity.InvalidReact,

681 + category: 'Cannot access refs during render',

682 + description: ERROR_DESCRIPTION,

683 + }).withDetail({

684 + kind: 'error',

685 + loc: (type.kind === 'RefValue' && type.loc) || loc,

686 + message: `Cannot update ref during render`,

687 + }),

688 + );

689 }

690 }

691

@@ -657,17 +696,22 @@ function validateNoDirectRefValueAccess(

696 ): void {

697 const type = destructure(env.get(operand.identifier.id));

698 if (type?.kind === 'RefValue') {

660 - errors.push({

661 - severity: ErrorSeverity.InvalidReact,

662 - reason:

663 - 'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',

664 - loc: type.loc ?? operand.loc,

665 - description:

666 - operand.identifier.name !== null &&

667 - operand.identifier.name.kind === 'named'

668 - ? `Cannot access ref value \`${operand.identifier.name.value}\``

669 - : null,

670 - suggestions: null,

671 - });

699 + errors.pushDiagnostic(

700 + CompilerDiagnostic.create({

701 + severity: ErrorSeverity.InvalidReact,

702 + category: 'Cannot access refs during render',

703 + description: ERROR_DESCRIPTION,

704 + }).withDetail({

705 + kind: 'error',

706 + loc: type.loc ?? operand.loc,

707 + message: `Cannot access ref value during render`,

708 + }),

709 + );

710 }

711 }

712 +

713 +const ERROR_DESCRIPTION =

714 + 'React refs are values that are not needed for rendering. Refs should only be accessed ' +

715 + 'outside of render, such as in event handlers or effects. ' +

716 + 'Accessing a ref value (the `current` property) during render can cause your component ' +

717 + 'not to update as expected (https://react.dev/reference/react/useRef)';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-mutation.expect.md

+7 -25

@@ -32,48 +32,30 @@ export const FIXTURE_ENTRYPOINT = {

32 ## Error

34 ```

35 -Found 4 errors:

35 +Found 2 errors:

37 -Error: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef)

37 +Error: Cannot access refs during render

39 -error.capture-ref-for-mutation.ts:12:13

40 - 10 | };

41 - 11 | const moveLeft = {

42 -> 12 | handler: handleKey('left')(),

43 - | ^^^^^^^^^^^^^^^^^ This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef)

44 - 13 | };

45 - 14 | const moveRight = {

46 - 15 | handler: handleKey('right')(),

47 -

48 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

39 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

41 error.capture-ref-for-mutation.ts:12:13

42 10 | };

43 11 | const moveLeft = {

44 > 12 | handler: handleKey('left')(),

54 - | ^^^^^^^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

45 + | ^^^^^^^^^^^^^^^^^ This function accesses a ref value

46 13 | };

47 14 | const moveRight = {

48 15 | handler: handleKey('right')(),

59 -Error: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef)

60 -

61 -error.capture-ref-for-mutation.ts:15:13

62 - 13 | };

63 - 14 | const moveRight = {

64 -> 15 | handler: handleKey('right')(),

65 - | ^^^^^^^^^^^^^^^^^^ This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef)

66 - 16 | };

67 - 17 | return [moveLeft, moveRight];

68 - 18 | }

50 +Error: Cannot access refs during render

70 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

52 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

54 error.capture-ref-for-mutation.ts:15:13

55 13 | };

56 14 | const moveRight = {

57 > 15 | handler: handleKey('right')(),

76 - | ^^^^^^^^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

58 + | ^^^^^^^^^^^^^^^^^^ This function accesses a ref value

59 16 | };

60 17 | return [moveLeft, moveRight];

61 18 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-ref-value.expect.md

+8 -4

@@ -22,24 +22,28 @@ export const FIXTURE_ENTRYPOINT = {

22 ```

23 Found 2 errors:

25 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

25 +Error: Cannot access refs during render

26 +

27 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

29 error.hook-ref-value.ts:5:23

30 3 | function Component(props) {

31 4 | const ref = useRef();

32 > 5 | useEffect(() => {}, [ref.current]);

31 - | ^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

33 + | ^^^^^^^^^^^ Cannot access ref value during render

34 6 | }

35 7 |

36 8 | export const FIXTURE_ENTRYPOINT = {

36 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

38 +Error: Cannot access refs during render

39 +

40 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

42 error.hook-ref-value.ts:5:23

43 3 | function Component(props) {

44 4 | const ref = useRef();

45 > 5 | useEffect(() => {}, [ref.current]);

42 - | ^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

46 + | ^^^^^^^^^^^ Cannot access ref value during render

47 6 | }

48 7 |

49 8 | export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md

+4 -2

@@ -17,13 +17,15 @@ function Component(props) {

17 ```

18 Found 1 error:

20 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

20 +Error: Cannot access refs during render

21 +

22 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

24 error.invalid-access-ref-during-render.ts:4:16

25 2 | function Component(props) {

26 3 | const ref = useRef(null);

27 > 4 | const value = ref.current;

26 - | ^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

28 + | ^^^^^^^^^^^ Cannot access ref value during render

29 5 | return value;

30 6 | }

31 7 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.expect.md

+4 -2

@@ -21,13 +21,15 @@ function Component(props) {

21 ```

22 Found 1 error:

24 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

24 +Error: Cannot access refs during render

25 +

26 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

28 error.invalid-aliased-ref-in-callback-invoked-during-render-.ts:9:33

29 7 | return <Foo item={item} current={current} />;

30 8 | };

31 > 9 | return <Items>{props.items.map(item => renderItem(item))}</Items>;

30 - | ^^^^^^^^^^^^^^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

32 + | ^^^^^^^^^^^^^^^^^^^^^^^^ Passing a ref to a function may read its value during render

33 10 | }

34 11 |

35 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assign-current-inferred-ref-during-render.expect.md

+4 -2

@@ -20,12 +20,14 @@ component Example() {

20 ```

21 Found 1 error:

23 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

23 +Error: Cannot access refs during render

24 +

25 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

27 4 | component Example() {

28 5 | const fooRef = makeObject_Primitives();

29 > 6 | fooRef.current = true;

28 - | ^^^^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

30 + | ^^^^^^^^^^^^^^ Cannot update ref during render

31 7 |

32 8 | return <Stringify foo={fooRef} />;

33 9 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.expect.md

+4 -2

@@ -18,13 +18,15 @@ function Component() {

18 ```

19 Found 1 error:

21 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

21 +Error: Cannot access refs during render

22 +

23 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

25 error.invalid-disallow-mutating-ref-in-render.ts:4:2

26 2 | function Component() {

27 3 | const ref = useRef(null);

28 > 4 | ref.current = false;

27 - | ^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

29 + | ^^^^^^^^^^^ Cannot update ref during render

30 5 |

31 6 | return <button ref={ref} />;

32 7 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md

+4 -13

@@ -21,26 +21,17 @@ function Component() {

21 ## Error

23 ```

24 -Found 2 errors:

24 +Found 1 error:

26 -Error: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef)

26 +Error: Cannot access refs during render

28 -error.invalid-disallow-mutating-refs-in-render-transitive.ts:9:2

29 - 7 | };

30 - 8 | const changeRef = setRef;

31 -> 9 | changeRef();

32 - | ^^^^^^^^^ This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef)

33 - 10 |

34 - 11 | return <button ref={ref} />;

35 - 12 | }

36 -

37 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

28 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

30 error.invalid-disallow-mutating-refs-in-render-transitive.ts:9:2

31 7 | };

32 8 | const changeRef = setRef;

33 > 9 | changeRef();

43 - | ^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

34 + | ^^^^^^^^^ This function accesses a ref value

35 10 |

36 11 | return <button ref={ref} />;

37 12 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.expect.md

+4 -2

@@ -17,13 +17,15 @@ function Component(props) {

17 ```

18 Found 1 error:

20 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

20 +Error: Cannot access refs during render

21 +

24 error.invalid-pass-ref-to-function.ts:4:16

25 2 | function Component(props) {

26 3 | const ref = useRef(null);

27 > 4 | const x = foo(ref);

26 - | ^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

28 + | ^^^ Passing a ref to a function may read its value during render

29 5 | return x.current;

30 6 | }

31 7 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.expect.md

+4 -2

@@ -16,13 +16,15 @@ function Component({ref}) {

16 ```

17 Found 1 error:

19 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

19 +Error: Cannot access refs during render

20 +

21 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

23 error.invalid-read-ref-prop-in-render-destructure.ts:3:16

24 1 | // @validateRefAccessDuringRender @compilationMode:"infer"

25 2 | function Component({ref}) {

26 > 3 | const value = ref.current;

25 - | ^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

27 + | ^^^^^^^^^^^ Cannot access ref value during render

28 4 | return <div>{value}</div>;

29 5 | }

30 6 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.expect.md

+4 -2

@@ -16,13 +16,15 @@ function Component(props) {

16 ```

17 Found 1 error:

19 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

19 +Error: Cannot access refs during render

20 +

23 error.invalid-read-ref-prop-in-render-property-load.ts:3:16

24 1 | // @validateRefAccessDuringRender @compilationMode:"infer"

25 2 | function Component(props) {

26 > 3 | const value = props.ref.current;

25 - | ^^^^^^^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

27 + | ^^^^^^^^^^^^^^^^^ Cannot access ref value during render

28 4 | return <div>{value}</div>;

29 5 | }

30 6 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-in-callback-invoked-during-render.expect.md

+4 -2

@@ -20,13 +20,15 @@ function Component(props) {

20 ```

21 Found 1 error:

23 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

23 +Error: Cannot access refs during render

24 +

27 error.invalid-ref-in-callback-invoked-during-render.ts:8:33

28 6 | return <Foo item={item} current={current} />;

29 7 | };

30 > 8 | return <Items>{props.items.map(item => renderItem(item))}</Items>;

29 - | ^^^^^^^^^^^^^^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

31 + | ^^^^^^^^^^^^^^^^^^^^^^^^ Passing a ref to a function may read its value during render

32 9 | }

33 10 |

34 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.expect.md

+4 -2

@@ -16,13 +16,15 @@ function Component(props) {

16 ```

17 Found 1 error:

19 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

19 +Error: Cannot access refs during render

20 +

23 error.invalid-ref-value-as-props.ts:4:19

24 2 | function Component(props) {

25 3 | const ref = useRef(null);

26 > 4 | return <Foo ref={ref.current} />;

25 - | ^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

27 + | ^^^^^^^^^^^ Cannot access ref value during render

28 5 | }

29 6 |

30 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md

+8 -4

@@ -17,24 +17,28 @@ function Component(props) {

17 ```

18 Found 2 errors:

20 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

20 +Error: Cannot access refs during render

21 +

24 error.invalid-set-and-read-ref-during-render.ts:4:2

25 2 | function Component(props) {

26 3 | const ref = useRef(null);

27 > 4 | ref.current = props.value;

26 - | ^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

28 + | ^^^^^^^^^^^ Cannot update ref during render

29 5 | return ref.current;

30 6 | }

31 7 |

31 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

33 +Error: Cannot access refs during render

34 +

35 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

37 error.invalid-set-and-read-ref-during-render.ts:5:9

38 3 | const ref = useRef(null);

39 4 | ref.current = props.value;

40 > 5 | return ref.current;

37 - | ^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

41 + | ^^^^^^^^^^^ Cannot access ref value during render

42 6 | }

43 7 |

44 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md

+8 -4

@@ -17,24 +17,28 @@ function Component(props) {

17 ```

18 Found 2 errors:

20 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

20 +Error: Cannot access refs during render

21 +

24 error.invalid-set-and-read-ref-nested-property-during-render.ts:4:2

25 2 | function Component(props) {

26 3 | const ref = useRef({inner: null});

27 > 4 | ref.current.inner = props.value;

26 - | ^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

28 + | ^^^^^^^^^^^ Cannot update ref during render

29 5 | return ref.current.inner;

30 6 | }

31 7 |

31 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

33 +Error: Cannot access refs during render

34 +

37 error.invalid-set-and-read-ref-nested-property-during-render.ts:5:9

38 3 | const ref = useRef({inner: null});

39 4 | ref.current.inner = props.value;

40 > 5 | return ref.current.inner;

37 - | ^^^^^^^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

41 + | ^^^^^^^^^^^^^^^^^ Cannot access ref value during render

42 6 | }

43 7 |

44 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.expect.md

+8 -4

@@ -24,24 +24,28 @@ function Foo({a}) {

24 ```

25 Found 2 errors:

27 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

27 +Error: Cannot access refs during render

28 +

29 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

31 error.invalid-use-ref-added-to-dep-without-type-info.ts:10:21

32 8 | // however, this is an instance of accessing a ref during render and is disallowed

33 9 | // under React's rules, so we reject this input

34 > 10 | const x = {a, val: val.ref.current};

33 - | ^^^^^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

35 + | ^^^^^^^^^^^^^^^ Cannot access ref value during render

36 11 |

37 12 | return <VideoList videos={x} />;

38 13 | }

38 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

40 +Error: Cannot access refs during render

41 +

42 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

44 error.invalid-use-ref-added-to-dep-without-type-info.ts:10:21

45 8 | // however, this is an instance of accessing a ref during render and is disallowed

46 9 | // under React's rules, so we reject this input

47 > 10 | const x = {a, val: val.ref.current};

44 - | ^^^^^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

48 + | ^^^^^^^^^^^^^^^ Cannot access ref value during render

49 11 |

50 12 | return <VideoList videos={x} />;

51 13 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-but-dont-read-ref-in-render.expect.md

+4 -2

@@ -19,13 +19,15 @@ function useHook({value}) {

19 ```

20 Found 1 error:

22 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

22 +Error: Cannot access refs during render

23 +

24 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

26 error.invalid-write-but-dont-read-ref-in-render.ts:5:2

27 3 | const ref = useRef(null);

28 4 | // Writing to a ref in render is against the rules:

29 > 5 | ref.current = value;

28 - | ^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

30 + | ^^^^^^^^^^^ Cannot update ref during render

31 6 | // returning a ref is allowed, so this alone doesn't trigger an error:

32 7 | return ref;

33 8 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-ref-prop-in-render.expect.md

+4 -2

@@ -17,13 +17,15 @@ function Component(props) {

17 ```

18 Found 1 error:

20 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

20 +Error: Cannot access refs during render

21 +

24 error.invalid-write-ref-prop-in-render.ts:4:2

25 2 | function Component(props) {

26 3 | const ref = props.ref;

27 > 4 | ref.current = true;

26 - | ^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

28 + | ^^^^^^^^^^^ Cannot update ref during render

29 5 | return <div>{value}</div>;

30 6 | }

31 7 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-arbitrary.expect.md

+8 -4

@@ -27,22 +27,26 @@ export const FIXTURE_ENTRYPOINT = {

27 ```

28 Found 2 errors:

30 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

30 +Error: Cannot access refs during render

31 +

32 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

34 6 | component C() {

35 7 | const r = useRef(DEFAULT_VALUE);

36 > 8 | if (r.current == DEFAULT_VALUE) {

35 - | ^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

37 + | ^^^^^^^^^ Cannot access ref value during render

38 9 | r.current = 1;

39 10 | }

40 11 | }

40 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

42 +Error: Cannot access refs during render

43 +

44 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

46 7 | const r = useRef(DEFAULT_VALUE);

47 8 | if (r.current == DEFAULT_VALUE) {

48 > 9 | r.current = 1;

45 - | ^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

49 + | ^^^^^^^^^ Cannot update ref during render

50 10 | }

51 11 | }

52 12 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call-2.expect.md

+4 -2

@@ -25,12 +25,14 @@ export const FIXTURE_ENTRYPOINT = {

25 ```

26 Found 1 error:

28 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

28 +Error: Cannot access refs during render

29 +

30 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

32 5 | const r = useRef(null);

33 6 | if (r.current == null) {

34 > 7 | f(r);

33 - | ^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

35 + | ^ Passing a ref to a function may read its value during render

36 8 | }

37 9 | }

38 10 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call.expect.md

+4 -2

@@ -25,12 +25,14 @@ export const FIXTURE_ENTRYPOINT = {

25 ```

26 Found 1 error:

28 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

28 +Error: Cannot access refs during render

29 +

32 5 | const r = useRef(null);

33 6 | if (r.current == null) {

34 > 7 | f(r.current);

33 - | ^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

35 + | ^^^^^^^^^ Passing a ref to a function may read its value during render

36 8 | }

37 9 | }

38 10 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-linear.expect.md

+4 -2

@@ -26,12 +26,14 @@ export const FIXTURE_ENTRYPOINT = {

26 ```

27 Found 1 error:

29 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

29 +Error: Cannot access refs during render

30 +

31 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

33 6 | if (r.current == null) {

34 7 | r.current = 42;

35 > 8 | r.current = 42;

34 - | ^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

36 + | ^^^^^^^^^ Cannot update ref during render

37 9 | }

38 10 | }

39 11 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-nonif.expect.md

+7 -5

@@ -26,24 +26,26 @@ export const FIXTURE_ENTRYPOINT = {

26 ```

27 Found 2 errors:

29 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

29 +Error: Cannot access refs during render

30 +

33 4 | component C() {

34 5 | const r = useRef(null);

35 > 6 | const guard = r.current == null;

34 - | ^^^^^^^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

36 + | ^^^^^^^^^^^^^^^^^ Cannot access ref value during render

37 7 | if (guard) {

38 8 | r.current = 1;

39 9 | }

39 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

41 +Error: Cannot access refs during render

41 -Cannot access ref value `guard`.

43 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

45 5 | const r = useRef(null);

46 6 | const guard = r.current == null;

47 > 7 | if (guard) {

46 - | ^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

48 + | ^^^^^ Cannot access ref value during render

49 8 | r.current = 1;

50 9 | }

51 10 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-other.expect.md

+4 -2

@@ -26,12 +26,14 @@ export const FIXTURE_ENTRYPOINT = {

26 ```

27 Found 1 error:

29 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

29 +Error: Cannot access refs during render

30 +

33 6 | const r2 = useRef(null);

34 7 | if (r.current == null) {

35 > 8 | r2.current = 1;

34 - | ^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

36 + | ^^^^^^^^^^ Cannot update ref during render

37 9 | }

38 10 | }

39 11 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access-2.expect.md

+4 -2

@@ -26,12 +26,14 @@ export const FIXTURE_ENTRYPOINT = {

26 ```

27 Found 1 error:

29 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

29 +Error: Cannot access refs during render

30 +

33 7 | r.current = 1;

34 8 | }

35 > 9 | f(r.current);

34 - | ^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

36 + | ^^^^^^^^^ Passing a ref to a function may read its value during render

37 10 | }

38 11 |

39 12 | export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access.expect.md

+4 -2

@@ -26,12 +26,14 @@ export const FIXTURE_ENTRYPOINT = {

26 ```

27 Found 1 error:

29 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

29 +Error: Cannot access refs during render

30 +

33 7 | r.current = 1;

34 8 | }

35 > 9 | r.current = 1;

34 - | ^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

36 + | ^^^^^^^^^ Cannot update ref during render

37 10 | }

38 11 |

39 12 | export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-optional.expect.md

+4 -2

@@ -22,13 +22,15 @@ export const FIXTURE_ENTRYPOINT = {

22 ```

23 Found 1 error:

25 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

25 +Error: Cannot access refs during render

26 +

29 error.ref-optional.ts:5:9

30 3 | function Component(props) {

31 4 | const ref = useRef();

32 > 5 | return ref?.current;

31 - | ^^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

33 + | ^^^^^^^^^^^^ Cannot access ref value during render

34 6 | }

35 7 |

36 8 | export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-ref-mutable-range.expect.md

+4 -2

@@ -30,13 +30,15 @@ export const FIXTURE_ENTRYPOINT = {

30 ```

31 Found 1 error:

33 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

33 +Error: Cannot access refs during render

34 +

37 error.repro-ref-mutable-range.ts:11:36

38 9 | mutate(value);

39 10 | if (CONST_TRUE) {

40 > 11 | return <Stringify ref={identity(ref)} />;

39 - | ^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

41 + | ^^^ Passing a ref to a function may read its value during render

42 12 | }

43 13 | return value;

44 14 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md

+4 -2

@@ -33,13 +33,15 @@ export const FIXTURE_ENTRYPOINT = {

33 ```

34 Found 1 error:

36 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

36 +Error: Cannot access refs during render

37 +

38 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

40 error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.ts:14:2

41 12 |

42 13 | // The ref is modified later, extending its range and preventing memoization of onChange

43 > 14 | ref.current.inner = null;

42 - | ^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

44 + | ^^^^^^^^^^^ Cannot update ref during render

45 15 |

46 16 | return <input onChange={onChange} />;

47 17 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md

+4 -13

@@ -34,26 +34,17 @@ export const FIXTURE_ENTRYPOINT = {

34 ## Error

36 ```

37 -Found 2 errors:

37 +Found 1 error:

39 -Error: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef)

39 +Error: Cannot access refs during render

41 -error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.ts:17:2

42 - 15 | ref.current.inner = null;

43 - 16 | };

44 -> 17 | reset();

45 - | ^^^^^ This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef)

46 - 18 |

47 - 19 | return <input onChange={onChange} />;

48 - 20 | }

49 -

50 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

41 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

43 error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.ts:17:2

44 15 | ref.current.inner = null;

45 16 | };

46 > 17 | reset();

56 - | ^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

47 + | ^^^^^ This function accesses a ref value

48 18 |

49 19 | return <input onChange={onChange} />;

50 20 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md

+4 -2

@@ -32,13 +32,15 @@ export const FIXTURE_ENTRYPOINT = {

32 ```

33 Found 1 error:

35 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

35 +Error: Cannot access refs during render

36 +

37 +React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)

39 error.useCallback-set-ref-nested-property-dont-preserve-memoization.ts:13:2

40 11 | });

41 12 |

42 > 13 | ref.current.inner = null;

41 - | ^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

43 + | ^^^^^^^^^^^ Cannot update ref during render

44 14 |

45 15 | return <input onChange={onChange} />;

46 16 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.expect.md

+4 -2

@@ -22,13 +22,15 @@ export const FIXTURE_ENTRYPOINT = {

22 ```

23 Found 1 error:

25 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

25 +Error: Cannot access refs during render

26 +

29 error.validate-mutate-ref-arg-in-render.ts:3:14

30 1 | // @validateRefAccessDuringRender:true

31 2 | function Foo(props, ref) {

32 > 3 | console.log(ref.current);

31 - | ^^^^^^^^^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

33 + | ^^^^^^^^^^^ Passing a ref to a function may read its value during render

34 4 | return <div>{props.bar}</div>;

35 5 | }

36 6 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md

+4 -2

@@ -25,13 +25,15 @@ export const FIXTURE_ENTRYPOINT = {

25 ```

26 Found 1 error:

28 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

28 +Error: Cannot access refs during render

29 +

32 error.maybe-mutable-ref-not-preserved.ts:8:33

33 6 | function useFoo() {

34 7 | const r = useRef();

35 > 8 | return useMemo(() => makeArray(r), []);

34 - | ^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

36 + | ^ Passing a ref to a function may read its value during render

37 9 | }

38 10 |

39 11 | export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.expect.md

+4 -2

@@ -21,12 +21,14 @@ component Component(disableLocalRef, ref) {

21 ```

22 Found 1 error:

24 -Error: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

24 +Error: Cannot access refs during render

25 +

28 5 | const localRef = useFooRef();

29 6 | const mergedRef = useMemo(() => {

30 > 7 | return disableLocalRef ? ref : identity(ref, localRef);

29 - | ^^^ Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

31 + | ^^^ Passing a ref to a function may read its value during render

32 8 | }, [disableLocalRef, ref, localRef]);

33 9 | return <div ref={mergedRef} />;

34 10 | }