Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WhenVisible useEffect function is not recreated when params change. #2152

Open
Loeffeldude opened this issue Dec 25, 2024 · 3 comments · May be fixed by #2153
Open

WhenVisible useEffect function is not recreated when params change. #2152

Loeffeldude opened this issue Dec 25, 2024 · 3 comments · May be fixed by #2153
Labels
react Related to the react adapter

Comments

@Loeffeldude
Copy link

Version:

  • @inertiajs/react version: 2.0.0

Describe the problem:

The WhenVisible component has a useEffect that makes use of the params prop by calling getReloadParams. However the prop is not in the dependency array of the useEffect resulting in changes in the params never actually being used. This makes it not possible to implement infinite scroll for instance.

Steps to reproduce:

The observer is never recreated because the effect isn't being run because of the missing dependencies in the array.
So this won't work. The data will become stale after the first fetch.

<WhenVisible
      fallback={"Fallback"}
      data={""}
      always
      params={{
          method: "post",
          data: {
              page: page,
          },
          onSuccess: (data) => {
              setPage((p) => p + 1);
          },
          forceFormData: true,
      }}
  >
      {/** Content */}
</WhenVisible>
@Loeffeldude Loeffeldude added the react Related to the react adapter label Dec 25, 2024
@Loeffeldude
Copy link
Author

I can make a pull request right away but I might wait until #2048 is merged.

@PedroAugustoRamalhoDuarte

Good catch @Loeffeldude , i think you can make a PR if get merged first i resolve the conflicts with mine.

@PedroAugustoRamalhoDuarte

If someone need a quick fix, you can wrap the component inside another functional component to force it to re-render.

const TodosIndex = ({todos, pagy}) => {

  // Needs for WhenVisible component re-render and fetch again
  const RenderWhenVisible = () => {
    if (pagy.page < pagy.last) {
      return (<WhenVisible fallback={"Loading..."} params={{
          data: {
            page: pagy.page + 1,
          },
          only: ["todos", "pagy"],
          preserveUrl: true,
        }}/>
      )
    }
  }

  return (
    <div className="container px-4 mx-auto pt-26">
          <RenderWhenVisible/>
    </div>
  )
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
react Related to the react adapter
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants