remix-run / react-router

Declarative routing for React

Home Page:https://reactrouter.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Bug]: useLoaderData triggers component re rendering even if the route remains unchanged

xuxin666666 opened this issue · comments

What version of React Router are you using?

6.22.3

Steps to Reproduce

I use useLoaderData to fetch my data and use it in the Component ComponentA, but there are some problems. ( createBrowserRouter + RouterProvider )

I have a link likes this: <a href="#hash">link</a>. And I click it many times and then ComponentA also re renders many times when the data from useLoaderData remains unchanged. The example is as follows.

see the example

Expected Behavior

ComponentA should be unchanged when the url of page don't change. If possible, I expect ComponentA don't change when only hash changes.

Actual Behavior

Actually, ComponentA re renders even if the url don't change

Those links are causing a location change, so the router is triggered to re-match the current URL. This in turn causes the loader to re-run in case its output has changed. This is expected behavior for both React Router and React itself (a component's state changing, even to the same state, triggers a re-render).