React Page Scrolls on top after re render by useEffect

user_2083957 0
Viewed 2837

My problem - whenever i use <Tabs> component the onChange method calls the handleTabChange function. The component gets called again and the after repainting the useEffect gets called. This causes my page to scroll on top.

How do i make sure the handleChange and useEffect does not cause the page to scroll on top?

export function VarianceGraph({ variancesGraphData }) {
  if (variancesGraphData === undefined) {
    return null;
  }
  const [currentProject, setCurrentProject] = useState('All');
  const [currentTab, setCurrentTab] = useState('ABCD');
  const projectCodes = prepareProjectCodesForConsumption(variancesGraphData);
  let data = {};

  function handleProjectChange(event) {
    const { value } = event.target;
    setCurrentProject(value);
  }

  function handleTabChange(event, tabValue) {
    setCurrentTab(tabValue);
  }

  data = prepareProjectDataForRechartsConsumption(currentProject, variancesGraphData);
  const hideABCD = data.ABCD.length < 1;
  const hideBCDF = data['BCDF'].length < 1;

  useEffect(() => {
    if (hideABCD && hideBCDF) {
      setCurrentTab('None');
    } else if (hideABCD) {
      setCurrentTab('BCDF');
    } else if (hideBCDF) {
      setCurrentTab('ABCD');
    }
  });

  return (
    <Grid container direction="row" justify="flex-start" alignItems="flex-start">
      <Grid item xs={12}>

I have tried -

I need to have the setCurrentTab in some function so as to not render infinitely.

I have tried using the useLayoutEffect but it has the same behavior.

I can write the component code further if required. Please help. Thanks in advance.

material-ui react-hooks reactjs tabs javascript
2 Answers

If I am understanding right, you only want your useEffect code run once after VarianceGraph render.

Try to add a second argument [] to your useEffect, otherwise the code in useEffect will run after any state change.

user_23606310

I went ahead and searched the problem and found the below solutions

Keep scroll-y after rerender

But the problem is the getSnapshotBeforeUpdate is not available in hooks as can be seen here

getSnapshotBeforeUpdate using react hooks

So, the best option is to convert the component to a class component and follow the example here : https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate

Sample code, in your case, you might have to bind the document.body.scrollHeight

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Are we adding new items to the list?
    // Capture the scroll position so we can adjust scroll later.
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // If we have a snapshot value, we've just added new items.
    // Adjust scroll so these new items don't push the old ones out of view.
    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>{/* ...contents... */}</div>
    );
  }
}
user_84535020
Related