Skip to content

Bug: lint/react-compiler incorrectly reporting "ref accessed in render" inside map returning components #34781

@negebauer

Description

@negebauer

The linter is incorrectly reporting a warning about accessing a ref.current value in render when a callback function that uses ref.current is passed as a prop to a component inside a .map function. If the .map function is removed the linter warning disappears, meaning that being inside the .map confuses the linter and makes it think that the ref.current value is accessed

Steps To Reproduce

  1. Run linter with this code
import {useRef} from 'react';

export component Parent() {
  const someRef = useRef(false);
  const callback = () => {
    if (someRef.current) {
      // do some thing
    }
  };
  const items = [1, 2];
  return (
    <>
      {items.map(_ => (
        <Child callback={callback} />
      ))}
    </>
  );
}

component Child(callback: () => void) {
  return <div onClick={callback} />;
}
  1. See warning reported even though ref.current is never accessed on render
Image
  1. If you remove the .map section of the code the warning goes away

The current behavior

Linter shows a warning

The expected behavior

Linter should not show a warning

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: UnconfirmedA potential issue that we haven't yet confirmed as a bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions