React Native Academy · Les

useRef voor DOM-nodes en veranderlijke waarden

Les 1 van 413 stappen

useRef voor DOM-nodes en veranderlijke waarden is een gratis React Native Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.

Wat is useRef

useRef is een React-hook die een veranderlijk ref-object retourneert waarvan de eigenschap .current tussen renders behouden blijft. In tegenstelling tot statusvariabelen zorgt het bijwerken van ref.current niet voor een nieuwe render. Daardoor is useRef ideaal voor het opslaan van waarden die vaak veranderen, maar niet mogen zorgen dat het component wordt bijgewerkt.

import { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);
  // myRef.current starts as null
  // myRef.current persists across re-renders without triggering them
}

Een ref aan een native component koppelen

Geef een ref door aan een native component via de prop ref. React Native vult ref.current vervolgens met de onderliggende instantie van het native component. Zo krijg je toegang tot methoden zoals focus(), blur() en measure() die in het native component zijn gedefinieerd.

import { TextInput, Button, View } from 'react-native';
import { useRef } from 'react';

function SearchForm() {
  const inputRef = useRef(null);

  return (
    <View>
      <TextInput ref={inputRef} placeholder='Search...' />
      <Button
        title='Focus Input'
        onPress={() => inputRef.current?.focus()}
      />
    </View>
  );
}

Een TextInput programmatisch focussen

Een veelvoorkomende toepassing is automatisch de volgende invoer focussen wanneer de gebruiker op Return op het toetsenbord drukt. Koppel refs aan elke TextInput en roep in de handler onSubmitEditing van de eerste invoer secondInputRef.current.focus() aan. Zo ontstaat een vloeiende toetsenbordnavigatie voor formulieren op mobiele apparaten.

function LoginForm() {
  const emailRef = useRef(null);
  const passwordRef = useRef(null);

  return (
    <View>
      <TextInput
        ref={emailRef}
        placeholder='Email'
        returnKeyType='next'
        onSubmitEditing={() => passwordRef.current?.focus()}
      />
      <TextInput
        ref={passwordRef}
        placeholder='Password'
        returnKeyType='done'
        secureTextEntry
      />
    </View>
  );
}

useRef voor veranderlijke waarden

De tweede belangrijke toepassing van useRef is het opslaan van veranderlijke waarden die geen nieuwe renders mogen veroorzaken. Sla een timer-ID, een animatieframehandle, een vorige propwaarde of een andere vaak veranderende waarde op. Het lezen uit of schrijven naar ref.current gebeurt synchroon en kost geen rendertijd.

function Timer() {
  const intervalRef = useRef(null);

  const start = () => {
    intervalRef.current = setInterval(() => {
      console.log('tick');
    }, 1000);
  };

  const stop = () => {
    clearInterval(intervalRef.current);
  };

  return <Button title='Start' onPress={start} />;
}

Vorige statuswaarden opslaan

Een handig patroon is het opslaan van de vorige waarde van een prop of statusvariabele met een ref. Kopieer de huidige waarde in een useEffect die na elke render wordt uitgevoerd naar de ref. Tijdens de volgende render bevat prevRef.current de waarde uit de vorige rendercyclus, zodat je oude en nieuwe waarden kunt vergelijken.

function Counter({ count }) {
  const prevCountRef = useRef(null);

  useEffect(() => {
    prevCountRef.current = count;
  });

  const prevCount = prevCountRef.current;

  return (
    <Text>
      Now: {count} — Before: {prevCount}
    </Text>
  );
}

Verouderde closures met refs voorkomen

Eventhandlers en callbacks die één keer worden ingesteld, bijvoorbeeld in een timer of eventlistener, kunnen een verouderde versie van de status vastleggen. Sla de meest recente waarde op in een ref en lees de waarde uit de ref in de callback om altijd toegang te hebben tot de nieuwste waarde, zelfs als de callback veel renders geleden is gemaakt.

function MessageHandler({ onMessage }) {
  const onMessageRef = useRef(onMessage);

  useEffect(() => {
    onMessageRef.current = onMessage; // always up to date
  }, [onMessage]);

  useEffect(() => {
    const subscription = subscribe((msg) => {
      onMessageRef.current(msg); // uses latest callback
    });
    return () => subscription.unsubscribe();
  }, []); // only runs once
}

Het verschil tussen useRef en useState

Het belangrijkste verschil: useState zorgt bij een update voor een nieuwe render; useRef doet dat niet. Gebruik useState wanneer de waarde zichtbaar moet zijn in de gebruikersinterface. Gebruik useRef wanneer de waarde wordt gebruikt voor logica of bijwerkingen, maar de wijziging ervan niet tot een nieuwe weergave van de component mag leiden. Als je de verkeerde kiest, krijg je óf gemiste updates in de gebruikersinterface óf onnodige nieuwe renders.

