The Power of useRef in React

Aug 15, 2023

React is a helpful tool that lets developers build fast and efficient web apps. One of its tools is called useRef. At first, useRef might seem complicated, but it’s super useful in some situations.

What's useRef?

Simply put, useRef helps you keep a value in memory without causing your app to redraw or "re-render". Think of it like saving a value even when parts of your app change.

For example, to use a ref, you'd write:

import { useRef } from 'react'; function MyComponent( ) { const intervalRef = useRef(0); const inputRef = useRef(null); // Rest of your code }

Here:

  • initialValue: It’s the starting value of the ref. After setting it once, it doesn't change even if the app redraws.
  • useRef gives back an object with one thing inside: current. You can set this current value when you link the ref to a part of your app’s design (or JSX).

Things to Remember

  • If you change the ref.current value, your app won’t redraw.
  • Don’t try to read or change ref.current while your app is drawing. This can make things unpredictable.

How to Use useRef

  1. Saving a Value: Unlike state, refs save info without changing how your app looks. For example, to save a timer ID for later:
function handleStartClick( ) { const intervalId = setInterval(() => { // Some code here }, 1000); intervalRef.current = intervalId; }
  1. Working with the Page (DOM): Often, useRef helps in working with the parts of your webpage. Like clicking a button to focus on a text box:
export default function Form( ) { const inputRef = useRef(null); function handleClick( ) { inputRef.current.focus(); } return ( <> <input ref={inputRef} /> <button onClick={handleClick}> Focus on the text box </button> </> ); }
  1. Using Ref with Custom Bits: By default, you can’t attach refs to custom parts of your app. To do this, you’ll need to use something called forwardRef.

Watch Out!

React wants your app to act in a predictable way. If you try to read or change a ref while your app draws, things can go wrong. It’s safer to work with refs when you handle events or effects:

function MyComponent( ) { useEffect(() => { myRef.current = 123; }); }

More Tips

  • Refs Stay the Same: Even if your app redraws, refs stay the same. So if you set a new object as a ref, it will only be used the first time.

  • Having Trouble with Custom Refs? If you want to connect to a part of a custom app bit, remember to wrap your bit with forwardRef.

To Wrap Up

useRef in React is a useful tool. It lets you save values, work directly with your webpage, and more. The trick is knowing when and how to use it for the best results.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui.

Call To Action

Stay connected with news and updates!

Join our mailing list to receive the latest news and updates from our team.
Don't worry, your information will not be shared.

We hate SPAM. We will never sell your information, for any reason.