Is there a way to prevent Remix from re-rendering the current route on navigation?

[hilja]

It seems that Remix re-renders the current React component when a Link is clicked. I don't mind the re-render, it's not a perf issue, but in my case it's causing const params = useParams() to be same on the new page, which causes problems.

I think this thread on react-router repo is about the same thing.

[hilja]

I can solve my problem with:

const navigation = useNavigation()

if (navigation.state === 'loading') {
  // Do not do the thing with params
} else {
  // Do the things with params
}

[nboliver-ventureweb]

I'm also encountering this issue. It's causing some visual issues since many of the components use Framer motion, and they are re-animating prior to navigating. It seems heavy-handed to memoize every component.

[skizzo]

Has anyone managed to avoid these re-renders? Running into the same issue here.

[sergiodxa]

The re-render happens because Remix/RR has a single context value that needs to change to represent the navigation changes, and because of this any component using a hook from Remix/RR will be re-rendered by React as there's no way to subscribe to only part of a context.

Usually a re-render is not an issue, and if it becomes an issue is typically due slow renders, in that case fix the slow render so it's not an issue anymore.

If you can't fix the slow render, you can move your actual UI to another memoized component, so every route has at least two components:

const ActualUI = React.memo(function ActualUI(props: ActualUIProps) {
  // render something
})

export default function Component() {
  // here call Remix/RR hooks
  return <ActualUI /> // pass data from Remix/RR hooks as props
}