onYReachEnd function call on initial render

[raviparmar57]

I am using onYReachEnd function for infinite scroll but function calls on initially render so got error of Maximum update depth exceeded.

version 1.5.3

<PerfectScrollbar ref={ref => { this._scrollBarRef1 = ref; }} onYReachEnd={container => this.loadMoreItems(container)} options={{ suppressScrollX: true, wheelPropagation: true, }}

{data.length > 0 && ( data.map((chat, index) => { return ( <ChatListItem key={chat_${index}} item={chat} /> ); }) )}

[kishan143-jaiswal]

I am using onYReachEnd function for infinite scroll but function calls on initially render so got error of Maximum update depth exceeded.

version 1.5.3

<PerfectScrollbar ref={ref => { this._scrollBarRef1 = ref; }} onYReachEnd={container => this.loadMoreItems(container)} options={{ suppressScrollX: true, wheelPropagation: true, }}

{data.length > 0 && ( data.map((chat, index) => { return ( <ChatListItem key={chat_${index}} item={chat} /> ); }) )}

facing same problem while infinity scroll

[goldenyz]

@raviparmar57 This behavior is by design if content's height isn't larger than the scrollbar container. Could you repro it on certain example project or codesandbox.io to help me find out what happens?

[goldenyz]

Closed for no updates.

[Justicism15]

Hello, I'm also experiencing this one on Perfect Scrollbar.
<PerfectScrollbar className="test" onYReachStart={(container) => this.handlePagination()}

I also get the same error.

[goldenyz]

@Justicism15 Could you repro it on certain example project or codesandbox.io to help me find out what happens?

[jdev422]

@Justicism15 Could you repro it on certain example project or codesandbox.io to help me find out what happens?

https://codesandbox.io/s/competent-fermi-jnpl0?file=/src/App.js here is an example

[wallace-sf]

@goldenyz Any update on this?

[ValeriyDyachenko]

The initial loading behavior with onYReachEnd is inconsistent and confusing. It works intermittently, and occasionally, it triggers numerous callback calls.

Although I don't have a sandbox to demonstrate the issue with the spam calls, I have created a reproduction scenario where the initial loading either works or fails: https://codesandbox.io/p/sandbox/zealous-kirch-zknwd6?file=%2Fsrc%2FApp.js. If you remove useEffect, the initial loading stops working. Do you have any insights into why this occurs? Could it be related to the issue with the spam calls?

import React, { useState, useEffect } from "react";
import { debounce } from "lodash";
import "./styles.css";
import PerfectScrollbar from "react-perfect-scrollbar";
import "react-perfect-scrollbar/dist/css/styles.css";

const arr = [1];
const App = () => {
  const [items, setItems] = useState(arr);
  const handlePagination = () => {
    console.log("=============");
    setItems([...items, ...arr]);
  };

  // remove this useEffect, and preloading will be broken, why it's happens?
  useEffect(() => {
    handlePagination();
  }, []);

  return (
    <div
      style={{
        border: "1px solid black",
        height: "200px",
        overflow: "auto",
      }}
    >
      <PerfectScrollbar onYReachEnd={debounce(handlePagination, 100)}>
        {items.map((_, i) => (
          <h2 key={i}>Start editing to see some magic happen {i}</h2>
        ))}
      </PerfectScrollbar>
    </div>
  );
};

export default App;