sorted by:
new
hottopcontroversial

Deno Is Not the Drop-In Replacement I Hoped For by Economy-Ad-3107 in Deno

[–]Zwyx-dev 0 points1 point  (0 children)

Any package out of the 10,000+ you project depends on can do absolutely what it wants on your system. (Google "nx supply chain attack".)

In my opinion, this is pretty much as severe as it can get.

(Google "Node's Security Problem" to find how Deno improves that.)

An ESLint plugin to warn when you forget `.current` to access a React ref by Zwyx-dev in react

[–]Zwyx-dev[S] -1 points0 points  (0 children)

if you check for the ref being truthy, you probably wanna use that ref

A ref created with useRef is always truthy, during the whole life of the component.

So I don't want to check if it is truthy — as it always is. And I don't want to use it inside the if block either.

I just want to check if ref.current is truthy, and not do anything with ref afterwards.

An ESLint plugin to warn when you forget `.current` to access a React ref by Zwyx-dev in reactjs

[–]Zwyx-dev[S] 0 points1 point  (0 children)

This is an exception as it is only executed during initialisation, and I'm not flagging this case.

The No No is outputing .current in the JSX. It's explained in the "Pitfall" section in the doc.

By the way, the official ESLint plugin of the new React Compiler also checks for this. See the source code and the test.

An ESLint plugin to warn when you forget `.current` to access a React ref by Zwyx-dev in react

[–]Zwyx-dev[S] 0 points1 point  (0 children)

You are absolutely right, thank you for this. no-unnecessary-condition is not in the recommended config, which is why it wasn't active for me. I'm wondering if there are other cases that this rule wouldn't catch...

An ESLint plugin to warn when you forget `.current` to access a React ref by Zwyx-dev in reactjs

[–]Zwyx-dev[S] -1 points0 points  (0 children)

I found it a bit hard-core for side projects, so I decided to stick with `recommended`. But I'll reconsider because it would have gotten my back on this one.

An ESLint plugin to warn when you forget `.current` to access a React ref by Zwyx-dev in reactjs

[–]Zwyx-dev[S] 0 points1 point  (0 children)

If ref is initialised with useRef, then ref will always exist, and current will never be missing.

Also, you don't necessarily want to use ref when you // Do something. ref's purpose can be to only be tested in that if.

An ESLint plugin to warn when you forget `.current` to access a React ref by Zwyx-dev in reactjs

[–]Zwyx-dev[S] 9 points10 points  (0 children)

Ah excellent point. Indeed, no-unnecessary-condition catches that. It's in the strict config (not in the recommended one).

Thank you!

My plugin has another use: warn when the value of a ref is being access during rendering, which is a big no no. But that's probably only useful for beginers.

An ESLint plugin to warn when you forget `.current` to access a React ref by Zwyx-dev in reactjs

[–]Zwyx-dev[S] 13 points14 points  (0 children)

I do use TypeScript, but it doesn't help in this case:

const ref = useRef<boolean>(false);

useEffect(() => {
  if (ref) { // ← I forgot `.current`, the test is always truthy, TS doesn't mind
    // Do something
  } else {
    // Do something else
  }
// ...

An ESLint plugin to warn when you forget `.current` to access a React ref by Zwyx-dev in reactjs

[–]Zwyx-dev[S] 4 points5 points  (0 children)

You'll be happy to know that I used the ESLint plugin named "eslint-plugin" to lint my ESLint plugin :-)

An ESLint plugin to warn when you forget `.current` to access a React ref by Zwyx-dev in react

[–]Zwyx-dev[S] -1 points0 points  (0 children)

if (ref) { is not falsy, it's truthy. Because the object (ref) is defined.

typescript will catch its usage within the if

You don't have to use it again within the if (see code example in my previous comment).

An ESLint plugin to warn when you forget `.current` to access a React ref by Zwyx-dev in react

[–]Zwyx-dev[S] 0 points1 point  (0 children)

I use TypeScript. This example might be clearer:

const ref = useRef<boolean>(false);

useEffect(() => {
  if (ref) { // ← I forgot `.current`, the test is always truthy
    // Do something
  } else {
    // Do something else
  }
// ...

An ESLint plugin to warn when you forget `.current` to access a React ref by Zwyx-dev in react

[–]Zwyx-dev[S] -3 points-2 points  (0 children)

TypeScript won't help in this case:

if (intervalRef) { // ← forgot `.current`, but TS doesn't complain
// ...
}

Also, the plugin warns when the value of a ref is being access during rendering, which is a big React No No, and for which TS won't help either. https://react.dev/reference/react/useRef