React Native Academy · Lekcja

useRef dla węzłów DOM i wartości zmiennych

useRef dla węzłów DOM i wartości zmiennych to bezpłatna lekcja React Native Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Native Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Native Academy zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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.

Często zadawane pytania

Czy lekcja „useRef dla węzłów DOM i wartości zmiennych” jest bezpłatna?

Tak — pełny tekst „useRef dla węzłów DOM i wartości zmiennych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Native Academy, przejdź na CoddyKit PRO. Kurs React Native Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „useRef dla węzłów DOM i wartości zmiennych”?

Użyj useRef do przechowywania referencji do TextInput i ustawiania na nim fokusu programowo, a także do przechowywania wartości zmiennej, która zachowuje się między renderowaniami bez wywoływania pon… Ćwiczysz React Native Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Native Academy?

Nie wymagamy żadnego doświadczenia. React Native Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „useRef dla węzłów DOM i wartości zmiennych”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Native Academy?

Tak. Każda lekcja React Native Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

useRef dla węzłów DOM i wartości zmiennych
useReducer dla złożonej logiki stanu
useCallback i useMemo na rzecz wydajności
Pisanie własnych hooków

← Powrót do React Native Academy