# useState vs useRef: How to Choose the Right React Hook

%%[kempo] 

State management is a critical part of most front-end applications. In React, you have a few mechanisms to track state, but two common ones are the `useState` and `useRef` hooks.

If you're not familiar with these hooks, it can be confusing to know when to use each one. In this post, we'll compare the `useState` and `useRef` hooks and build some basic intuition around when to choose each one.

## The useState hook lets you add state to functional components.

The `useState` hook is the basic building block to manage state for functional components. The hook returns a tuple where the first element is the state and the second element is a function to update that state.

The key part of the updater function is that it's designed to trigger a re-render. When a React component re-renders, the [JSX is recalculated and the underlying HTML is updated](https://blog.thesshguy.com/react-jsx-to-html) to reflect any state changes.

As you click the button in the example below, you'll notice that:

1. The count variable is incremented
    
2. The component re-renders
    
3. The HTML changes
    

<iframe src="https://kempo.io/view/eyJpZCI6ImtsX2Zodnk1eXlqd2pnOHFiYzAzeXdyY2JvbSIsIm5hbWUiOiJ1c2VTdGF0ZSB2cyB1c2VSZWYgRXhhbXBsZXMiLCJjb3JlIjp7ImZpbGVzIjp7Ii9zdHlsZXMuY3NzIjp7ImNvZGUiOiJib2R5IHtcbiAgZm9udC1mYW1pbHk6IHNhbnMtc2VyaWY7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otb3N4LWZvbnQtc21vb3RoaW5nOiBncmF5c2NhbGU7XG4gIGZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICB0ZXh0LXJlbmRlcmluZzogb3B0aW1pemVMZWdpYmlsaXR5O1xuICBmb250LXNtb290aDogYWx3YXlzO1xuICAtd2Via2l0LXRhcC1oaWdobGlnaHQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAtd2Via2l0LXRvdWNoLWNhbGxvdXQ6IG5vbmU7XG4gIGhlaWdodDogMTAwdmg7XG59XG5cbmRpdiB7XG4gIGhlaWdodDogMTAwJTtcbiAgd2lkdGg6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xufVxuXG5idXR0b24ge1xuICAtLWI6IDNweDsgLyogYm9yZGVyIHRoaWNrbmVzcyAqL1xuICAtLXM6IDAuNDVlbTsgLyogc2l6ZSBvZiB0aGUgY29ybmVyICovXG4gIC0tY29sb3I6ICMzNzNiNDQ7XG5cbiAgY3Vyc29yOiBwb2ludGVyO1xuICBwYWRkaW5nOiBjYWxjKDAuNWVtICsgdmFyKC0tcykpIGNhbGMoMC45ZW0gKyB2YXIoLS1zKSk7XG4gIGNvbG9yOiB2YXIoLS1jb2xvcik7XG4gIC0tX3A6IHZhcigtLXMpO1xuICBiYWNrZ3JvdW5kOiBjb25pYy1ncmFkaWVudChcbiAgICAgIGZyb20gOTBkZWcgYXQgdmFyKC0tYikgdmFyKC0tYiksXG4gICAgICAjMDAwMCA5MGRlZyxcbiAgICAgIHZhcigtLWNvbG9yKSAwXG4gICAgKVxuICAgIHZhcigtLV9wKSB2YXIoLS1fcCkgLyBjYWxjKDEwMCUgLSB2YXIoLS1iKSAtIDIgKiB2YXIoLS1fcCkpXG4gICAgY2FsYygxMDAlIC0gdmFyKC0tYikgLSAyICogdmFyKC0tX3ApKTtcbiAgdHJhbnNpdGlvbjpcbiAgICAwLjNzIGxpbmVhcixcbiAgICBjb2xvciAwcyxcbiAgICBiYWNrZ3JvdW5kLWNvbG9yIDBzO1xuICBvdXRsaW5lOiB2YXIoLS1iKSBzb2xpZCAjMDAwMDtcbiAgb3V0bGluZS1vZmZzZXQ6IDAuNmVtO1xuICBmb250LXNpemU6IDE2cHg7XG5cbiAgYm9yZGVyOiAwO1xuXG4gIHVzZXItc2VsZWN0OiBub25lO1xuICAtd2Via2l0LXVzZXItc2VsZWN0OiBub25lO1xuICB0b3VjaC1hY3Rpb246IG1hbmlwdWxhdGlvbjtcbn1cblxuYnV0dG9uOmhvdmVyLFxuYnV0dG9uOmZvY3VzLXZpc2libGUge1xuICAtLV9wOiAwcHg7XG4gIG91dGxpbmUtY29sb3I6IHZhcigtLWNvbG9yKTtcbiAgb3V0bGluZS1vZmZzZXQ6IDAuMDVlbTtcbn1cblxuYnV0dG9uOmFjdGl2ZSB7XG4gIGJhY2tncm91bmQ6IHZhcigtLWNvbG9yKTtcbiAgY29sb3I6ICNmZmY7XG59XG4ifSwiL0FwcC5qcyI6eyJjb2RlIjoiaW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gQXBwKCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuICByZXR1cm4gPGJ1dHRvbiBvbkNsaWNrPXsoKSA9PiBzZXRDb3VudChjb3VudCArIDEpfT57Y291bnR9PC9idXR0b24+O1xufVxuIn0sIi9pbmRleC5qcyI6eyJjb2RlIjoiaW1wb3J0IFJlYWN0LCB7IFN0cmljdE1vZGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGNyZWF0ZVJvb3QgfSBmcm9tIFwicmVhY3QtZG9tL2NsaWVudFwiO1xuaW1wb3J0IFwiLi9zdHlsZXMuY3NzXCI7XG5cbmltcG9ydCBBcHAgZnJvbSBcIi4vQXBwXCI7XG5cbmNvbnN0IHJvb3QgPSBjcmVhdGVSb290KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFwicm9vdFwiKSk7XG5yb290LnJlbmRlcihcbiAgPFN0cmljdE1vZGU+XG4gICAgPEFwcCAvPlxuICA8L1N0cmljdE1vZGU+XG4pOyJ9LCIvcHVibGljL2luZGV4Lmh0bWwiOnsiY29kZSI6IjwhRE9DVFlQRSBodG1sPlxuPGh0bWwgbGFuZz1cImVuXCI+XG4gIDxoZWFkPlxuICAgIDxtZXRhIGNoYXJzZXQ9XCJVVEYtOFwiPlxuICAgIDxtZXRhIG5hbWU9XCJ2aWV3cG9ydFwiIGNvbnRlbnQ9XCJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MS4wXCI+XG4gICAgPHRpdGxlPkRvY3VtZW50PC90aXRsZT5cbiAgPC9oZWFkPlxuICA8Ym9keT5cbiAgICA8ZGl2IGlkPVwicm9vdFwiPjwvZGl2PlxuICA8L2JvZHk+XG48L2h0bWw+In0sIi9wYWNrYWdlLmpzb24iOnsiY29kZSI6IntcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1zY3JpcHRzXCI6IFwiXjUuMC4wXCJcbiAgfSxcbiAgXCJtYWluXCI6IFwiL2luZGV4LmpzXCIsXG4gIFwiZGV2RGVwZW5kZW5jaWVzXCI6IHt9XG59In19LCJ0ZW1wbGF0ZSI6InJlYWN0In0sImRpc3BsYXkiOnsiY29tcG9uZW50cyI6eyJFZGl0b3IiOnsidHlwZSI6ImVkaXRvciIsImRhdGEiOnsic2hvd1RhYnMiOnRydWUsInNob3dMaW5lTnVtYmVycyI6dHJ1ZSwic2hvd0lubGluZUVycm9ycyI6ZmFsc2UsInNob3dSdW5CdXR0b24iOnRydWUsIndyYXBDb250ZW50Ijp0cnVlLCJjbG9zYWJsZVRhYnMiOnRydWUsInJlYWRPbmx5IjpmYWxzZSwic2hvd1JlYWRPbmx5IjpmYWxzZX19LCJQcmV2aWV3Ijp7InR5cGUiOiJwcmV2aWV3IiwiZGF0YSI6eyJzaG93TmF2aWdhdG9yIjpmYWxzZSwic2hvd09wZW5JbkNvZGVTYW5kYm94IjpmYWxzZSwic2hvd1JlZnJlc2hCdXR0b24iOmZhbHNlLCJzaG93U2FuZHBhY2tFcnJvck92ZXJsYXkiOmZhbHNlfX19LCJnZW5lcmFsIjp7ImFjdGl2ZUZpbGUiOiIvQXBwLmpzIiwidmlzaWJsZUZpbGVzIjpbIi9BcHAuanMiXSwidGhlbWUiOiJrZW1wb0RhcmsifSwibGF5b3V0cyI6eyJzbWFsbCI6IidFZGl0b3InXG4nUHJldmlldycifX19" height="750px" width="100%"></iframe>

