Next.js Discord

Discord Forum

Children being rendered twice on pages

Unanswered
Thrianta posted this in #help-forum
Open in Discord
Avatar
ThriantaOP
In all of my pages, for some reason everything is being rendered twice,

Like this: 
<Navbar />
<Footer />
<Navbar />
<Footer />


I believe this issue is with my custom context provider(?)

/* eslint-disable ts/no-redeclare */
import { useAction } from 'next-safe-action/hooks';
import type { FC, ReactNode } from 'react';
import { createContext, useContext, useLayoutEffect, useMemo } from 'react';

import { update } from '@/actions/store/update';

export interface AmythystStoreContext extends Amythyst.Store {
  ....
}

export const AmythystStoreContext = createContext<AmythystStoreContext | null>(null);

export const AmythystStoreProvider: FC<{ children: ReactNode } & Amythyst.Store> = ({
  children,
  config,
  consented,
  session,
}) => {
  const { execute } = useAction(update);

  // ... Defining Functions

  useLayoutEffect(() => {
    const element = document.documentElement;
    const classes = element.classList;
    const allowed = ['light', 'dark'];

    if (!classes.contains(config.theme)) {
      classes.add(config.theme);
      classes.remove(...allowed.filter((theme) => theme !== config.theme));

      element.style.colorScheme = config.theme;
    }
  }, [config.theme]);

  const value = useMemo<AmythystStoreContext>(
    () => ({
      config,
      setConfig,
      setLanguage,
      setTheme,
      setSession,
      session,
      consented,
      setConsented,
    }),
    [config, consented, session],
  );

  return <AmythystStoreContext.Provider value={value}>{children}</AmythystStoreContext.Provider>;
};

export function useAmythystStore() {
  const context = useContext(AmythystStoreContext);

  if (context === null) {
    throw new Error('useAmythystStore must be used within an AmythystStoreProvider');
  }

  return context;
}

7 Replies

Avatar
ThriantaOP
Here is my layout.tsx 

import type { Metadata } from 'next';

import '@/styles/globals.css';
import '@radix-ui/themes/styles.css';

import { Providers } from './providers';

import { CookieConsentBanner } from '@/components/cookies/banner';
import { Toaster } from '@/components/ui/sonner';
import { state } from '@/lib/cookies/config';

export const metadata: Metadata = {
  // ...
};

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const store = await state.get();

  return (
    <html lang="en">
      <body className="h-[100%] w-[100%] font-sans">
        <Providers {...store}>
          {children}
          <CookieConsentBanner consented={store.consented} />
        </Providers>

        <Toaster richColors />
      </body>
    </html>
  );
}
Here is my providers.tsx 

'use client';

import { Theme } from '@radix-ui/themes';
import { useAction } from 'next-safe-action/hooks';
import { useEffect } from 'react';

import { initializeStore } from '@/actions/store/initialization';
import { AmythystStoreProvider } from '@/lib/store/client/provider';

export function Providers({ children, config, consented, session }: { children: React.ReactNode } & Amythyst.Store) {
  const { execute } = useAction(initializeStore);

  useEffect(() => {
    execute();
  }, []);

  return (
    <AmythystStoreProvider config={config} consented={consented} session={session}>
      <Theme accentColor="gray" grayColor="sage">
        {children}
      </Theme>
    </AmythystStoreProvider>
  );
}
Avatar
Luke
Dumb question but, are you sure you’re not duplicating {children} anywhere? that’s kind of what this sounds like
Avatar
ThriantaOP
i checked everywhere and it is not that as well, lmao first thing i did
also after further debugging it looks like a cookies issue or something
if i remove the component using custom hooks from the page tree, everything works as expected
as soon as i use a custom hook, it starts rendering everything twice