Replacing Instance Variables with the useRef Hook
In addition to storing DOM references, the useRef hook can be used to store values without re-rendering the component.
If you have a class component that stores and manipulates values using instance variables like this:
class YourComponent extends React.Component {
constructor() {
this.count = 0;
}
onClick(e) {
this.count++;
}
// ...
}
You can simulate this behavior with the useRef hook:
function YourComponent() {
const countRef = useRef(0);
function onClick() {
countRef.current++;
}
// ...
}
In both cases, when the onClick handler is called and either this.count or countRef.current are updated, the component will not re-render.
This can be useful when needing a way to keep track of values for logging or other purposes that don't involve rendering data to the screen.
Jamund Ferguson: [0:00] In our RateTable, let's create a new ref. Type const countRef = useRef(), and then pass in, as the default value, . We're going to use this counter to count any time that our bounce() method is called. At the bottom of our bounce method, we can type countRef.current++. It will simply increment the value by 1.
[0:21] An interesting property of refs is that you can always change them without re-rendering your component. I'm going to type console.log("count", countRef.current). As I open my console, we can see what happens when our bounce method gets called. You can see that count is -- that was the first time, it uses the default value -- but even as we hover over it multiple times, the count displayed never changes.
[0:44] That's simply because our function isn't re-rendered each time we update our ref. However, if we move the count into our bounce function and hover over, you can see that it is being updated each time.
[0:57] Using a ref like this is similar to how one might had used an instance variable in the past. It might have said something like this.counts = , and then later, this.counts++. That might be something you'd use for analytics or logging or anything that doesn't require re-rendering the page.
[1:15] Instead of using instance variables, we can use refs to achieve the same goal.