Next.js Discord

Discord Forum

useEffect NOT running on RootLayout

Unanswered
Polar bear posted this in #help-forum
Open in Discord
Polar bearOP
Hello, I am trying to add Google Analytics to my app, and I created a custom file to log what I have to log, but the useEffect does not run:

// app/layout.js
import Providers from "./providers/SessionProvider";  
import { Suspense } from 'react';
import GoogleAnalytics from './components/GoogleAnalytics';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Providers>  
          {children}
        </Providers>
      </body>
      <GoogleAnalytics />
    </html>
  );
}


my component:

'use client';

import { usePathname, useSearchParams } from 'next/navigation';
import { useEffect } from 'react';
import { initGA, logPageView } from '@/lib/analytics';

export default function GoogleAnalytics() {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  
  // Initialize analytics once on mount
  useEffect(() => {
    const measurementId = process.env.NEXT_PUBLIC_GA_ID;
    if (measurementId) {
      initGA(measurementId);
    }
  }, []);

  useEffect(() => {
    console.log("✅ useEffect is running...");
    // THIS console log is never logged
  }, []);
  
  
  // Track page changes
  useEffect(() => {
    if (pathname) {
      logPageView();
    }
  }, [pathname, searchParams]);
  
  // Return null as this component doesn't need to render anything
  return null;
}


I believe the problem is in the way Next Renders the component in the root layout ( since it is not a client component )

10 Replies

LuisLl
That’s expected behavior.
template.tsx does allow useEffects to re-synchronize on navigations.
LuisLl
layout.tsx maintains state across all navigations since it not re-rendered, but making your Component a client component should fix it, tho. Also, idk if you’re getting a warning about useSearchParams, but in Next.js 15, all components that use the SearchParams API need to be wrapped in <Suspense>
@LuisLl That’s expected behavior. template.tsx does allow useEffects to re-synchronize on navigations.
Polar bearOP
so should I create a file named template.jsx?
Could you help me find the documentation, please?
A template.jsx is similar to a layout in the sense that it wraps your page.tsx. But it allows for effects to re-synchronize on page navigation since it’s given a key.

In the rendered tree you’ll have layout > template > page
But what’s weird is that the Client Component approach should work. You can also import the Client Component dynamically and disable SSR since you don’t need it on the server.

https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic
Polar bearOP
thank you, I will try those
Polar bearOP
it still does not work
// template.jsx
import GoogleAnalytics from './components/GoogleAnalytics';

export default function Template({ children }) {
  return (
    <div>
      <GoogleAnalytics />
      {children}
    </div>
  );
}


// layout.js
<Providers>  
  <Template>
    {children}
  </Template>
</Providers>
LuisLl
Any of your effects are running on either approach?
Not even the simple console.log() if that’s the case, that’s weird…