Fixing the "useRef Object is probably null" Error in React

Introduction

React, coupled with TypeScript, is a robust mixture for constructing strong internet functions. Nonetheless, generally we encounter TypeScript errors that may be complicated, just like the “useRef Object is probably null” error.

On this Byte, we are going to clarify this error and present a couple of options to deal with it in your React software.

Why do you get this error?

The “useRef Object is probably null” error normally occurs when TypeScript cannot assure {that a} variable or object is not going to be null or undefined at runtime. That is extra widespread when utilizing the useRef hook in React.

import React, { useRef } from 'react';

perform MyComponent() {
  const myRef = useRef(null);

  return <div ref={myRef}>Hi there World</div>;
}

Within the above code, myRef is initialized with null. TypeScript, being a statically typed language, will throw an error as it could possibly’t assure that myRef.present is not going to be null when accessed later.

Fixing the Error with Kind Guard

A typical method to repair this error is through the use of a “Kind Guard”. A Kind Guard is a method to inform TypeScript {that a} sure variable or object is a sure kind.

import React, { useRef, useEffect } from 'react';

perform MyComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    if (myRef.present !== null) {
      // Now TypeScript is aware of that myRef.present shouldn't be null
      console.log(myRef.present);
    }
  }, []);

  return <div ref={myRef}>Hi there World</div>;
}

Within the up to date code above, we’re utilizing an if assertion as a Kind Guard to examine if myRef.present shouldn’t be null earlier than logging it. This fashion, TypeScript can assure that myRef.present is not going to be null when it is lastly accessed.

Utilizing the Non-obligatory Chaining Operator

One other method to resolve the “useRef Object is probably null” error is through the use of the Non-obligatory Chaining operator (?.). This operator permits you to entry deeply nested properties of an object with out having to examine for the existence of every property within the chain.

import React, { useRef, useEffect } from 'react';

perform MyComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    // Utilizing elective chaining operator
    console.log(myRef.present?.innerText);
  }, []);

  return <div ref={myRef}>Hi there World</div>;
}

Within the code above, we’re utilizing the Non-obligatory Chaining operator to entry innerText of myRef.present. If myRef.present is null, then the expression will “short-circuit” and undefined might be returned, which avoids any runtime errors.

The Non-null Assertion Operator

In TypeScript, you too can use the non-null assertion operator to unravel the error. The non-null assertion operator is a postfix expression operator denoted by an exclamation mark (!). This operator is used when you find yourself certain that the expression previous the operator shouldn’t be null or undefined.

Let’s have a look at an instance:

const ref = useRef<HTMLDivElement>(null);
//... some code
ref.present!.focus();

Within the above code, we’re utilizing the non-null assertion operator (!) after ref.present. This tells TypeScript that ref.present won’t ever be null or undefined when the focus() methodology known as. It is a manner of telling TypeScript to belief us that we have dealt with the null or undefined case ourselves.

Word: Whereas the non-null assertion operator is usually a fast repair, it isn’t advisable to overuse it. Overuse of the non-null assertion operator can result in runtime errors as a result of it bypasses the TypeScript compiler’s null and undefined checks.

Conclusion

On this Byte, we noticed tips on how to clear up the “useRef Object is probably null” error in React. To do that, we used a Kind Guard, the Non-obligatory Chaining Operator, or the Non-null Assertion Operator. Bear in mind, whereas these options may also help you bypass the TypeScript compiler’s null and undefined checks, it is also necessary to deal with these instances correctly in your code to forestall different runtime errors.