Saturday, 6 February, 2021 UTC


Summary

In addition to storing DOM references, the [useRef](https://reactjs.org/docs/hooks-reference.html#usecallback) 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.