0Pricing
React Native Academy · Aula

useRef para nós do DOM e valores mutáveis

Use useRef para manter uma referência a um TextInput e focá-lo programaticamente, além de armazenar um valor mutável que persiste entre renderizações sem acionar novas renderizações.

useRef para nós do DOM e valores mutáveis é uma aula grátis de React Native Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Native Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Native Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

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.

Perguntas Frequentes

A aula “useRef para nós do DOM e valores mutáveis” é grátis?

Sim — o texto completo de “useRef para nós do DOM e valores mutáveis” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Native Academy, atualize para CoddyKit PRO. O curso de React Native Academy inclui 4 aulas no total.

O que vou aprender em “useRef para nós do DOM e valores mutáveis”?

Use useRef para manter uma referência a um TextInput e focá-lo programaticamente, além de armazenar um valor mutável que persiste entre renderizações sem acionar novas renderizações. Você pratica React Native Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Native Academy?

Nenhuma experiência prévia é necessária. React Native Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “useRef para nós do DOM e valores mutáveis”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Native Academy?

Sim. Cada aula de React Native Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. useRef para nós do DOM e valores mutáveis
  2. useReducer para lógica de estado complexa
  3. useCallback e useMemo para desempenho
  4. Escrevendo hooks personalizados
← Voltar para React Native Academy