Why is typescript complaining when trying to use ref in react?

Question

I am using ref to animate elements on scroll.

  const foo = () => {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    setAnimClass(
      rect.top >= 0 && rect.bottom <= window.innerHeight ? styles.animClass : ""
    );
  };

This code worked well in next.js app, but when I am using this in create-react-app type-script template, it is complaining that Object is possibly 'null'.

From if (!ref.current) return; it is clear that program will be returned if ref.current does not exist. But still, TypeScript gives error on the next line ref.current.getBoundingClientRect(), pointing at the ref.

How do I solve this issue without removing the null checking from typescript config?

complete file - https://github.com/mayank1513/react-contact-app/blob/master/src/components/ContactListItem.tsx

This is the complete project repo - https://github.com/mayank1513/react-contact-app

As of now, I have bypassed the issue using "strict": false in tsconfig. But I need to do it in strict mode.

Similar issue in this file as well. And this is not resolved even by setting "strict": false in tsconfig. For now, I am just relying on document.getElementById() -- around line 65

Optional chaining might suppress the error `ref?.current?.getBoundingClientRect()` — omeanwell, Jan 22 '21 at 15:10

score 6 · Answer 1 · answered Jan 23 '21 at 06:34

6

Try this:

const ref = useRef() as RefObject<HTMLDivElement>;

const foo = () => {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    setAnimClass(
      rect.top >= 0 && rect.bottom <= window.innerHeight ? styles.animClass : ""
    );
  };

answered Jan 23 '21 at 06:34

Sakshi

1,464
2
8
15

What is RefObject here? typescript complaining about RefObject – Mayank Kumar Chaudhari Jan 23 '21 at 07:23
You also have to add an import statement.Add this `import { RefObject } from "react";` – Sakshi Jan 23 '21 at 07:28
this issue is resolved by I get error when using ref={ref} in jsx. Using useRef() as any works great, but I think this is more appropriate approach if jsx also works well – Mayank Kumar Chaudhari Jan 23 '21 at 07:55
show me your code where are you using your `ref` ? – Sakshi Jan 23 '21 at 07:56
Link in the question itself – Mayank Kumar Chaudhari Jan 23 '21 at 07:58
1

Hi, was a silly mistake. I was using the ref in input type. Solved the issue. – Mayank Kumar Chaudhari Jan 24 '21 at 05:35

apoteet · Accepted Answer · 2021-01-25T15:43:24.583

5

you can cast ref to any as you get it from react.
const ref = useRef(null) as any;

Edit: I wanted to come back and give a more strongly typed solution, but Sakshi's answer does just that. This is the lazy fix, so follow their solution.

edited Jan 25 '21 at 15:43

answered Jan 23 '21 at 06:12

apoteet

742
5
21

score 4 · Answer 3 · answered Jan 23 '21 at 07:25

This is simple just add type HTMLDivElement to useRef, and the error didn't show up anymore:

const ref = useRef<HTMLDivElement>(null);

Bonus: you should always remove the listener inside useEffect:

useEffect(() => {
  foo();
  window.addEventListener("scroll", foo);
  window.addEventListener("resize", foo);
  return () => {
    window.removeEventListener("scroll", foo);
    window.removeEventListener("resize", foo);
  }
}, []);

Why is typescript complaining when trying to use ref in react?

3 Answers3