// Triggers re-render — shows updated value on screen
const [count, setCount] = useState(0);

// No re-render — silent counter for internal use only
const renderCount = useRef(0);
renderCount.current += 1;

useRef met FlatList

Als je een ref aan een FlatList koppelt, krijg je toegang tot imperatieve methoden zoals scrollToIndex, scrollToOffset en scrollToEnd. Dit wordt gebruikt voor knoppen om naar boven te gaan, navigatie via een alfabetische index of automatisch scrollen naar een nieuw toegevoegd item onderaan de lijst.

function MessageList({ messages }) {
  const listRef = useRef(null);

  useEffect(() => {
    // Scroll to bottom when new message arrives
    listRef.current?.scrollToEnd({ animated: true });
  }, [messages.length]);

  return (
    <FlatList
      ref={listRef}
      data={messages}
      renderItem={({ item }) => <Text>{item.text}</Text>}
      keyExtractor={(item) => item.id}
    />
  );
}

De lay-out van een component meten

Roep ref.current.measure(callback) aan om de positie en grootte van een component ten opzichte van het venster te lezen. De callback ontvangt x, y, width, height, pageX en pageY. Dit is handig om tooltips, pop-overs of aangepaste vervolgkeuzemenu's te positioneren ten opzichte van de component die ze heeft geactiveerd.

const buttonRef = useRef(null);

const showTooltip = () => {
  buttonRef.current?.measure((x, y, width, height, pageX, pageY) => {
    setTooltipPosition({ top: pageY + height, left: pageX });
    setTooltipVisible(true);
  });
};

<TouchableOpacity ref={buttonRef} onPress={showTooltip}>

Refs doorgeven aan aangepaste componenten

Als je een ref aan een aangepaste component wilt koppelen (niet aan een ingebouwde component zoals TextInput), wikkel je die in React.forwardRef. De wrapper geeft de ref door aan het onderliggende native element. Zonder forwardRef zou de ref verwijzen naar het hostobject van de aangepaste component, niet naar de interne TextInput.

const CustomInput = React.forwardRef((props, ref) => (
  <TextInput
    ref={ref}
    style={styles.customInput}
    {...props}
  />
));

// Now you can use the ref on CustomInput
const inputRef = useRef(null);
<CustomInput ref={inputRef} />

Initialisatie en luie initialisatie van useRef

Het argument dat je aan useRef(initialValue) doorgeeft, stelt ref.current alleen in tijdens de eerste render — net als de beginwaarde van useState. In tegenstelling tot useState bestaat er geen vorm met een functie voor luie initialisatie. Als de berekening van de beginwaarde duur is, voer je die voorwaardelijk uit: if (ref.current === null) ref.current = computeValue().

const cacheRef = useRef(null);

if (cacheRef.current === null) {
  // Expensive computation runs only once
  cacheRef.current = buildLargeDataStructure();
}

// Use cacheRef.current anywhere in the component

Korte controle

Test je begrip van de useRef-hook uit deze les.

Beantwoord dit in de interactieve les

Samenvatting van de les

In deze les heb je geleerd dat useRef een veranderlijke eigenschap .current biedt die behouden blijft tussen renders zonder nieuwe renders te veroorzaken, dat je refs aan native componenten koppelt om imperatieve methoden zoals focus() aan te roepen en dat je timer-ID's, vorige waarden en stabiele callbacks in refs opslaat om verouderde closures te voorkomen. Hierna bekijken we useReducer voor het beheren van complexe toestandslogica.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 30
Lessen: 120

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “useRef voor DOM-nodes en veranderlijke waarden” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “useRef voor DOM-nodes en veranderlijke waarden”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus React Native Academy bevat in totaal 4 lessen.

Wat leer ik in “useRef voor DOM-nodes en veranderlijke waarden”?

Gebruik useRef om een verwijzing naar een TextInput vast te houden en deze programmatisch te focussen, en sla een veranderlijke waarde op die tussen renders blijft bestaan zonder re-renders te active… Je oefent met React Native Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met React Native Academy te beginnen?

Ervaring vooraf is niet nodig. React Native Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “useRef voor DOM-nodes en veranderlijke waarden”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over React Native Academy?

Ja. Elke les over React Native Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

useRef voor DOM-nodes en veranderlijke waarden
useReducer voor complexe statuslogica
useCallback en useMemo voor betere prestaties
Aangepaste hooks schrijven

← Terug naar React Native Academy