How to correctly useEffect in _app.tsx | Next.js | Page 1

import { MantineProvider } from "@mantine/core";
import { NotificationsProvider } from "@mantine/notifications";
import { SpotlightProvider } from "@mantine/spotlight";
import { createBrowserSupabaseClient } from "@supabase/auth-helpers-nextjs";
import { SessionContextProvider } from "@supabase/auth-helpers-react";
import { IconSearch } from "@tabler/icons";
import { AppProps } from "next/app";
import Head from "next/head";
import { useEffect, useState } from "react";

import { useDebouncedValue } from "@mantine/hooks";
import { useSpotlight, registerSpotlightActions } from "@mantine/spotlight";
import type { NextPage } from "next";
import type { ReactElement, ReactNode } from "react";

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

export default function App({ Component, pageProps }: AppPropsWithLayout) {
  const [supabase] = useState(() => createBrowserSupabaseClient());
  const [searchValue, setSearchValue] = useState("");
  const [debounced] = useDebouncedValue(searchValue, 1000);
  const getLayout = Component.getLayout ?? ((page) => page);
  const spotlight = useSpotlight();

  useEffect(() => {
    registerSpotlightActions([
      {
        id: "secret-action-1",
        title: "Secret action",
        description: "It was registered with a button click",
        onTrigger: () => console.log("Secret"),
      },
    ]);
    console.log(`Searching for: ${debounced}`);
  }, [debounced, spotlight]);

  return getLayout(
    <>
      <Head>
        <title>Page title</title>
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width"
        />
      </Head>

      <MantineProvider
        withGlobalStyles
        withNormalizeCSS
        theme={{
          /** Put your mantine theme override here */
          colorScheme: "light",
        }}
      >
        <SpotlightProvider
          actions={[]}
          shortcut="mod + k"
          searchIcon={<IconSearch size={18} />}
          searchPlaceholder="Search anything"
          nothingFoundMessage="No result found"
          onQueryChange={(value) => setSearchValue(value)}
        >
          <NotificationsProvider position="top-right" zIndex={2077}>
            <SessionContextProvider
              supabaseClient={supabase}
              initialSession={pageProps.initialSession}
            >
              <Component {...pageProps} />
            </SessionContextProvider>
          </NotificationsProvider>
        </SpotlightProvider>
      </MantineProvider>
    </>
  );
}
#How to correctly useEffect in _app.tsx
