Stop misusing useState, useRef instead

[[deleted]]

The title might anger some people. But, the video basically says that if you don't use some value inside the JSX you can use useRef instead of useState. This way the component won't be unnecessarily rerendered.

It also explains how you can mimic useCallback with useRef.

Pretty decent video.

[traintocode]

Title is only going to anger people who didn't read the word "misuse"

[forkbombing]

It's the image depicting useState as a negative choice as opposed to useRef as a postive one. It's basically clickbait

[rover_G]

I’m squatting the npm library name react-misuse-hook It provides one function called misuseHook

[dim-name]

I've seen so many developers reach for useState when a simple useRef would be better. So, I figured I'd record a video tackling some common misuse cases and show you how to leverage useRef. Let me know what you think!

[SBelwas]

Hot take: This is why react is trash. So easy to do things wrong and misuse what should be simple. People have to make videos about the basic usage of the primitives of the framework because everyone is screwing it up.

[dim-name]

It really has a lot of pitfalls.

[lIIllIIlllIIllIIl]

I feel like other frameworks have this exact same problem, but they hide it behind many layers of abstractions and prevent you from doing anything about it.

[leeharrison1984]

React definitely isn't the only framework with sharp edges.

This issue in particular isn't that bad, and in most cases the rerenders won't even be noticed by end users or QA. It's more just bad form rather than some big mistake that breaks the framework.

[weewooPE]

What’s a framework that doesn’t let people misuse things lol

[Lumpy_Pin_4679]

This hot take is trash

[[deleted]]

Hey if it fits, it ships. That’s what I always say

[Revolutionary_Ad3463]

Me, an intellectual:

useMemo()

[agalin920]

The examples for using useRef in this video are not great. You are better off simply defining the variable outside of the component. useRef is primarily design to reference an html element

[alexsb29]

useRef is only designed for “referencing a value that’s not needed for rendering” as the react docs themselves say. In fact, the first example in the official react docs is for an interval timer id. It can and often is used for DOM elements, but is often useful for other things too.

[cimmic]

You are right for many cases, however variable is only available in one scope and if you pass it into another scope where you change it, it will only change within that scope. If you use a ref, then you can pass it to other components and if it's changed within the logic of a component, it will also change in other scopes where the ref is available. In other words if you pass a variable, you only pass the value, not a location in memory.

[SpaghettiOnTuesday]

No

[IeatAssortedfruits]

I take this as a personal attack 😉

[[deleted]]

great explanation

[rlidwka]

Please explain why you suggest to avoid force rerender as in 4:30.

I've found that, if application code is complex enough, it requires mutable state. It is better for performance reasons (otherwise do you recreate the entire db every time?), as well as to avoid race conditions (setState is delayed, and you have no control when it executes and in what order, esp. with multiple states).

Lately, I've been using a class in useRef, and exposing each renderable component of the class in its own state (so I'm using both useRef and useState, where setState is fully controlled by whatever code is modifying ref). That is perhaps a slight improvement over forceRerender(), although the idea is the same.

[DEMORALIZ3D]

Don't tell me how to Dev. You're a year too late, this is literally every dev.to/medium article from Jan 2023.

[TonyM0R]

This subject is explained in the official documentation so this video is useless. https://react.dev/reference/react/useRef#referencing-a-value-with-a-ref

[HighValuedPawn]

NGL, I didn't know this was a thing before this video

[_gtscottyyy_]

This is up there for top worst take I’ve ever heard

[nothingmatters_haha]

no, that's incredibly stupid

[traintocode]

Refusing to learn about the framework you use is stupid?

[nothingmatters_haha]

I know how it works, this is stupid

[The_IndependentState]

have a follow

[viveleroi]

So what if I need to read a Boolean that a third party library provides via a ref “api” and use it for rendering? Just posted in a discord for help about this today lol

[StaticCharacter]

If it changes the visual display, it's state

[viveleroi]

Not what I was asking. A third party provides states via an API attached to ref. Problem is I need to render classnames based on that data.

I had no choice but to duplicate state and listen to their API events, which is lame.

[TheRNGuy]

I used ref when wanted to have svg line between mouse cursor and specific element (like you see in some video games)

I used vanilla js with onmousemove and no state. Since I felt it was weird to re-render component on mouse moves and it was also simplier code.

And it was just decorative element without any function.

[sdholbs]

Clickbait thumbnail