Prevent re-renders

[ivosabev]

I have the following setup:

records.tsx -> /records
records/create.tsx -> /records/create

records.tsx (BLUE)

Parent route with a loader that loads data and renders a table and a Create button that open /routes/create

records/create.tsx (RED)

Nested route that opens a modal dialog with form and an action handler.

Scenario

1. Open /records - the loader loads the data and renders the table
2. Click Create
3. /records/create opens and the loader for records.tsx is called again, the table is re-rendered and create.tsx is rendered

Is there a way to prevent calling the records.tsx loader and re-render when opening /create route?

---

The only solution I have is to delete the create.tsx route and make a create dialog component that is a rendered together with records.tsx, but only visible if the url has /create at the end of the pathname, which defeats the purpose of react router nested routes imo.

[ivosabev]

I guess one of the approaches would be the unstable_shouldReload function also discussed here.

[kiliman]

How are you navigating to the /records/create route? Are you using the <Link/> component?

Remix should not call parent loaders when navigating to a route with common ancestors.

The only time the loaders will be fetched again is after a post, like when you actually submit the new record, since you actually want the records list to be refetched.

[ivosabev]

I am using navigate from useNavigate

…

On 8 Apr 2022, at 18:49, Kiliman ***@***.***> wrote:  How are you navigating to the /records/create route? Are you using the <Link/> component? Remix should not call parent loaders when navigating to a route with common ancestors. The only time the loaders will be fetched again is after a post, like when you actually submit the new record, since you actually want the records list to be refetched. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.

[bastianwegge]

One thing to note here is that using the useNavigate hook causes a rerender on all location changes since it's based on location.

[ivosabev]

I was expecting the same behavior, but that is not the case.

I did a little more experimenting and I figure out that it was due to changed URL searchParams.

Here is a case with a Delete dialog that takes selectedItems=1,2,3 search param

The initial address is:
/records

Then you select the checkboxes next to a couple of rows in the table and click bulk Delete. The new address is:
/records/delete?selectedItems=1,2,3

This triggers a reload on the /records route as well.

I guess this should be the expected behavior.

Thanks for the help!