How to use React refs with TypeScript in Function and Class Components

How to use React refs with TypeScript in Function and Class Components

Learn how to use React refs with TypeScript in function and class components. Refs are created using React.createRef() and attached to React elements via the ref attribute. TypeScript: Typed JavaScript at Any Scale. TypeScript is an open-source language which builds on JavaScript, one of the world's most used tools, by adding static type definitions. Types provide a way to describe the shape of an object, providing better documentation, and allowing TypeScript to validate that your code is working correctly.

In this post, we cover how to use React refs with TypeScript in function and class components.

Creating strongly-typed refs in function components

The useRef hook can be used to access all the properties and methods of an element.

const element = React.useRef(null);
// can access all the properties and methods of `element` via `element.current` 
...
return (
  <SomeElement ref={element} />
);

It is commonly used when we need to invoke methods on an element imperatively. Below is an example:

function Search() {
  const input = React.useRef(null);
  React.useEffect(() => {
    if (input.current) {
      input.current.focus();
    }
  }, []);
  return (
    <form>
      <input ref={input} type="search" />
    </form>
  );
};

We are setting focus on an input when the component first renders.

The type of input.current is inferred as null if strict mode is on; otherwise, it is inferred as any. A type error also occurs when input.current is referenced if strict mode is on.

Not ideal. 😞

We can explicitly define the type of the element returned from useRef by passing a generic type parameter:

const element = React.useRef<ElementType>(null);

So, we can explicitly type the ref in the Search component as follows:

const input = React.useRef<HTMLInputElement>(null);

The type error now disappears. 😃

react typescript javascript web-development developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Make an App with React JS / JavaScript: React and TypeScript

Building a Web Application as a Front-End Developer using React JS and TypeScript! Learn how to use the “Thinking in React” method and apply it to your real web application. We will be using real live weather data to display in our application and make our components reusable and maintainable.

How to Migrate a React Component from JavaScript to TypeScript

Learn how to easily migrate a React component from JavaScript to TypeScript to improve your project. When migrating over to TypeScript, one basic thing to keep in mind is TypeScript files have a .ts extension instead of .js. Another thing to keep in mind that makes migrating over a breeze is that you can configure your TypeScript compiler to allow JavaScript files.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Hire Dedicated React Native Developer in India | React Native Development

Hire dedicated React Native developers for your next project. As the top react native development company we offer you the best service as per your business needs.