Stale data by using ClientOnly

[raskyer]

Describe the bug

Hello, First of all thanks for your work.

I run into a little issue by using component. Here is a small sample of my code

export default function MapRoute() {
  const { q } = useLoaderData<typeof loader>();
  const submit = useSubmit();

  return (
     <ClientOnly
          fallback={
            <Box textAlign="center">
              <CircularProgress />
            </Box>
          }
        >
          {() => (
            <MapComponent
              level={q.level}
              setLevel={(level) => {
                const newSearch = buildSearch({
                  ...q,
                  level,
                });
                submit(newSearch, {
                  preventScrollReset: true,
                });
              }}
            />
          )}
    </ClientOnly>
  );

In my client component Map, I have a listener on the level of zoom that triggers when the user zoom on the map. This listener is supposed to update the level at the loader level.

Nothing wrong with that. However, as you can see with "q" I also want to keep the other query search params in the request. I first used "useSearchParams" hook and then fallback to resend the params from the loader (thinking it would solve the issue).

The issue is that the other property of q in the listener are stalled. So if q level is not changing but q.view for example, when the listener will be called, q will contains the old value for view and not the last changed one.

Is it linked to the fact that q.view (or simply q) is not passed directly to the component ?

Your Example Website or App

NA

Steps to Reproduce the Bug or Issue

NA

Expected behavior

I want to understand why the other value of q in the listener trigger by the client component are stalled.

Screenshots or Videos

No response

Platform

• OS: Windows
• Browser: Chrome
• Version: Last

Additional context

No response

[raskyer]

It was due to dependency array in MapComponent, my bad