updateAutoHeight() and React

[baeharam]

I use swiper.js with React and render list data dynamically when server response is reached. So, I added updateAutoHeight() when list component is updated like below.

/* SomeListComponent.tsx */

useEffect(() => {
  updateAutoHeight();
});

But, I have case that requirement is keeping scroll position. It means that I have to move scroll position after height of slide is updated by updateAutoHeight(). However, this function inject newHeight by CSS which doesn't occur re-render of React component.

In this situation, how can I run re-render when height is updated by updateAutoHeight() ?

Thanks for your reading!

[nolimits4web]

Swiper's updateAutoHeight method is fully synchronous so everything you write after will be executed after height updated:

useEffect(() => {
  updateAutoHeight();
  // height updated
});

if you use update auto height with transition (by default) it will be still in transition, and if you need to do something after transition then:

useEffect(() => {
  updateAutoHeight();
  swiper.wrapperEl.addEventListener('transitionend', () => {
    // do something after height change transition
  })
});

[baeharam]

@nolimits4web Thanks for the answer! But, I have an issue.

• When user clicks tab, we store scroll position in localstorage to restore when back to current slide.
• When user come back to current slide, scroll position has to be restored by document.body.scrollTo() after height is updated.

In above situation, scroll position is restored after rendered with your method. It means that it's not showing smoothly. I want smooth restoration that felt natural by user. How can I achieve this?

[baeharam]

After I wrote above question, I applied document.body.scrollTop = ... and it works. But, I don't know whether it is proper solution. How do you think?