Great!

We can manage state in React now, but how does `useRef` come into play?

## The useRef hook lets you track state that isn't needed for rendering.

Just like the `useState` hook, the `useRef` hook lets you track state. The hook returns an object with a `current` property that contains the state. To update the state, you just need to update the `current` property.

**The key difference is that any update to this state *won't* trigger a re-render.**

Here's a similar example as above, but with the `useRef` hook instead. There's also a button to *force* the component to re-render.

When you click the count button, notice how the state doesn't update. This is because updates to `useRef` values *don't* trigger re-renders.

That said, the underlying state is still updating.

But how do we prove that?

Well, if we use the other button to *force* a re-render, you'll notice that the button's value changes based on the current state tracked by the `useRef` hook:

<iframe src="https://kempo.io/view/eyJpZCI6ImtsX2Zodnk1eXlqd2pnOHFiYzAzeXdyY2JvbSIsIm5hbWUiOiJ1c2VTdGF0ZSB2cyB1c2VSZWYgRXhhbXBsZXMiLCJjb3JlIjp7ImZpbGVzIjp7Ii9zdHlsZXMuY3NzIjp7ImNvZGUiOiJib2R5IHtcbiAgZm9udC1mYW1pbHk6IHNhbnMtc2VyaWY7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otb3N4LWZvbnQtc21vb3RoaW5nOiBncmF5c2NhbGU7XG4gIGZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICB0ZXh0LXJlbmRlcmluZzogb3B0aW1pemVMZWdpYmlsaXR5O1xuICBmb250LXNtb290aDogYWx3YXlzO1xuICAtd2Via2l0LXRhcC1oaWdobGlnaHQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAtd2Via2l0LXRvdWNoLWNhbGxvdXQ6IG5vbmU7XG4gIGhlaWdodDogMTAwdmg7XG59XG5cbmRpdiB7XG4gIGhlaWdodDogMTAwJTtcbiAgd2lkdGg6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kO1xufVxuXG5idXR0b24ge1xuICAtLWI6IDNweDsgLyogYm9yZGVyIHRoaWNrbmVzcyAqL1xuICAtLXM6IDAuNDVlbTsgLyogc2l6ZSBvZiB0aGUgY29ybmVyICovXG4gIC0tY29sb3I6ICMzNzNiNDQ7XG5cbiAgY3Vyc29yOiBwb2ludGVyO1xuICBwYWRkaW5nOiBjYWxjKDAuNWVtICsgdmFyKC0tcykpIGNhbGMoMC45ZW0gKyB2YXIoLS1zKSk7XG4gIGNvbG9yOiB2YXIoLS1jb2xvcik7XG4gIC0tX3A6IHZhcigtLXMpO1xuICBiYWNrZ3JvdW5kOiBjb25pYy1ncmFkaWVudChcbiAgICAgIGZyb20gOTBkZWcgYXQgdmFyKC0tYikgdmFyKC0tYiksXG4gICAgICAjMDAwMCA5MGRlZyxcbiAgICAgIHZhcigtLWNvbG9yKSAwXG4gICAgKVxuICAgIHZhcigtLV9wKSB2YXIoLS1fcCkgLyBjYWxjKDEwMCUgLSB2YXIoLS1iKSAtIDIgKiB2YXIoLS1fcCkpXG4gICAgY2FsYygxMDAlIC0gdmFyKC0tYikgLSAyICogdmFyKC0tX3ApKTtcbiAgdHJhbnNpdGlvbjpcbiAgICAwLjNzIGxpbmVhcixcbiAgICBjb2xvciAwcyxcbiAgICBiYWNrZ3JvdW5kLWNvbG9yIDBzO1xuICBvdXRsaW5lOiB2YXIoLS1iKSBzb2xpZCAjMDAwMDtcbiAgb3V0bGluZS1vZmZzZXQ6IDAuNmVtO1xuICBmb250LXNpemU6IDE2cHg7XG5cbiAgYm9yZGVyOiAwO1xuXG4gIHVzZXItc2VsZWN0OiBub25lO1xuICAtd2Via2l0LXVzZXItc2VsZWN0OiBub25lO1xuICB0b3VjaC1hY3Rpb246IG1hbmlwdWxhdGlvbjtcbn1cblxuYnV0dG9uOmhvdmVyLFxuYnV0dG9uOmZvY3VzLXZpc2libGUge1xuICAtLV9wOiAwcHg7XG4gIG91dGxpbmUtY29sb3I6IHZhcigtLWNvbG9yKTtcbiAgb3V0bGluZS1vZmZzZXQ6IDAuMDVlbTtcbn1cblxuYnV0dG9uOmFjdGl2ZSB7XG4gIGJhY2tncm91bmQ6IHZhcigtLWNvbG9yKTtcbiAgY29sb3I6ICNmZmY7XG59XG4ifSwiL0FwcC5qcyI6eyJjb2RlIjoiaW1wb3J0IHsgdXNlUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyB1c2VSZXJlbmRlciB9IGZyb20gXCIuL3V0aWxzXCI7XG5cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIEFwcCgpIHtcbiAgY29uc3QgY291bnQgPSB1c2VSZWYoMCk7XG4gIGNvbnN0IHJlcmVuZGVyID0gdXNlUmVyZW5kZXIoKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8YnV0dG9uXG4gICAgICAgIG9uQ2xpY2s9eygpID0+IHtcbiAgICAgICAgICBjb3VudC5jdXJyZW50ID0gY291bnQuY3VycmVudCArIDE7XG4gICAgICAgIH19XG4gICAgICA+XG4gICAgICAgIHtjb3VudC5jdXJyZW50fVxuICAgICAgPC9idXR0b24+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e3JlcmVuZGVyfT5SZXJlbmRlcjwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuIn0sIi9pbmRleC5qcyI6eyJjb2RlIjoiaW1wb3J0IFJlYWN0LCB7IFN0cmljdE1vZGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGNyZWF0ZVJvb3QgfSBmcm9tIFwicmVhY3QtZG9tL2NsaWVudFwiO1xuaW1wb3J0IFwiLi9zdHlsZXMuY3NzXCI7XG5cbmltcG9ydCBBcHAgZnJvbSBcIi4vQXBwXCI7XG5cbmNvbnN0IHJvb3QgPSBjcmVhdGVSb290KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFwicm9vdFwiKSk7XG5yb290LnJlbmRlcihcbiAgPFN0cmljdE1vZGU+XG4gICAgPEFwcCAvPlxuICA8L1N0cmljdE1vZGU+XG4pOyJ9LCIvcHVibGljL2luZGV4Lmh0bWwiOnsiY29kZSI6IjwhRE9DVFlQRSBodG1sPlxuPGh0bWwgbGFuZz1cImVuXCI+XG4gIDxoZWFkPlxuICAgIDxtZXRhIGNoYXJzZXQ9XCJVVEYtOFwiPlxuICAgIDxtZXRhIG5hbWU9XCJ2aWV3cG9ydFwiIGNvbnRlbnQ9XCJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MS4wXCI+XG4gICAgPHRpdGxlPkRvY3VtZW50PC90aXRsZT5cbiAgPC9oZWFkPlxuICA8Ym9keT5cbiAgICA8ZGl2IGlkPVwicm9vdFwiPjwvZGl2PlxuICA8L2JvZHk+XG48L2h0bWw+In0sIi9wYWNrYWdlLmpzb24iOnsiY29kZSI6IntcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1zY3JpcHRzXCI6IFwiXjUuMC4wXCJcbiAgfSxcbiAgXCJtYWluXCI6IFwiL2luZGV4LmpzXCIsXG4gIFwiZGV2RGVwZW5kZW5jaWVzXCI6IHt9XG59In0sIi91dGlscy5qcyI6eyJjb2RlIjoiaW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcblxuZXhwb3J0IGZ1bmN0aW9uIHVzZVJlcmVuZGVyKCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuICByZXR1cm4gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcbn1cbiJ9fSwidGVtcGxhdGUiOiJyZWFjdCJ9LCJkaXNwbGF5Ijp7ImNvbXBvbmVudHMiOnsiRWRpdG9yIjp7InR5cGUiOiJlZGl0b3IiLCJkYXRhIjp7InNob3dUYWJzIjp0cnVlLCJzaG93TGluZU51bWJlcnMiOnRydWUsInNob3dJbmxpbmVFcnJvcnMiOmZhbHNlLCJzaG93UnVuQnV0dG9uIjp0cnVlLCJ3cmFwQ29udGVudCI6dHJ1ZSwiY2xvc2FibGVUYWJzIjp0cnVlLCJyZWFkT25seSI6ZmFsc2UsInNob3dSZWFkT25seSI6ZmFsc2V9fSwiUHJldmlldyI6eyJ0eXBlIjoicHJldmlldyIsImRhdGEiOnsic2hvd05hdmlnYXRvciI6ZmFsc2UsInNob3dPcGVuSW5Db2RlU2FuZGJveCI6ZmFsc2UsInNob3dSZWZyZXNoQnV0dG9uIjpmYWxzZSwic2hvd1NhbmRwYWNrRXJyb3JPdmVybGF5IjpmYWxzZX19fSwiZ2VuZXJhbCI6eyJhY3RpdmVGaWxlIjoiL0FwcC5qcyIsInZpc2libGVGaWxlcyI6WyIvQXBwLmpzIl0sInRoZW1lIjoia2VtcG9EYXJrIn0sImxheW91dHMiOnsic21hbGwiOiInRWRpdG9yJ1xuJ1ByZXZpZXcnIn19fQ==" height="750px" width="100%"></iframe>

