Skip to content

Bug: eslint-plugin-react-hooks fails handling null chaining operator (react-hooks/immutability) #35167

@SCjona

Description

@SCjona

I get a false positive on the react-hooks/immutability rule.

React version: 19.2.0
eslint-plugin-react-hooks version: 7.0.1

Steps To Reproduce

  1. Check example below
  2. Simple removing the ? in line 7 fixes the issue

Link to code example: https://playground.react.dev/#N4Igzg9grgTgxgUxALhAgHgBwjALgAgBMEAzAQygBsCSoA7OXASwjvwFkBPAQU0wAoAlPmAAdOqNxxWYAjFL4AvPihgEAJVJDxk6XVn5cCA8tUIAwmUqUARmTgBrfkKUA+ETtyT5JAHRxYeTpcX1lOSgRfQiYwTEoyTiV8URA6VgQUgG5PAF8AGnwAbQBdQWyJXDMAURISBEZnYUV3MQrdGQJcAAsEAGVccIQkn39AhGCAflCBiPLJSSYSfH4AQm6+mYRheUqYOjmvXHX+waiYuISklJtKCEcs3IKSss8d2DYAHmiAN3wfRWAPhyrgAEghrBB8AB1HCUQgfAD0P1c5Ry4hAeRAehITAA5igQEwALbYPCGTiYIbAfAABUoUFxTDoAHlMMwZPgcvgSDAIET8AByOw2cEAWjiDKZovk9lwoukJKYERgSJiuAFczo-Fa+HwCIRCswSrI7Lo7AgxGQyRAVkoKXEXLAJpiOOMtPpjJZbJY+jKGPAXQgAHcAJLBBB7KxgFDkShqHJAA

The current behavior

Found 1 error:

Error: This value cannot be modified

Modifying a value previously passed as an argument to a hook is not allowed. Consider moving the modification before calling the hook.

   7 | 		const theStyle = ref.current?.style;
   8 | 		if (!theStyle) return;
>  9 | 		theStyle.display = "block";
     | 		^^^^^^^^ `ref` cannot be modified
  10 | 	}, []);
  11 | 	return <div ref={ref}>Hello World</div>;
  12 | }

The expected behavior

No error

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