Object is possibly 'null'. TS2531 Error when defining useScroll hook

Question

I have the following component definition:

import { useRef } from 'react';

export default function useScroll() {
    const ref = useRef(null)
    const executeScroll = () => {
        if (ref != null)
            window.scrollTo(0, ref.current.offsetTop)
    }
    const htmlElementAttributes = { ref }

    return [executeScroll, htmlElementAttributes]
}

The line window.scrollTo(0, ref.current.offsetTop) throws the error. I have included if (ref != null) check, but did not work. Any ideas?

Dennis Vash · Answer 1 · 2019-07-13T16:38:35.870

1

Try ref.current !== null, because:

const ref = useRef(null); // ref is object { current: null }
ref !== null;             // always true

import { useRef } from 'react';

export default function useScroll() {
    const ref = useRef(null)
    const executeScroll = () => {
        if (ref.current !== null)
            window.scrollTo(0, ref.current.offsetTop)
    }
    const htmlElementAttributes = { ref }

    return [executeScroll, htmlElementAttributes]
}

edited Jul 13 '19 at 16:38

answered Jul 13 '19 at 16:33

Dennis Vash

50,196
9
100
118

Thanks for the answer. But, still the same error persists. – renakre Jul 13 '19 at 16:55
https://stackoverflow.com/questions/40349987/how-to-suppress-typescript-error-ts2533-object-is-possibly-null-or-undefine – Dennis Vash Jul 13 '19 at 16:59

Object is possibly 'null'. TS2531 Error when defining useScroll hook

1 Answers1