You may need a Ref not a State.

When you build React Apps, you may come to a conclusion that all mutations can be done with useState in functional components, but you would see that a lot of enterprise, or other seniors that would use more different ingredients, that would increase the complexity, you may wonder that all of that complexity is unneeded and things can be way simpler, just by using useState, this article will show you one aspect why we may need to complicate things a little.

Based on React docs a ref is used when you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref.

With that being said, we need to play around the APIs

Use case

Let's say that we have a UI component that would take a state then it makes an API call to get a value, but instead of using this value for presentation, we need to use this value for another API.

We have two options when it comes to storing the first API value:

1. using the useState: this would not make sense, since useState would do mutate + rerender, and we don't want a rerender.

2. using the useRef, this is making sense because we only want to store a value that would be used later in an API call

to make it short:

state => Mutate + Rerender

ref => Mutate # only

Is it worth it to take it into consideration?

In the micro-level, you won't feel the difference, but when application grows and with any action you're taking that into consideration, you will have the UX and performance you would like to accomplish to your users.

Another Aspect

In using ref, you are mutating the value directly as if it is a normal var value, unlike the useState where you need to mutate indirectly by passing the value or its callback into the setState funciton, but why?

State needs to be updated indirectly because it is not just an update to a value, it does:

1. Checks the effects that dependent on the value itself
2. Rerender job
3. Mutate the Value itself

But in Refs, when you change the ref.current property, React does not re-render your component. React is not aware of when you change it because a ref is a plain JavaScript object.

Code:

Comments

[OpenSource]

Thanks for sharing. This is really important.

[Adaptive Shield Matrix]

usage of refs is discouraged
to prevent unnecessary re-renders its much easier and better to use a proper client side state library

• jotai - jotai.org/
• zustand - github.com/pmndrs/zustand
• others..

the official (new) react docs are great
react.dev/learn/referencing-values...

[Ibrahim Shamma]

The purpose here is to understand the core React APIs, and that's the idea of this series, I think in react world we tend to focus more on libraries and tools rather than the core of the library.
And yeah I tried jotai & zustand, if I need a ref like experience in multi-component, without prop drilling, yeah they would be a great choice!