Using useRef with TypeScript: Function Input Guide (2026)

In modern React applications, managing references to DOM elements is a crucial aspect, especially when working with TypeScript, which adds a layer of type safety and predictability. The useRef hook in React allows you to persist values across renders and directly interact with DOM elements in a functional component. However, using useRef with TypeScript can introduce some complexities, particularly when you need to use the ref as an input parameter in a function.

In this tutorial, we will explore how to effectively use useRef in a React function component with TypeScript, focusing on the correct typing of a ref element, especially when passing it to a function like scrollToSection.

Key Takeaways

• Learn how to define and use useRef in a TypeScript React component.
• Understand how to type the ref correctly when passing it to functions.
• Gain insights into handling null values with TypeScript's strict type checks.
• Implement a practical example to see useRef in action.

Prerequisites

• Basic understanding of React and TypeScript.
• Node.js and npm installed on your machine.
• Text editor or IDE (e.g., VSCode) for coding.

Step 1: Setting Up the React Project

To begin, set up a new React project with TypeScript using Create React App:

npx create-react-app my-app --template typescript

Navigate to your project directory:

cd my-app

Step 2: Creating the Navbar Component

Let's create a component called Navbar that utilizes useRef for DOM manipulation. This component will include a button to scroll to a specific section.

import React, { useRef } from 'react';

function Navbar() {
  const section1 = useRef(null);

  const scrollToSection = () => {
    if (section1.current) {
      section1.current.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    
      Go to Section 1
      
        Section 1
      
    
  );
}

export default Navbar;

In this example, the useRef is typed as HTMLElement | null, which means it can either hold an HTML element or be null. This approach is crucial to avoid runtime errors, especially during the initial render when the ref is not yet attached to any DOM element.

Step 3: Understanding the useRef Typing

When using useRef in TypeScript, it's important to account for the initial value being null. This is because the ref will not be attached to any element until after the component mounts. Typing the ref as HTMLElement | null allows TypeScript to recognize that the ref may not always point to an HTML element.

Step 4: Passing useRef to a Function

The scrollToSection function uses the ref to scroll to the section. This function checks if the ref is not null before attempting to call scrollIntoView. This check is a crucial step as it prevents potential runtime errors from trying to interact with a null value.

Common Errors/Troubleshooting

• Type 'null' is not assignable: Ensure that your ref is typed as HTMLElement | null to account for the initial null value.
• Ref is not attached: Ensure that the component containing the ref is fully mounted before trying to use the ref.

Frequently Asked Questions

Why use 'HTMLElement | null' for useRef?

Using 'HTMLElement | null' accounts for the initial state where the ref may not yet be attached to a DOM element.

Can I use useRef for non-DOM references?

Yes, useRef can store any value that persists across renders, not just DOM elements.

How does useRef differ from useState?

useRef does not cause re-renders when updated, while useState triggers a re-render.

Frequently Asked Questions

Why use 'HTMLElement | null' for useRef?

Using 'HTMLElement | null' accounts for the initial state where the ref may not yet be attached to a DOM element.

Can I use useRef for non-DOM references?

Yes, useRef can store any value that persists across renders, not just DOM elements.

How does useRef differ from useState?

useRef does not cause re-renders when updated, while useState triggers a re-render.