diff --git a/apps/web/src/components/profile/user-details.tsx b/apps/web/src/components/profile/user-details.tsx
index 4cfde10b4..43024c8be 100644
--- a/apps/web/src/components/profile/user-details.tsx
+++ b/apps/web/src/components/profile/user-details.tsx
@@ -1,9 +1,10 @@
 import { m } from "framer-motion";
 import { useTranslation } from "next-i18next";
-import posthog from "posthog-js";
 import * as React from "react";
 import { useForm } from "react-hook-form";
 
+import { usePostHog } from "@/utils/posthog";
+
 import { requiredString, validEmail } from "../../utils/form-validation";
 import { trpc } from "../../utils/trpc";
 import { Button } from "../button";
@@ -31,12 +32,12 @@ export const UserDetails: React.FunctionComponent<UserDetailsProps> = ({
     defaultValues: { name, email },
   });
 
-  const { refresh } = useUser();
+  const posthog = usePostHog();
 
   const changeName = trpc.user.changeName.useMutation({
     onSuccess: (_, { name }) => {
-      posthog.people.set({ name });
-      refresh();
+      reset({ name, email });
+      posthog?.people.set({ name });
     },
   });
 
@@ -47,7 +48,6 @@ export const UserDetails: React.FunctionComponent<UserDetailsProps> = ({
         if (dirtyFields.name) {
           await changeName.mutateAsync({ userId, name: data.name });
         }
-        reset(data);
       })}
     >
       <div className="flex items-center justify-between border-b px-3 py-2 shadow-sm">
diff --git a/apps/web/src/utils/posthog.ts b/apps/web/src/utils/posthog.ts
index 877373ac2..c818cc570 100644
--- a/apps/web/src/utils/posthog.ts
+++ b/apps/web/src/utils/posthog.ts
@@ -1,5 +1,6 @@
 import { usePostHog as usePostHogHook } from "posthog-js/react";
 
-// Seems silly but annoyingly typescript tries to import usePostHog from
-// posthog-js/react/dist/types which doesn't even work.
-export const usePostHog = usePostHogHook;
+export const usePostHog = () => {
+  const posthog = usePostHogHook();
+  return process.env.NEXT_PUBLIC_POSTHOG_API_KEY ? posthog : null;
+};