React States Vs React Refs f. What? When? Why? How?

I am using react in one of my freelancing project. Due to the size of the app the things were getting complex regarding re-renders and performance. Then with time I develop the understanding of how they actually works. Refs is having its own usecases and states is having its own usecases.

Basically the precision of data management in different scenarios is being discussed here.

Lets give some brief introduction what they actually are to keep all readers at same stage.

React State

• About

React state is basically the data that is already being hold by a component. In simple words the inner properties or in development terms the encapsulated properties.

For example,

Here in the above button the text "Hello" can be called the state of the button.

    

• Setting/Updating State

Setting state is basically changing the data that the component holds. But here two things will be coming in mind. If we change the data the how the component will be getting the updated data because only updating the state is not the ultimate goal , updating the data then viewing the updated data is the ultimate goal. 

Well the concept of viewing the updating data is known as rendering. Basically the innerHTML value of the element is changed when state updated.

So if alot of states getting updated at one time which means alot of components getting rendered at one time then the user is going to have a laggy experience in the ui

React Refs

• About

React refs are nothing but regular js objects where the data persists across rerenders that means the data not lost when the component rerenders. But updating the data will not re renders the component. Also it can be use to target elements directly by keeping the element in the reference and perform actions such as .click() 

State vs Refs

Well this is the main part of the article. 

The main advantage and disadvantage of state is that setting the state causes re renders. So before actually using we should know whether do we actually want to re render the component whenever a certain value changes or not. 

• Forms

Well a common example will be making a controlled form input fields. But do we actually need our forms to be controlled? The answer is not yes some of the time. Controlled fields actually re renders the whole form component with each key stroke which may cause a laggy ui in certain cases. 😣

Here the use of refs comes. We can easily store the value of the input field in a ref which does not causes rerenders but the data persists. 😁

But what if we want to validate the inputs in each keystrokes in the field we need to re render the field. In this case state is the only choice as refs does not cause re renders.👀

• Setting a global value to context

Suppose we want to a grab a value from query string in url to the global context. 

For example we are visiting the endpoint "/doctors/2". Here 2 is the id of the doctor which we want to keep in the global context so that other components can access it whenever they want. 

We all know we generally keep the context provider as the parent the component. If the parent component all the children rerenders. This is a risk. Suppose we have 20 child components and each of them getting re rendered at one time leading to laggy ui.😣

Here just keep the id in the ref. So parent will not get rerendered and thus the children and also the data is kept in the context.😁

• Already some other component is rendering the current component

Suppose we have two components component1 and component2 . Due to some reason change in state in component1 also the component2 getting re rendered. And the state is mandatory in component1. 

So in this case using state in component2 will lead to two times rerender of component2. So use ref here. As component1 is already rendering the component2 so using ref will not cause any issue.

Hope you enjoyed the post and experienced some edge cases 😙

Keep on coding👍