Less Common Hooks

useRef Hook

You can use useRef hook to get the ref of a DOM node. Later, you can use this ref for certain actions related to that node. For example, scrolling to an element position.

Other use cases may require getting the height of a DOM node or focusing an input.

useRef provides the ref object with the current property set to the reference of node in DOM.

The following example demonstrates useRef hook usage. On line #4, this hook is called to get the initial ref object. Later, set the ref property on a div to this object on line #11.

Go to top button triggers handleClick event handler. handleClick function simply scrolls the page to the position of the div with text Top section. You can see here that the topSection.current property is used to get access to the DOM node.