How to tell the compiler that something is a ref and can be mutated?

[gaearon]

This is getting flagged by the rule:

export function GalleryItem({
  // ...
  thumbDimsRef,
}: Props) {
  // ...
  return (
    // ...
    <Image
      onLoad={e => {
        // eslint: Mutating component props or hook arguments is not allowed. Consider using a local variable instead
        thumbDimsRef.current[index] = {
          width: e.source.width,
          height: e.source.height,
        }
      }}
    />

How do I explain to the compiler that this is safe?

[gaearon]

Another question is how to model the "mutable stuff in state" pattern.

  React.useEffect(() => {
    if (state.needsPersist) {
      state.needsPersist = false
      // ...
    }
  }, [state])

I know this isn't exactly blessed, but I recall discussions about maybe changing the inner type to a ref to communicate to the compiler that this information isn't used for rendering. However, holding a ref in state and modifying its .current triggers the same error for me.

[poteto]

If I'm not wrong today the compiler will bailout if the state variable is mutated directly. We do need to discuss this pattern more and whether we support it in the compiler

cc @josephsavona

[aeharding]

enableTreatRefLikeIdentifiersAsRefs should work:

https://playground.react.dev/#N4Igzg9grgTgxgUxALhAejQAgAIIHYCGARgDYIAqMCBALgEoIBmAMgJYDWCAkgCb42tGrBDDABBMA0ZgAOnjkIAHgAcIMGpkZQ8cARDyYA4gRJkYATy40EAWwAUwOZkwZMAOg9PMNABZQbRAAirDaSTAA0cgC+yJgACjAQymAAlJiOBi5YHm5eVDSwBnZezq45JZgAPFw2BADmCBXO+swQBDwAvMAImB0AfOlNzlmYCGAkrHg0sQCyUDS0k3WYcBA2qnj8mMqJyZhqmD4QEOyYBDB1-vxgmKw3eBAaJiQQAO4IPG6YAML6YKx8GCYKD-PDLAiYF5wEyYABu51YxDItzwYGs7SGzl8-iCITCjDccFgVCmAG1JnxFABdXqDTLDBmYV4A3yxBBuSCwRBuZk8XyRemM5w+BCsOo+aajDnQeDskViiUCoXOKJDKKqwVoPpeFLREBRIA

[gaearon]

Do you know if there's some way to enable this globally? Or are flags per-file?

[aeharding]

Here's how I do it globally in my project. New file compilerOptions.js:

https://github.com/aeharding/voyager/blob/main/compilerOptions.js

And then I reference in vite.config.js:

https://github.com/aeharding/voyager/blob/5993a0d4a03a63783797d9b8a6dce55c74641e34/vite.config.ts#L27

and eslint.config.js:

https://github.com/aeharding/voyager/blob/5993a0d4a03a63783797d9b8a6dce55c74641e34/eslint.config.js#L34

[gaearon]

Perfect, thanks. @poteto would be nice to document this

[slorber]

FYI

[poteto]

Yeah I think we'll want to turn on enableTreatRefLikeIdentifiersAsRefs by default, we need to test it more internally first however. Our general hope with compiler flags is that these are not really meant to be configured, they're more like experimentation flags than configuration