useRef

Learn mutable references with useRef.

What is useRef?

useRef is a hook that holds a mutable reference. When you write const ref = useRef(0), ref.current starts as 0. You change it with ref.current = 5; this assignment does not trigger a re-render.

Two common uses: first, to access a DOM node or component (for example <TextInput ref={inputRef} />); second, to keep a value that should not trigger a re-render (for example a timer id). Import useRef from the react package: import { useRef } from "react";.

Access a TextInput with ref

In React Native you can access a TextInput through the ref attribute. You write const inputRef = useRef(null) and pass <TextInput ref={inputRef} />. Then you call inputRef.current.focus() to focus it programmatically.

This pattern is handy on form screens: when the user presses a button you can move focus to the next field automatically. ref.current starts as null; when the component mounts React assigns the node, and on unmount it sets it back to null.

Exercise Hold a counter with useRef

Write a Counter component. Create countRef with useRef (initial value 0). When a button is pressed, increment countRef.current and log it with console.log. The component returns <Text>Counter</Text>.

Show example solution

import { useRef } from "react";
import { Text } from "react-native";

function Counter() {
  const countRef = useRef(0);
  function handlePress() {
    countRef.current += 1;
    console.log(countRef.current);
  }
  return <Text>Counter</Text>;
}

Test yourself

What happens when ref.current changes?
```
const ref = useRef(0);
ref.current = 5;
```
- The component re-renders
- The component is unmounted
- An error is thrown
- Nothing happens; no re-render is triggered
Show answer

Nothing happens; no re-render is triggered — Assigning to useRef does not trigger a re-render.

Add the ref attribute

<TextInput ____={inputRef} placeholder="Ad" />

Show answer

<TextInput ref={inputRef} placeholder="Ad" />

Match the concept to its role

useRef

Mutable reference
ref.current

Held value
null

Initial value
focus()

Sets focus programmatically

Next lesson: useMemo

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies