How to scrollIntoView only on initial render?

Question

I am struggling to scroll the node into view only on initial render. Here is what I am trying to do.

const [lastItemRef, setLastItemRef] = useState(null);
const [isScrolled, setIsScrolled] = useState(false);



useEffect(() => {
    if (lastItemRef !== null && !isScrolled) {
      lastItemRef.scrollIntoView({
        block: 'end',
        inline: 'center',
      });

      setIsScrolled(true);
    }
  }, [lastItemRef, isScrolled]);


[![return (
   <SomeList>
     <DeepItem ref={lastItemRef} /> 
   </SomeList>
)][1]][1]

** Check the screens ** DeepItem is is mentioned in the screen and I need to scroll into its view only once on the initial render.The strange thing is that when I remove setIsScrolled(true); the scrollIntoView is working but also is working on subseqent renders when I am trying to scroll the list up and down or left and right. As I can somehow imagine DOM interaction is not happenning because it's waiting for the react to update the internal state and once it happens, isScrolled is already false. In the second screen you can see the result without removing setIsScrolled(true).

F.Y.I. - I am using MUI Table with react-window FixedSizeList.

Nick Vu · Accepted Answer · 2022-06-30 06:15:42Z

3

You don't need to have state isScrolled to handle that case. Instead of that, you can call useEffect with [] (no dependencies) that will trigger your logic only once after the first rendering.

useEffect(() => {
    if (lastItemRef !== null) {
      lastItemRef.scrollIntoView({
        block: 'end',
        inline: 'center',
      });
    }
  }, []);

If lastItemRef is null initially, you can add it to the dependency list. It's always referred to the same object, so useEffect also triggers once after lastItemRef has a value.

useEffect(() => {
    if (lastItemRef !== null) {
      lastItemRef.scrollIntoView({
        block: 'end',
        inline: 'center',
      });
    }
  }, [lastItemRef]);

edited Jun 30, 2022 at 6:15

answered Jun 30, 2022 at 2:54

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

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

2 Comments

Norayr Ghukasyan Over a year ago

I know about it, thanks, but in that case, lastItemRef is null.

Nick Vu Over a year ago

@NorayrGhukasyan I think we can add lastItemRef to the dependency list, I may help your case too because the ref is only populated once and never change under the same rendered component.

Collectives™ on Stack Overflow

How to scrollIntoView only on initial render?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related