Best practice to improve INP?

I've had a component that render highlight like this, it use the following code to determine whether the nav item should be highlighted or not

  const location = useRouterState({ select: (state) => state.resolvedLocation ?? state.location });
  const pathname = location.pathname;

  const location = useRouterState({ select: (state) => state.resolvedLocation ?? state.location });
  const pathname = location.pathname;

  const location = useRouterState({ select: (state) => state.resolvedLocation ?? state.location });
  const pathname = location.pathname;

  const location = useRouterState({ select: (state) => state.resolvedLocation ?? state.location });
  const pathname = location.pathname;

The current INP is 150ms, but it could increase to 600ms for a heavy page. What I noticed is that the URL value changes much earlier than when useRouterState value change.

Is there any best practice or low hanging fruit that I can use to reduce INP? At least to make the highlight be quite instant and not noticeable to human eyes?

Best practice to improve INP?

Similar Threads

Similar Threads

Similar Threads