> Note: Because updates to useRef values don't trigger re-renders, you want to make sure you don't use a ref's value in your JSX. I know I'm breaking that rule above, but the example is just for demonstrative purposes.

Ok! So we want to use a ref when we track state that *doesn't* trigger a re-render. But what kind of state shouldn't trigger a re-render?

Let's take a look at a couple of examples.

### How to scroll an element into view.

It's common to track DOM elements with the `useRef` hook. If you pass your ref variable to an element's `ref` prop, React will automatically set your variable's `current` property to the DOM element.

Once you have access to the DOM element, you can do various things like reset a form input or scroll an element into view.

In the example below, we have a dummy recipe blog post. Like most recipe blog posts these days, there's content *before* the recipe that provides some background about the dish.

Wouldn't it be nice if there were a button that let you skip all that extra information and jump straight to the good stuff?

Let's see how we might be able to do that with the `useRef` hook.

> Note: I used ChatGPT to generate a dummy recipe blog post, so apologies if there are mistakes in the content.

<iframe src="https://kempo.io/view/eyJpZCI6ImtsX2Zodnk1eXlqd2pnOHFiYzAzeXdyY2JvbSIsIm5hbWUiOiJ1c2VTdGF0ZSB2cyB1c2VSZWYgRXhhbXBsZXMiLCJjb3JlIjp7ImZpbGVzIjp7Ii9zdHlsZXMuY3NzIjp7ImNvZGUiOiJib2R5IHtcbiAgZm9udC1mYW1pbHk6IHNhbnMtc2VyaWY7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otb3N4LWZvbnQtc21vb3RoaW5nOiBncmF5c2NhbGU7XG4gIGZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICB0ZXh0LXJlbmRlcmluZzogb3B0aW1pemVMZWdpYmlsaXR5O1xuICBmb250LXNtb290aDogYWx3YXlzO1xuICAtd2Via2l0LXRhcC1oaWdobGlnaHQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAtd2Via2l0LXRvdWNoLWNhbGxvdXQ6IG5vbmU7XG4gIGhlaWdodDogMTAwdmg7XG59XG5cbmJ1dHRvbiB7XG4gIC0tYjogM3B4OyAvKiBib3JkZXIgdGhpY2tuZXNzICovXG4gIC0tczogMC40NWVtOyAvKiBzaXplIG9mIHRoZSBjb3JuZXIgKi9cbiAgLS1jb2xvcjogIzM3M2I0NDtcblxuICBjdXJzb3I6IHBvaW50ZXI7XG4gIHBhZGRpbmc6IGNhbGMoMC41ZW0gKyB2YXIoLS1zKSkgY2FsYygwLjllbSArIHZhcigtLXMpKTtcbiAgY29sb3I6IHZhcigtLWNvbG9yKTtcbiAgLS1fcDogdmFyKC0tcyk7XG4gIGJhY2tncm91bmQ6IGNvbmljLWdyYWRpZW50KFxuICAgICAgZnJvbSA5MGRlZyBhdCB2YXIoLS1iKSB2YXIoLS1iKSxcbiAgICAgICMwMDAwIDkwZGVnLFxuICAgICAgdmFyKC0tY29sb3IpIDBcbiAgICApXG4gICAgdmFyKC0tX3ApIHZhcigtLV9wKSAvIGNhbGMoMTAwJSAtIHZhcigtLWIpIC0gMiAqIHZhcigtLV9wKSlcbiAgICBjYWxjKDEwMCUgLSB2YXIoLS1iKSAtIDIgKiB2YXIoLS1fcCkpO1xuICB0cmFuc2l0aW9uOlxuICAgIDAuM3MgbGluZWFyLFxuICAgIGNvbG9yIDBzLFxuICAgIGJhY2tncm91bmQtY29sb3IgMHM7XG4gIG91dGxpbmU6IHZhcigtLWIpIHNvbGlkICMwMDAwO1xuICBvdXRsaW5lLW9mZnNldDogMC42ZW07XG4gIGZvbnQtc2l6ZTogMTZweDtcblxuICBib3JkZXI6IDA7XG5cbiAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gIC13ZWJraXQtdXNlci1zZWxlY3Q6IG5vbmU7XG4gIHRvdWNoLWFjdGlvbjogbWFuaXB1bGF0aW9uO1xufVxuXG5idXR0b246aG92ZXIsXG5idXR0b246Zm9jdXMtdmlzaWJsZSB7XG4gIC0tX3A6IDBweDtcbiAgb3V0bGluZS1jb2xvcjogdmFyKC0tY29sb3IpO1xuICBvdXRsaW5lLW9mZnNldDogMC4wNWVtO1xufVxuXG5idXR0b246YWN0aXZlIHtcbiAgYmFja2dyb3VuZDogdmFyKC0tY29sb3IpO1xuICBjb2xvcjogI2ZmZjtcbn1cbiJ9LCIvQXBwLmpzIjp7ImNvZGUiOiJpbXBvcnQgeyB1c2VSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IHVzZVJlcmVuZGVyIH0gZnJvbSBcIi4vdXRpbHNcIjtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gQXBwKCkge1xuICBjb25zdCByZWNpcGVSZWYgPSB1c2VSZWYobnVsbCk7XG4gIGNvbnN0IHJlcmVuZGVyID0gdXNlUmVyZW5kZXIoKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8YnV0dG9uXG4gICAgICAgIG9uQ2xpY2s9eygpID0+IHtcbiAgICAgICAgICByZWNpcGVSZWYuY3VycmVudC5zY3JvbGxJbnRvVmlldygpO1xuICAgICAgICB9fVxuICAgICAgPlxuICAgICAgICBKdW1wIHRvIFJlY2lwZVxuICAgICAgPC9idXR0b24+XG5cbiAgICAgIDxkaXY+XG4gICAgICAgIDxoMT5BIFRhc3RlIG9mIEl0YWx5OiBDcmVhbXkgU3BpbmFjaCBhbmQgTXVzaHJvb20gQWxmcmVkbyBQYXN0YTwvaDE+XG4gICAgICAgIDxwPlxuICAgICAgICAgIFdoZW4gaXQgY29tZXMgdG8gY29tZm9ydCBmb29kLCBwYXN0YSBkaXNoZXMgb2Z0ZW4gdG9wIHRoZSBsaXN0LlxuICAgICAgICAgIFRoZXJlJ3Mgc29tZXRoaW5nIGluY3JlZGlibHkgc2F0aXNmeWluZyBhYm91dCB0d2lybGluZyBwZXJmZWN0bHlcbiAgICAgICAgICBjb29rZWQgcGFzdGEgYXJvdW5kIHlvdXIgZm9yayBhbmQgc2F2b3JpbmcgZWFjaCBjcmVhbXkgYml0ZS4gVG9kYXksXG4gICAgICAgICAgSeKAmW0gc2hhcmluZyBhIHJlY2lwZSBmb3IgQ3JlYW15IFNwaW5hY2ggYW5kIE11c2hyb29tIEFsZnJlZG8gUGFzdGEsIGFcbiAgICAgICAgICBkaXNoIHRoYXQgY29tYmluZXMgdGhlIGVhcnRoaW5lc3Mgb2YgbXVzaHJvb21zIHdpdGggdGhlIHZpYnJhbnQgZmxhdm9yXG4gICAgICAgICAgb2Ygc3BpbmFjaCwgYWxsIGNvYXRlZCBpbiBhIGx1c2Npb3VzIEFsZnJlZG8gc2F1Y2UuIFdoZXRoZXIgeW91J3JlXG4gICAgICAgICAgY29va2luZyBmb3IgYSBzcGVjaWFsIG9jY2FzaW9uIG9yIGEgc2ltcGxlIHdlZWtuaWdodCBkaW5uZXIsIHRoaXNcbiAgICAgICAgICBwYXN0YSB3aWxsIGxlYXZlIHlvdSBhbmQgeW91ciBndWVzdHMgd2FudGluZyBtb3JlLlxuICAgICAgICA8L3A+XG5cbiAgICAgICAgPHA+XG4gICAgICAgICAgVGhlIG9yaWdpbnMgb2YgQWxmcmVkbyBzYXVjZSBkYXRlIGJhY2sgdG8gZWFybHkgMjB0aC1jZW50dXJ5IFJvbWUsXG4gICAgICAgICAgd2hlcmUgQWxmcmVkbyBkaSBMZWxpbyBjcmVhdGVkIGl0IHRvIHNhdGlzZnkgaGlzIHdpZmXigJlzIHByZWduYW5jeVxuICAgICAgICAgIGNyYXZpbmdzLiBUaGUgY29tYmluYXRpb24gb2YgYnV0dGVyLCBjcmVhbSwgYW5kIFBhcm1lc2FuIGNoZWVzZVxuICAgICAgICAgIGNyZWF0ZXMgYSByaWNoLCB2ZWx2ZXR5IHNhdWNlIHRoYXQgaGFzIGJlY29tZSBhIGJlbG92ZWQgc3RhcGxlIGluXG4gICAgICAgICAgSXRhbGlhbi1BbWVyaWNhbiBjdWlzaW5lLiBCeSBhZGRpbmcgZnJlc2ggc3BpbmFjaCBhbmQgbXVzaHJvb21zLCB3ZeKAmXJlXG4gICAgICAgICAgbm90IG9ubHkgZW5oYW5jaW5nIHRoZSBudXRyaXRpb25hbCB2YWx1ZSBidXQgYWxzbyBhZGRpbmcgYSBkZXB0aCBvZlxuICAgICAgICAgIGZsYXZvciB0aGF0IGJlYXV0aWZ1bGx5IGNvbXBsZW1lbnRzIHRoZSBjcmVhbXkgc2F1Y2UuXG4gICAgICAgIDwvcD5cblxuICAgICAgICA8cD5cbiAgICAgICAgICBCZWZvcmUgd2UgZGl2ZSBpbnRvIHRoZSByZWNpcGUsIGxldOKAmXMgdGFsayBhYm91dCBhIGZldyBrZXlcbiAgICAgICAgICBpbmdyZWRpZW50czpcbiAgICAgICAgPC9wPlxuICAgICAgICA8dWw+XG4gICAgICAgICAgPGxpPlxuICAgICAgICAgICAgPHN0cm9uZz5QYXN0YTwvc3Ryb25nPjogRmV0dHVjY2luZSBpcyB0cmFkaXRpb25hbGx5IHVzZWQsIGJ1dCBmZWVsXG4gICAgICAgICAgICBmcmVlIHRvIHVzZSB5b3VyIGZhdm9yaXRlIHBhc3RhIHNoYXBlLlxuICAgICAgICAgIDwvbGk+XG4gICAgICAgICAgPGxpPlxuICAgICAgICAgICAgPHN0cm9uZz5NdXNocm9vbXM8L3N0cm9uZz46IEEgbWl4IG9mIGJ1dHRvbiBhbmQgY3JlbWluaSBtdXNocm9vbXNcbiAgICAgICAgICAgIHdvcmtzIHdlbGwsIGJ1dCB5b3UgY2FuIHVzZSBhbnkgdmFyaWV0eSB5b3UgcHJlZmVyLlxuICAgICAgICAgIDwvbGk+XG4gICAgICAgICAgPGxpPlxuICAgICAgICAgICAgPHN0cm9uZz5TcGluYWNoPC9zdHJvbmc+OiBGcmVzaCBiYWJ5IHNwaW5hY2ggYWRkcyBhIGxvdmVseSB0ZXh0dXJlXG4gICAgICAgICAgICBhbmQgY29sb3IuXG4gICAgICAgICAgPC9saT5cbiAgICAgICAgICA8bGk+XG4gICAgICAgICAgICA8c3Ryb25nPlBhcm1lc2FuIENoZWVzZTwvc3Ryb25nPjogRm9yIHRoZSBiZXN0IGZsYXZvciwgdXNlIGZyZXNobHlcbiAgICAgICAgICAgIGdyYXRlZCBQYXJtZXNhbi5cbiAgICAgICAgICA8L2xpPlxuICAgICAgICA8L3VsPlxuXG4gICAgICAgIDxoMiByZWY9e3JlY2lwZVJlZn0+Q3JlYW15IFNwaW5hY2ggYW5kIE11c2hyb29tIEFsZnJlZG8gUGFzdGE8L2gyPlxuXG4gICAgICAgIDxkaXY+XG4gICAgICAgICAgPGgzPkluZ3JlZGllbnRzOjwvaDM+XG4gICAgICAgICAgPHVsPlxuICAgICAgICAgICAgPGxpPjEyIG96IGZldHR1Y2NpbmUgcGFzdGE8L2xpPlxuICAgICAgICAgICAgPGxpPjIgdGJzcCBvbGl2ZSBvaWw8L2xpPlxuICAgICAgICAgICAgPGxpPjIgY2xvdmVzIGdhcmxpYywgbWluY2VkPC9saT5cbiAgICAgICAgICAgIDxsaT4xIHNtYWxsIG9uaW9uLCBmaW5lbHkgY2hvcHBlZDwvbGk+XG4gICAgICAgICAgICA8bGk+OCBveiBidXR0b24gbXVzaHJvb21zLCBzbGljZWQ8L2xpPlxuICAgICAgICAgICAgPGxpPjggb3ogY3JlbWluaSBtdXNocm9vbXMsIHNsaWNlZDwvbGk+XG4gICAgICAgICAgICA8bGk+NCBjdXBzIGJhYnkgc3BpbmFjaDwvbGk+XG4gICAgICAgICAgICA8bGk+MSBjdXAgaGVhdnkgY3JlYW08L2xpPlxuICAgICAgICAgICAgPGxpPjEgY3VwIGZyZXNobHkgZ3JhdGVkIFBhcm1lc2FuIGNoZWVzZTwvbGk+XG4gICAgICAgICAgICA8bGk+U2FsdCBhbmQgcGVwcGVyIHRvIHRhc3RlPC9saT5cbiAgICAgICAgICAgIDxsaT5GcmVzaCBwYXJzbGV5LCBjaG9wcGVkIChmb3IgZ2FybmlzaCk8L2xpPlxuICAgICAgICAgIDwvdWw+XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICAgIDxkaXY+XG4gICAgICAgICAgPGgzPkluc3RydWN0aW9uczo8L2gzPlxuICAgICAgICAgIDxvbD5cbiAgICAgICAgICAgIDxsaT5cbiAgICAgICAgICAgICAgPHN0cm9uZz5Db29rIHRoZSBQYXN0YTo8L3N0cm9uZz5cbiAgICAgICAgICAgICAgPHVsPlxuICAgICAgICAgICAgICAgIDxsaT5cbiAgICAgICAgICAgICAgICAgIEJyaW5nIGEgbGFyZ2UgcG90IG9mIHNhbHRlZCB3YXRlciB0byBhIGJvaWwuIEFkZCB0aGVcbiAgICAgICAgICAgICAgICAgIGZldHR1Y2NpbmUgYW5kIGNvb2sgYWNjb3JkaW5nIHRvIHRoZSBwYWNrYWdlIGluc3RydWN0aW9uc1xuICAgICAgICAgICAgICAgICAgdW50aWwgYWwgZGVudGUuIFJlc2VydmUgMSBjdXAgb2YgcGFzdGEgd2F0ZXIsIHRoZW4gZHJhaW4gdGhlXG4gICAgICAgICAgICAgICAgICBwYXN0YSBhbmQgc2V0IGFzaWRlLlxuICAgICAgICAgICAgICAgIDwvbGk+XG4gICAgICAgICAgICAgIDwvdWw+XG4gICAgICAgICAgICA8L2xpPlxuICAgICAgICAgICAgPGxpPlxuICAgICAgICAgICAgICA8c3Ryb25nPlByZXBhcmUgdGhlIFNhdWNlOjwvc3Ryb25nPlxuICAgICAgICAgICAgICA8dWw+XG4gICAgICAgICAgICAgICAgPGxpPlxuICAgICAgICAgICAgICAgICAgSW4gYSBsYXJnZSBza2lsbGV0LCBoZWF0IHRoZSBvbGl2ZSBvaWwgb3ZlciBtZWRpdW0gaGVhdC4gQWRkXG4gICAgICAgICAgICAgICAgICB0aGUgZ2FybGljIGFuZCBvbmlvbiwgYW5kIHNhdXTDqSB1bnRpbCBmcmFncmFudCBhbmRcbiAgICAgICAgICAgICAgICAgIHRyYW5zbHVjZW50LCBhYm91dCAyLTMgbWludXRlcy5cbiAgICAgICAgICAgICAgICA8L2xpPlxuICAgICAgICAgICAgICAgIDxsaT5cbiAgICAgICAgICAgICAgICAgIEFkZCB0aGUgc2xpY2VkIG11c2hyb29tcyBhbmQgY29vayB1bnRpbCB0aGV5IGFyZSB0ZW5kZXIgYW5kXG4gICAgICAgICAgICAgICAgICBicm93bmVkLCBhYm91dCA1LTcgbWludXRlcy5cbiAgICAgICAgICAgICAgICA8L2xpPlxuICAgICAgICAgICAgICAgIDxsaT5cbiAgICAgICAgICAgICAgICAgIFN0aXIgaW4gdGhlIGJhYnkgc3BpbmFjaCBhbmQgY29vayB1bnRpbCB3aWx0ZWQsIGFib3V0IDJcbiAgICAgICAgICAgICAgICAgIG1pbnV0ZXMuXG4gICAgICAgICAgICAgICAgPC9saT5cbiAgICAgICAgICAgICAgPC91bD5cbiAgICAgICAgICAgIDwvbGk+XG4gICAgICAgICAgICA8bGk+XG4gICAgICAgICAgICAgIDxzdHJvbmc+TWFrZSB0aGUgQWxmcmVkbyBTYXVjZTo8L3N0cm9uZz5cbiAgICAgICAgICAgICAgPHVsPlxuICAgICAgICAgICAgICAgIDxsaT5cbiAgICAgICAgICAgICAgICAgIFJlZHVjZSB0aGUgaGVhdCB0byBsb3cgYW5kIHBvdXIgaW4gdGhlIGhlYXZ5IGNyZWFtLiBTdGlyIHRvXG4gICAgICAgICAgICAgICAgICBjb21iaW5lIHdpdGggdGhlIHZlZ2V0YWJsZXMuXG4gICAgICAgICAgICAgICAgPC9saT5cbiAgICAgICAgICAgICAgICA8bGk+XG4gICAgICAgICAgICAgICAgICBHcmFkdWFsbHkgYWRkIHRoZSBncmF0ZWQgUGFybWVzYW4gY2hlZXNlLCBzdGlycmluZyBjb25zdGFudGx5XG4gICAgICAgICAgICAgICAgICB1bnRpbCB0aGUgY2hlZXNlIGlzIG1lbHRlZCBhbmQgdGhlIHNhdWNlIGlzIHNtb290aC4gSWYgdGhlXG4gICAgICAgICAgICAgICAgICBzYXVjZSBpcyB0b28gdGhpY2ssIGFkZCBzb21lIG9mIHRoZSByZXNlcnZlZCBwYXN0YSB3YXRlciwgYVxuICAgICAgICAgICAgICAgICAgbGl0dGxlIGF0IGEgdGltZSwgdW50aWwgeW91IHJlYWNoIHRoZSBkZXNpcmVkIGNvbnNpc3RlbmN5LlxuICAgICAgICAgICAgICAgIDwvbGk+XG4gICAgICAgICAgICAgIDwvdWw+XG4gICAgICAgICAgICA8L2xpPlxuICAgICAgICAgICAgPGxpPlxuICAgICAgICAgICAgICA8c3Ryb25nPkNvbWJpbmUgYW5kIFNlcnZlOjwvc3Ryb25nPlxuICAgICAgICAgICAgICA8dWw+XG4gICAgICAgICAgICAgICAgPGxpPlxuICAgICAgICAgICAgICAgICAgQWRkIHRoZSBjb29rZWQgZmV0dHVjY2luZSB0byB0aGUgc2tpbGxldCBhbmQgdG9zcyB0byBjb2F0IHRoZVxuICAgICAgICAgICAgICAgICAgcGFzdGEgZXZlbmx5IHdpdGggdGhlIHNhdWNlLiBTZWFzb24gd2l0aCBzYWx0IGFuZCBwZXBwZXIgdG9cbiAgICAgICAgICAgICAgICAgIHRhc3RlLlxuICAgICAgICAgICAgICAgIDwvbGk+XG4gICAgICAgICAgICAgICAgPGxpPlxuICAgICAgICAgICAgICAgICAgU2VydmUgaW1tZWRpYXRlbHksIGdhcm5pc2hlZCB3aXRoIGZyZXNobHkgY2hvcHBlZCBwYXJzbGV5IGFuZFxuICAgICAgICAgICAgICAgICAgYWRkaXRpb25hbCBQYXJtZXNhbiBjaGVlc2UgaWYgZGVzaXJlZC5cbiAgICAgICAgICAgICAgICA8L2xpPlxuICAgICAgICAgICAgICA8L3VsPlxuICAgICAgICAgICAgPC9saT5cbiAgICAgICAgICA8L29sPlxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8cD5cbiAgICAgICAgICBUaGlzIENyZWFteSBTcGluYWNoIGFuZCBNdXNocm9vbSBBbGZyZWRvIFBhc3RhIGlzIGEgZGVsaWdodGZ1bCBkaXNoXG4gICAgICAgICAgdGhhdOKAmXMgc3VyZSB0byBpbXByZXNzLiBUaGUgY29tYmluYXRpb24gb2YgY3JlYW15IHNhdWNlLCB0ZW5kZXJcbiAgICAgICAgICBtdXNocm9vbXMsIGFuZCB2aWJyYW50IHNwaW5hY2ggbWFrZXMgZXZlcnkgYml0ZSBhIGpveS4gUGFpciBpdCB3aXRoIGFcbiAgICAgICAgICBjcmlzcCBncmVlbiBzYWxhZCBhbmQgYSBnbGFzcyBvZiB3aGl0ZSB3aW5lIGZvciBhIGNvbXBsZXRlIG1lYWwuIEJ1b25cbiAgICAgICAgICBhcHBldGl0byFcbiAgICAgICAgPC9wPlxuICAgICAgPC9kaXY+XG4gICAgPC8+XG4gICk7XG59XG4ifSwiL2luZGV4LmpzIjp7ImNvZGUiOiJpbXBvcnQgUmVhY3QsIHsgU3RyaWN0TW9kZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgY3JlYXRlUm9vdCB9IGZyb20gXCJyZWFjdC1kb20vY2xpZW50XCI7XG5pbXBvcnQgXCIuL3N0eWxlcy5jc3NcIjtcblxuaW1wb3J0IEFwcCBmcm9tIFwiLi9BcHBcIjtcblxuY29uc3Qgcm9vdCA9IGNyZWF0ZVJvb3QoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoXCJyb290XCIpKTtcbnJvb3QucmVuZGVyKFxuICA8U3RyaWN0TW9kZT5cbiAgICA8QXBwIC8+XG4gIDwvU3RyaWN0TW9kZT5cbik7In0sIi9wdWJsaWMvaW5kZXguaHRtbCI6eyJjb2RlIjoiPCFET0NUWVBFIGh0bWw+XG48aHRtbCBsYW5nPVwiZW5cIj5cbiAgPGhlYWQ+XG4gICAgPG1ldGEgY2hhcnNldD1cIlVURi04XCI+XG4gICAgPG1ldGEgbmFtZT1cInZpZXdwb3J0XCIgY29udGVudD1cIndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjBcIj5cbiAgICA8dGl0bGU+RG9jdW1lbnQ8L3RpdGxlPlxuICA8L2hlYWQ+XG4gIDxib2R5PlxuICAgIDxkaXYgaWQ9XCJyb290XCI+PC9kaXY+XG4gIDwvYm9keT5cbjwvaHRtbD4ifSwiL3BhY2thZ2UuanNvbiI6eyJjb2RlIjoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOC4wLjBcIixcbiAgICBcInJlYWN0LWRvbVwiOiBcIl4xOC4wLjBcIixcbiAgICBcInJlYWN0LXNjcmlwdHNcIjogXCJeNS4wLjBcIlxuICB9LFxuICBcIm1haW5cIjogXCIvaW5kZXguanNcIixcbiAgXCJkZXZEZXBlbmRlbmNpZXNcIjoge31cbn0ifSwiL3V0aWxzLmpzIjp7ImNvZGUiOiJpbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuXG5leHBvcnQgZnVuY3Rpb24gdXNlUmVyZW5kZXIoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG4gIHJldHVybiAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xufVxuIn19LCJ0ZW1wbGF0ZSI6InJlYWN0In0sImRpc3BsYXkiOnsiY29tcG9uZW50cyI6eyJFZGl0b3IiOnsidHlwZSI6ImVkaXRvciIsImRhdGEiOnsic2hvd1RhYnMiOnRydWUsInNob3dMaW5lTnVtYmVycyI6dHJ1ZSwic2hvd0lubGluZUVycm9ycyI6ZmFsc2UsInNob3dSdW5CdXR0b24iOnRydWUsIndyYXBDb250ZW50Ijp0cnVlLCJjbG9zYWJsZVRhYnMiOnRydWUsInJlYWRPbmx5IjpmYWxzZSwic2hvd1JlYWRPbmx5IjpmYWxzZX19LCJQcmV2aWV3Ijp7InR5cGUiOiJwcmV2aWV3IiwiZGF0YSI6eyJzaG93TmF2aWdhdG9yIjpmYWxzZSwic2hvd09wZW5JbkNvZGVTYW5kYm94IjpmYWxzZSwic2hvd1JlZnJlc2hCdXR0b24iOmZhbHNlLCJzaG93U2FuZHBhY2tFcnJvck92ZXJsYXkiOmZhbHNlfX19LCJnZW5lcmFsIjp7ImFjdGl2ZUZpbGUiOiIvQXBwLmpzIiwidmlzaWJsZUZpbGVzIjpbIi9BcHAuanMiXSwidGhlbWUiOiJrZW1wb0RhcmsifSwibGF5b3V0cyI6eyJzbWFsbCI6IidFZGl0b3InXG4nUHJldmlldycifX19" height="750px" width="100%"></iframe>

