Using PostHog in Your React App: Integration Guide and Benefits

#webdev #programming #node #react

If you’re building a React app, you eventually hit the same wall every team hits: you ship features, but you don’t actually know how people use them. Which buttons get clicked? Where do users drop off in a signup flow? Did that new feature actually move the needle? This is where PostHog comes in.

PostHog is an open-source product analytics platform that bundles event tracking, session replay, feature flags, A/B testing, and error tracking into a single tool. Instead of stitching together Google Analytics, LaunchDarkly, Sentry, and Hotjar separately, PostHog gives you most of that in one SDK. Here’s how to wire it into a React app and what you actually get out of it.

Installing PostHog in React
PostHog has a dedicated React SDK (@posthog/react) that sits on top of the core posthog-js library. For a standard Vite or Create React App project, installation is straightforward.

Install both packages:

npm install posthog-js @posthog/react
Add your project token and host to your environment variables. If you’re using Vite, prefix them with VITE_ so they're exposed to the frontend:

.env.local

VITE_PUBLIC_POSTHOG_KEY=your_project_api_key
VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
You can find both values in your PostHog project settings.

Wrapping Your App with the Provider
PostHog integrates at the root of your app using the PostHogProvider, typically in main.jsx (Vite) or index.js (CRA):

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { PostHogProvider } from '@posthog/react'
import App from './App.jsx'
const options = {
  api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
  defaults: '2026-01-30', // applies PostHog's recommended SDK defaults
}
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <PostHogProvider
      apiKey={import.meta.env.VITE_PUBLIC_POSTHOG_KEY}
      options={options}
    >
      <App />
    </PostHogProvider>
  </StrictMode>
)