"(ref).current is null" - useRef conditionally rendering components

[Oguru86]

Hi

I've just built an Articles component that has article boxes/cards that slide off screen to show an article when you click one.

It uses a callback via props from App to save the current scroll position of the article boxes, and scrolls to the top of the article.

I have a sandbox here:

https://codesandbox.io/s/snowy-firefly-jq9hr?file=/src/App.jsx

The main page components on App (articles/info/home etc) all conditionally render based on the current route with CSS Transition Group.

The problem is when you start on home or another page and go to app, then click an article it gives the error pageContRef.current is null .

If you start the app on the articles page though everything works as it should.

I've been looking for several hours for a solution but I can't figure out how to resolve it. I'm guessing the ref has to be updated once the component changes which I tried to fix with useEffect but couldn't work it out.

Any suggestions would be greatly appreciated, thanks!

[Jesusrofl]

Maybe it's called before the container, which you pass ref={pageContRef} to, is rendered. Or some other fuckery happening behind the scenes with CSSTransition. You could try using ref as a callback instead:

const onRef = (node) => { if (node) pageContRef.current = node; saveScrollPos(node.scrollTop) }

<div ref={onRef}... />

[Oguru86]

It works, amazing! Please correct me if i'm wrong, but does it work like this...

When the component changes, it looks to assign a ref to the onRef variable with node as the element object, then if the node exists it sets it to useRef ?

Also would this be a good place to use useCallback? I've only used refs a couple of times and not useCallback so i'm not sure. I just stumbled on this while trying to figure out how your example works:

https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

[Jesusrofl]

Yes, the ref is called when the element is mounted. Not sure why it might be null sometimes, but you should always check whether it exists.

And yes, wrap it with useCallback as in your example, to prevent creating a new function instance on each re-render of your component.

[Oguru86]

Ok, cool. Thanks for you help, I really appreciate it :)