Avoid Unnecessary Re-Renders with Reacts useRef

Share this video with your friends

Send Tweet

While React refs are primarily used to interact with DOM elements, useRef can also be used to store values in your function components.

Unlike useState, when this value changes the component will not re-render, which means you can leverage useRef to avoid unnecessary renders and optimize your application's performance.

// Instantiate useRef
const countRef = useRef(0)

// Increment the value while avoiding a re-render
countRef.current = countRef.current + 1
Lars-m
Lars-m
~ 4 years ago

Exercise order for videos does not match the order of the code examples. Code is there, but confusing that exercise 3 in the videos matches exercise 5 in the code samples. This goes for many of the following examples