High overhead / poor performance with React SPA and PostHogProvider

[lauri865]

We just spent the last 5 days searching for the root cause of our performance issues in the app, and after optimising everything to no end, we finally realized that the root cause seems to be Posthog. After disabling Posthog, our app became lightning fast in production, and route changes became from sluggish to instant. Click events from lagging to instant.

It worked fine with light-weight pages, but as long as there's something more expensive happening on the page itself (datagrids, charts, etc.), we started hitting many performance issues. As any self-aware development team, we just assumed it was our shitty code at fault, but we assumed completely wrong this time.

It seems that the issue has become much worse in the recent months. For now we decided to turn off Posthog completely, since the performance tax is not worth it for us. Our analytics needs are rather simple in a B2B SaaS setting (whereas performance is one of the key selling points of our application), and thus we're not interested in any advanced instrumentation that could affect UX as a consequence. If anything, we'd be more fine with analytics failing than it affecting the user experience.

It seems like new minor semver versions turn on new features automatically, which is just not acceptable nor predictable. Either we need to stop updating the dependency or stop using the react package altogether.

After some testing, we got to an acceptable performance level, but still with visibly slower navigation and click events vs. not having Posthog enabled. The config is as follows:

const options: Partial<PostHogConfig> = {
  api_host: import.meta.env.VITE_POSTHOG_HOST,
  persistence: "memory",
  capture_pageview: false,
  capture_pageleave: false,
  cross_subdomain_cookie: true,
  enable_recording_console_log: false,
  autocapture: false,
  disable_session_recording: true,
  disable_surveys: true,
  enable_heatmaps: false,
  disable_scroll_properties: true,
  disable_web_experiments: true,
  rageclick: false,
  capture_heatmaps: false,
  capture_performance: false,
  capture_dead_clicks: false,
};

There's a million flags there and a lack of any documentation – e.g. what are the default values, what they do, etc. Better type hints / descriptions would go a long way here.

In summary, we have no idea which of the many features is actually causing the performance issues, but would love any help with achieving a React setup that has minimal to runtime overhead, and a guidance on how we can avoid automatically opting in to new features in the future, unless we explicitly decide to do so after testing them.

We're on version 1.180.1. React 19 + compiler, react-router v6 SPA.

[lauri865]

May be related to #1405