Summary - useRef

Write a form that focuses an input automatically when a button is pressed.

Summary - useRef

In this group you saw what useRef is, how it differs from state, how it's used to access DOM elements, and how it's useful to store a timer id.

Two main uses: bind to a DOM element with ref={ '{ inputRef }' } and silently store a value with ref.current = .... Neither triggers a render.

In the next step you'll write a checkbox component that combines DOM access and value storage.

Exercise Checkbox component

Complete the skeleton. Write a Checkbox component. Create inputRef = useRef(null). Keep a checked state. Show <input type="checkbox" ref={ '{ inputRef }' } checked={ '{ checked }' } onChange={ '{ ... }' } />; on change, call setChecked(c => !c). Add a <label>Accept</label>. Export it.

Show example solution

import { useRef, useState } from "react";

function Checkbox() {
  const inputRef = useRef(null);
  const [checked, setChecked] = useState(false);
  return (
    <div>
      <input type="checkbox" ref={inputRef} checked={checked} onChange={() => setChecked((c) => !c)} />
      <label>Accept</label>
    </div>
  );
}

export default Checkbox;

Test yourself

What's the difference between useRef and setState?
- useRef only holds numbers
- useRef doesn't trigger render
- setState can't be used
- useRef is faster
Show answer

useRef doesn't trigger render — useRef doesn't trigger render.
Match the useRef steps

useRef(null)

Initial value
ref={inputRef}

Binding
current

Access
clearInterval

Cleanup

Next lesson: Project: Todo app

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies