How to use refs in React with Typescript

React is a popular JavaScript library for building user interfaces, and Typescript is a powerful programming language that adds static typing to JavaScript. When working with React and Typescript, you may come across the need to access or manipulate the underlying DOM elements directly. This is where refs come in handy.

Refs in React allow you to access the underlying DOM elements or React components directly. They provide a way to interact with the DOM outside of the typical React component lifecycle. In this blog post, we will explore how to use refs in React with Typescript.

Creating a Ref

To create a ref in React with Typescript, you can use the useRef hook. The useRef hook returns a mutable ref object whose current property is initialized to the passed argument (in this case, null).

Here’s an example of creating a ref in React with Typescript:

import React, { useRef } from 'react';

const MyComponent: React.FC = () => {
  const myRef = useRef(null);

  // ...
}

In the example above, we create a ref called myRef using the useRef hook. We specify the type of the ref as either HTMLInputElement or null.

Accessing the Ref

Once you have created a ref, you can access the underlying DOM element or React component using the current property of the ref object. This property holds the reference to the underlying element.

Here’s an example of accessing the ref in a React component:

import React, { useRef } from 'react';

const MyComponent: React.FC = () => {
  const myRef = useRef(null);

  const handleClick = () => {
    if (myRef.current) {
      myRef.current.focus();
    }
  };

  return (
    

      
      Focus Input
    
  );
}

In the example above, we create a ref called myRef and attach it to an input element. When the button is clicked, the handleClick function is called, and if the ref is not null, it focuses the input element.

Using Refs with Class Components

If you are using class components instead of functional components, you can also use refs with Typescript. The process is similar to functional components, but you need to use the React.createRef() method to create the ref.

import React from 'react';

class MyComponent extends React.Component {
  private myRef = React.createRef();

  handleClick = () => {
    if (this.myRef.current) {
      this.myRef.current.focus();
    }
  };

  render() {
    return (
      

        
        Focus Input
      
    );
  }
}

In the example above, we create a ref called myRef using React.createRef(). We attach it to an input element and use it to focus the input when the button is clicked.

Conclusion

Using refs in React with Typescript allows you to access and manipulate the underlying DOM elements or React components directly. Whether you are using functional components or class components, refs provide a powerful tool for interacting with the DOM outside of the typical React component lifecycle.

Remember to use refs sparingly and only when necessary, as they can make your code harder to understand and maintain. But when used correctly, refs can be a valuable addition to your React and Typescript projects.