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;

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?

TanStack•3mo ago•

3 replies

worthy-azure

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;

Best practice to improve INP?

Similar Threads

Best practice to improve INP?

Similar Threads

Similar Threads

Similar Threads