Replacing Instance Variables with the useRef Hook

InstructorJamund Ferguson

Share this video with your friends

Send Tweet

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.