React Native Academy · Lektion

useRef für DOM-Knoten und veränderliche Werte

useRef für DOM-Knoten und veränderliche Werte ist eine kostenlose React Native Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Native Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Native Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

What is useRef?

useRef is a React hook that returns a mutable ref object whose .current property persists across renders. Unlike state variables, updating ref.current does not trigger a re-render. This makes useRef perfect for storing values that change frequently but should not cause the component to update.

import { useRef } from 'react';

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

Attaching a Ref to a Native Component

Pass a ref to a native component via its ref prop. React Native then populates ref.current with the underlying native component instance. This gives you access to methods like focus(), blur(), and measure() that are defined on the native component.

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>
  );
}

Programmatically Focusing a TextInput

A common use case is automatically focusing the next input when the user presses Return on the keyboard. Attach refs to each TextInput and in the onSubmitEditing handler of the first input, call secondInputRef.current.focus(). This creates a smooth form keyboard flow on mobile.

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 for Mutable Values

The second major use of useRef is storing mutable values that should not trigger re-renders. Store a timer ID, an animation frame handle, a previous prop value, or any other value that changes frequently. Reading or writing ref.current is synchronous and has no render cost.

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} />;
}

Storing Previous State Values

A useful pattern is storing the previous value of a prop or state variable using a ref. In a useEffect that runs after every render, copy the current value into the ref. During the next render, prevRef.current holds the value from the previous render cycle, allowing you to compare old and new values.

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

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

  const prevCount = prevCountRef.current;

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

Avoiding Stale Closures with Refs

Event handlers and callbacks that are set up once (e.g., inside a timer or event listener) can capture a stale version of state. Store the latest value in a ref and read from the ref inside the callback to always access the most recent value, even if the callback was created many renders ago.

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
}

The Difference Between useRef and useState

The key difference: useState triggers a re-render when updated; useRef does not. Use useState when the value must be visible in the UI. Use useRef when the value is used for logic or side effects but its change should not cause the component to repaint. Choosing the wrong one leads to either missed UI updates or unnecessary re-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 with FlatList

Attaching a ref to a FlatList gives you access to imperative methods like scrollToIndex, scrollToOffset, and scrollToEnd. This is used for back-to-top buttons, alphabetic index navigation, or auto-scrolling to a newly added item at the bottom of the list.

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}
    />
  );
}

Measuring a Component's Layout

Call ref.current.measure(callback) to read a component's position and size relative to the window. The callback receives x, y, width, height, pageX, and pageY. This is useful for positioning tooltips, popovers, or custom dropdown menus relative to the component that triggered them.

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}>

Forwarding Refs to Custom Components

If you want to attach a ref to a custom component (not a built-in like TextInput), wrap it with React.forwardRef. The wrapper passes the ref down to the underlying native element. Without forwardRef, the ref would point to the custom component's host object, not its inner 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} />

useRef Initialization and Lazy Init

The argument passed to useRef(initialValue) sets ref.current only on the first render — just like useState's initial value. Unlike useState, there is no lazy initializer function form. If the initial value is expensive to compute, compute it conditionally: 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

Quick Check

Test your understanding of the useRef hook from this lesson.

Lesson Recap

In this lesson you learned: useRef provides a mutable .current property that persists across renders without causing re-renders, attach refs to native components to call imperative methods like focus(), and store timer IDs, previous values, and stable callbacks in refs to avoid stale closures. Next up we explore useReducer for managing complex state logic.

Häufig gestellte Fragen

Ist die Lektion „useRef für DOM-Knoten und veränderliche Werte“ kostenlos?

Ja — der vollständige Text von „useRef für DOM-Knoten und veränderliche Werte“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Native Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Native Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „useRef für DOM-Knoten und veränderliche Werte“?

Verwenden Sie useRef, um eine Referenz auf ein TextInput zu halten und es programmgesteuert zu fokussieren. Speichern Sie außerdem einen veränderlichen Wert, der Renderings überdauert, ohne neue Rend… Du übst React Native Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Native Academy zu starten?

Keine Vorkenntnisse erforderlich. React Native Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „useRef für DOM-Knoten und veränderliche Werte“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Native Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Native Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

useRef für DOM-Knoten und veränderliche Werte
useReducer für komplexe State-Logik
useCallback und useMemo für Performance
Benutzerdefinierte Hooks schreiben

← Zurück zu React Native Academy