How can I avoid a TypeScript error with React useRef?

Question

Using React Hooks, I run into a TypeScript error when I initialize a ref as null, then try to access it later. This is a pared-down, illustrative example:

  const el = useRef(null);

  useEffect(() => {
    if (el.current !== null) {
      //@ts-ignore
      const { top, width } = el.current.getBoundingClientRect();
    }
  }, []);

  return <div ref={el}></div>

The @ts-ignore suppresses the error Object is possibly 'null'. Is it possible to write this without getting the error?

anbnyc · Accepted Answer · 2019-08-27 22:13:25Z

19

I found the answer here: https://fettblog.eu/typescript-react/hooks/#useref

The key is to assign a type to the ref: const el = useRef<HTMLDivElement>(null); then check carefully:

if (el && el.current){
  const { top, width } = el.current.getBoundingClientRect();
}

answered Aug 27, 2019 at 22:13

anbnyc

9211 gold badge6 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Seva Golovanov Over a year ago

The in-depth explanation here.

Collectives™ on Stack Overflow

How can I avoid a TypeScript error with React useRef?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related