In React, whenever the Props or State of the component change, the entire component re-renders by default. It means every child component will re-render itself.

Using useState and useReducer hooks will re-render each time there is a call to the update functions. In React, there will be times when you will feel to retain a value using State of your React component but don't want to update the UI, aka Re-render the Component. It can also be required when you want to re-render the component efficiently.

In this article, I will cover the useRef hook in React and how we can use it to retain the state without causing re-renders.

Reconciliation is a process in which React attempts to re-render ONLY the changed components of the DOM tree

Before jumping on useRef hook, let understand what happens to a local variable during re-render.

• Initially, when a component initializes, all variables will be set to their initial values.
• Before re-rendering, React stores all the state and refs to a unique store
• When a component update is available, it re-assigns the State and Refs to the previously stored State and Refs of the component.
• Component will re-render with the updated State and Refs. But the local variables will be reassigned to their initial values.

Local values are not persisted across re-render

useRef Hook

The React.useRef() Hook is a function that returns a mutable ref object. This object has a property called current. Value persisted using useref hook can be accessed or updated through its current property. This object persists a value for a full lifetime of the component.

Mutable objects are objects that can be updated or changed.

Syntax:

const refValue = React.useRef("Initial value"); <-- initializing 

refValue.current = "new value"; <-- Assigning new value through 'current' property

console.log(refValue.current);  <-- Accessing values using 'current' property
>> "new value" <<

Both useState and useRef can be used to retain state. But updating values in useState causes the component to re-render where useRef doesn't re-render on updating the values.

Rendering Mechanisms

In React, there are two types of rendering mechanisms

• Shallow rendering
• Deep rendering

Shallow rendering affects just the component and not the children, while deep rendering affects the component itself and all its children.

When an update is made to a ref, the shallow rendering mechanism is used to re-render the component. While deep rendering mechanism is used in case of useState.

useRef can also be used for storing the reference of the element from the DOM

Storing element reference from the DOM

In Javascript, we can access DOM elements through element selectors and manipulate them using the same. In React, we can access the elements through their reference and manipulate them like changing the text content, class, and many other operations.

Syntax:

const App = ()=> {
  const valueRef = React.useRef() as React.MutableRefObject<HTMLInputElement>;

  useEffect(()=> {
    valueRef.current.value = "1234";
  });

  return (
      <div className="App">          
          <input ref={valueRef}/>
      </div>);
};

Output:

Summary

Frequently updating state using useState hook can cause undesirable effects like re-rendering and performance impact.

useRef hook in react is used to store a reference to a DOM element or a value that will be persisted during re-render. It stores values in a mutable object and can be accessed/modified using its current property. Updating values inside useRef object won't re-render the component.