Begrip: useRef voor DOM-manipulatie

De useRef hook kan gebruikt worden om een specifiek HTML-element rechtstreeks aan te spreken en biedt daarmee een alternatief voor de document.getElementById methode die gekend is uit de JavaScript cursus.

Omdat de useRef hook niet steunt op CSS-klassen, ID's of query-selectors is dit een stabielere keuze dan de gekende document.x methodes.

Via de reference kunnen we HTML elementen rechtstreeks manipuleren, bijvoorbeeld om de focus te zetten op een inputveld.

In React Native is er natuurlijk geen klassieke DOM, maar de useRef hook kan nog steeds op dezelfde manier gebruikt worden. Bijvoorbeeld om een TextInput component in focus te brengen.

const SomeComponent: FunctionComponent = () => {
  const htmlRef = useRef<HTMLDivElement>(null)
    
  return (
    <div>
      {/** 
        * Het element waaraan de ref gelinkt wordt 
        * moet natuurlijk geen div zijn.
        **/}
      <div ref={htmlRef}></div>
    </div>
  )
}