Get access to the value without DOM rendering!
Do you want to store pieces of data but without re-rendered the whole component? Are you facing unnecessary renders? Do you have performance issues in your application?
Well, here is the answer to all problems: useRef hook
What is useRef?
useRef is a hook that creates a reference to the DOM element in the functional component. useRef returns a mutable ref object whose current property is initialized to the passed argument (initialValue).
The returned object will persist for the full lifetime of the component.
In general, useRef is used to access DOM nodes. But, it has another exciting usage too! That is to Store value without DOM Render! Yes, we can store value without DOM render.
Syntax:
const inputRef = useRef(initialValue);
Let’s see HOW?
In this example, we are taking inputs from the user and storing data in the state.
Here, we are taking input from the user and submitting that information onClick event of the button. The entire component is re-rendered unnecessarily on each state update(i.e onClick of Button).
The solution to the above problem is useRef.
We have stored the value of the current input in the ref named inputRef. To access that value we have created a handleClick function and called the same function on button click. This will prevent unnecessary rendering of the component.