Notice how we're passing the `recipeRef` to the `h2` element `Creamy Spinach and Mushroom Alfredo Pasta`. React automatically sets the `current` value of our ref to the `h2` DOM element. With that in place, we can use the ref to scroll the element into view when the button is clicked.

Easy!

### How to build a countdown timer.

Another good use case for the `useRef` hook is to keep track of an interval ID that's returned from a [setInterval](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) call.

Let's say we had a countdown timer that shows the countdown in seconds. The easiest way to build this would be to use the `useState` hook to show the current timer value and then update the state every second.

That part is easy.

But what if we wanted a way to *start* and *stop* the timer? This is a little bit more tricky. The good news is that we can use the `useRef` hook for this. We can keep track of an interval ID when the timer starts and use it to clear the interval when the timer stops.

Let's see what that looks like:

<iframe src="https://kempo.io/view/eyJpZCI6ImtsX2Zodnk1eXlqd2pnOHFiYzAzeXdyY2JvbSIsIm5hbWUiOiJ1c2VTdGF0ZSB2cyB1c2VSZWYgRXhhbXBsZXMiLCJjb3JlIjp7ImZpbGVzIjp7Ii9zdHlsZXMuY3NzIjp7ImNvZGUiOiJib2R5IHtcbiAgZm9udC1mYW1pbHk6IHNhbnMtc2VyaWY7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otb3N4LWZvbnQtc21vb3RoaW5nOiBncmF5c2NhbGU7XG4gIGZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICB0ZXh0LXJlbmRlcmluZzogb3B0aW1pemVMZWdpYmlsaXR5O1xuICBmb250LXNtb290aDogYWx3YXlzO1xuICAtd2Via2l0LXRhcC1oaWdobGlnaHQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAtd2Via2l0LXRvdWNoLWNhbGxvdXQ6IG5vbmU7XG4gIGhlaWdodDogMTAwdmg7XG59XG5cbiNyb290LFxuZGl2IHtcbiAgd2lkdGg6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kO1xufVxuXG4jcm9vdCB7XG4gIGhlaWdodDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGdhcDogNHJlbTtcbn1cblxuYnV0dG9uIHtcbiAgLS1iOiAzcHg7IC8qIGJvcmRlciB0aGlja25lc3MgKi9cbiAgLS1zOiAwLjQ1ZW07IC8qIHNpemUgb2YgdGhlIGNvcm5lciAqL1xuICAtLWNvbG9yOiAjMzczYjQ0O1xuXG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgcGFkZGluZzogY2FsYygwLjVlbSArIHZhcigtLXMpKSBjYWxjKDAuOWVtICsgdmFyKC0tcykpO1xuICBjb2xvcjogdmFyKC0tY29sb3IpO1xuICAtLV9wOiB2YXIoLS1zKTtcbiAgYmFja2dyb3VuZDogY29uaWMtZ3JhZGllbnQoXG4gICAgICBmcm9tIDkwZGVnIGF0IHZhcigtLWIpIHZhcigtLWIpLFxuICAgICAgIzAwMDAgOTBkZWcsXG4gICAgICB2YXIoLS1jb2xvcikgMFxuICAgIClcbiAgICB2YXIoLS1fcCkgdmFyKC0tX3ApIC8gY2FsYygxMDAlIC0gdmFyKC0tYikgLSAyICogdmFyKC0tX3ApKVxuICAgIGNhbGMoMTAwJSAtIHZhcigtLWIpIC0gMiAqIHZhcigtLV9wKSk7XG4gIHRyYW5zaXRpb246XG4gICAgMC4zcyBsaW5lYXIsXG4gICAgY29sb3IgMHMsXG4gICAgYmFja2dyb3VuZC1jb2xvciAwcztcbiAgb3V0bGluZTogdmFyKC0tYikgc29saWQgIzAwMDA7XG4gIG91dGxpbmUtb2Zmc2V0OiAwLjZlbTtcbiAgZm9udC1zaXplOiAxNnB4O1xuXG4gIGJvcmRlcjogMDtcblxuICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgLXdlYmtpdC11c2VyLXNlbGVjdDogbm9uZTtcbiAgdG91Y2gtYWN0aW9uOiBtYW5pcHVsYXRpb247XG59XG5cbmJ1dHRvbjpob3ZlcixcbmJ1dHRvbjpmb2N1cy12aXNpYmxlIHtcbiAgLS1fcDogMHB4O1xuICBvdXRsaW5lLWNvbG9yOiB2YXIoLS1jb2xvcik7XG4gIG91dGxpbmUtb2Zmc2V0OiAwLjA1ZW07XG59XG5cbmJ1dHRvbjphY3RpdmUge1xuICBiYWNrZ3JvdW5kOiB2YXIoLS1jb2xvcik7XG4gIGNvbG9yOiAjZmZmO1xufVxuIn0sIi9BcHAuanMiOnsiY29kZSI6ImltcG9ydCB7IHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gQXBwKCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDYwKTtcbiAgY29uc3QgaW50ZXJ2YWxJZCA9IHVzZVJlZihudWxsKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PlxuICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgaWYgKGludGVydmFsSWQuY3VycmVudCkgcmV0dXJuO1xuXG4gICAgICAgICAgICBpbnRlcnZhbElkLmN1cnJlbnQgPSBzZXRJbnRlcnZhbCgoKSA9PiB7XG4gICAgICAgICAgICAgIHNldENvdW50KChwcmV2Q291bnQpID0+IHtcbiAgICAgICAgICAgICAgICByZXR1cm4gcHJldkNvdW50ID09PSAwID8gMCA6IHByZXZDb3VudCAtIDE7XG4gICAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgfSwgMTAwMCk7XG4gICAgICAgICAgfX1cbiAgICAgICAgPlxuICAgICAgICAgIFN0YXJ0XG4gICAgICAgIDwvYnV0dG9uPlxuXG4gICAgICAgIDxidXR0b25cbiAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICBjbGVhckludGVydmFsKGludGVydmFsSWQuY3VycmVudCk7XG4gICAgICAgICAgICBpbnRlcnZhbElkLmN1cnJlbnQgPSBudWxsO1xuICAgICAgICAgIH19XG4gICAgICAgID5cbiAgICAgICAgICBTdG9wXG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgPC9kaXY+XG5cbiAgICAgIDxkaXY+e2NvdW50fSBzZWNvbmRzPC9kaXY+XG4gICAgPC8+XG4gICk7XG59XG4ifSwiL2luZGV4LmpzIjp7ImNvZGUiOiJpbXBvcnQgUmVhY3QsIHsgU3RyaWN0TW9kZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgY3JlYXRlUm9vdCB9IGZyb20gXCJyZWFjdC1kb20vY2xpZW50XCI7XG5pbXBvcnQgXCIuL3N0eWxlcy5jc3NcIjtcblxuaW1wb3J0IEFwcCBmcm9tIFwiLi9BcHBcIjtcblxuY29uc3Qgcm9vdCA9IGNyZWF0ZVJvb3QoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoXCJyb290XCIpKTtcbnJvb3QucmVuZGVyKFxuICA8U3RyaWN0TW9kZT5cbiAgICA8QXBwIC8+XG4gIDwvU3RyaWN0TW9kZT5cbik7In0sIi9wdWJsaWMvaW5kZXguaHRtbCI6eyJjb2RlIjoiPCFET0NUWVBFIGh0bWw+XG48aHRtbCBsYW5nPVwiZW5cIj5cbiAgPGhlYWQ+XG4gICAgPG1ldGEgY2hhcnNldD1cIlVURi04XCI+XG4gICAgPG1ldGEgbmFtZT1cInZpZXdwb3J0XCIgY29udGVudD1cIndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjBcIj5cbiAgICA8dGl0bGU+RG9jdW1lbnQ8L3RpdGxlPlxuICA8L2hlYWQ+XG4gIDxib2R5PlxuICAgIDxkaXYgaWQ9XCJyb290XCI+PC9kaXY+XG4gIDwvYm9keT5cbjwvaHRtbD4ifSwiL3BhY2thZ2UuanNvbiI6eyJjb2RlIjoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOC4wLjBcIixcbiAgICBcInJlYWN0LWRvbVwiOiBcIl4xOC4wLjBcIixcbiAgICBcInJlYWN0LXNjcmlwdHNcIjogXCJeNS4wLjBcIlxuICB9LFxuICBcIm1haW5cIjogXCIvaW5kZXguanNcIixcbiAgXCJkZXZEZXBlbmRlbmNpZXNcIjoge31cbn0ifX0sInRlbXBsYXRlIjoicmVhY3QifSwiZGlzcGxheSI6eyJjb21wb25lbnRzIjp7IkVkaXRvciI6eyJ0eXBlIjoiZWRpdG9yIiwiZGF0YSI6eyJzaG93VGFicyI6dHJ1ZSwic2hvd0xpbmVOdW1iZXJzIjp0cnVlLCJzaG93SW5saW5lRXJyb3JzIjpmYWxzZSwic2hvd1J1bkJ1dHRvbiI6dHJ1ZSwid3JhcENvbnRlbnQiOnRydWUsImNsb3NhYmxlVGFicyI6dHJ1ZSwicmVhZE9ubHkiOmZhbHNlLCJzaG93UmVhZE9ubHkiOmZhbHNlfX0sIlByZXZpZXciOnsidHlwZSI6InByZXZpZXciLCJkYXRhIjp7InNob3dOYXZpZ2F0b3IiOmZhbHNlLCJzaG93T3BlbkluQ29kZVNhbmRib3giOmZhbHNlLCJzaG93UmVmcmVzaEJ1dHRvbiI6ZmFsc2UsInNob3dTYW5kcGFja0Vycm9yT3ZlcmxheSI6ZmFsc2V9fX0sImdlbmVyYWwiOnsiYWN0aXZlRmlsZSI6Ii9BcHAuanMiLCJ2aXNpYmxlRmlsZXMiOlsiL0FwcC5qcyJdLCJ0aGVtZSI6ImtlbXBvRGFyayJ9LCJsYXlvdXRzIjp7InNtYWxsIjoiJ0VkaXRvcidcbidQcmV2aWV3JyJ9fX0=" height="750px" width="100%"></iframe>

> Note: When we update the count, we're using a [functional update](https://blog.thesshguy.com/react-use-state-functional-update) because the function we pass to setInterval will have a stale version of the count variable due to its closure.

## When to use each hook.

Hopefully, the examples above will help you build intuition around when to use each hook. But as a general rule of thumb use the `useState` hook when you want your component to re-render and the `useRef` hook when you don't want your component to re-render.