React Native Academy · Lesson

useRef for DOM Nodes and Mutable Values

Use useRef to hold a reference to a TextInput and programmatically focus it, and store a mutable value that persists across renders without triggering re-renders.

useRef for DOM Nodes and Mutable Values is a free React Native Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Native Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

Frequently asked questions

Is the “useRef for DOM Nodes and Mutable Values” lesson free?

Yes — the full text of “useRef for DOM Nodes and Mutable Values” is free to read here on the web, and the React Native Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Native Academy course, upgrade to CoddyKit PRO.

What will I learn in “useRef for DOM Nodes and Mutable Values”?

Use useRef to hold a reference to a TextInput and programmatically focus it, and store a mutable value that persists across renders without triggering re-renders. You practise React Native Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Native Academy?

No prior experience is required. React Native Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “useRef for DOM Nodes and Mutable Values” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Native Academy lesson?

Yes. Every React Native Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Native Academy