0

I have a Layout component which I'd like to use as a wrapper for my pages.

pages/_app.js

import { UIProvider, uiState } from '../components/Context/UIContext'

import { UserProvider, userState } from '../components/Context/UserContext';
import { useUser } from '../lib/hooks'

import Layout from '../components/Layout/index';

function MyApp({ Component, pageProps }) {
  const { user, mutate, loading } = useUser();
   
  return (
    <UserProvider value={userState}>
      <UIProvider value={uiState}>
        <CloudinaryContext cloudName="hillfinders">
          <Head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
          </Head>
          <Layout user={user} mutate={mutate} >
            <NextNprogress
              color="#abf581"
              startPosition={0.3}
              stopDelayMs={200}
              height={4}
              showOnShallow
            />
            <Component {...pageProps} />
          </Layout>
        </CloudinaryContext>
      </UIProvider>
    </UserProvider>
  )
}

export default MyApp

Essentially I am calling the swr useUser() hook and passing the values from it to the Layout component to show/hide elements of the nav of an login/unauthenticated user.

The problem is I noticed a lag in the nav elements appearing in the DOM after one logs in vs. when I import the Layout component as a wrapper to each page and calling the hook in the Layout declaration itself.

So for pages/login, pages/profile, pages/dashboard etc. I am doing this:

import dynamic from "next/dynamic";

const Layout = dynamic(() => import('../components/Layout'));

export default function Dashboard() {
  return (
      <Layout>
        <h1>Dashboard</h1>
      </Layout>
  )
}

And this is the Layout component, where I call the useUser() hook:

export default function Layout({ children }) {
  const { user, mutate } = useUser();

 <>
    <div className="shadow bg-base-200 drawer h-screen">
          <div className="flex-none hidden lg:block">
            <ul className="menu horizontal">
              <li>
                <Link href="/">
                  <a>Home</a>
                </Link>
              </li>
              {user && user.isVerified
                ?
                <>
                  <li>
                    <Link href="/profile">
                      <a>Profile</a>
                    </Link>
                  </li>
                  <li>
                    <Link href="/dashboard">
                      <a>Dashboard</a>
                    </Link>
                  </li>
                  <li>
                    <a
                      role="button"
                      onClick={() => uidispatch({ type: 'showModal' })}

                    >
                      Logout
                    </a>
                  </li>
                  <li className="avatar">
                    <div className="rounded-full w-10 h-10 m-1">
                      <img src="https://i.pravatar.cc/500?img=32" />
                    </div>
                  </li></>
                :
                <>
                  <li>
                    <Link href="/login">
                      <a>Login</a>
                    </Link>
                  </li>
                  <li>
                    <Link href="/registration">
                      <a>Register</a>
                    </Link>
                  </li>
                </>
              }
            </ul>
          </div>
        </div>
     
  </>;
}

Is there a strategy I can use in the swr to make it faster?

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Antonio Pavicevac-Ortiz
  • 7,239
  • 17
  • 68
  • 141
  • _"I noticed a lag in the nav elements appearing in the DOM"_ - Which nav elements? The ones related to the logged-in user? If so, that's expected as you're making the request on the client (through the `useUser` hook). However, I didn't understand why you're also using the `useUser` hook in `_app`? Ideally, you'd want to have the hook as close to where it's needed. – juliomalves Nov 30 '21 at 21:55
  • I’m not using the hook in the component and in _app. – Antonio Pavicevac-Ortiz Nov 30 '21 at 22:09
  • I’m explaining that in one approach I’m using the Layout component once (in _app.js) vs. importing that same layout component and using it as a wrapper for each page. – Antonio Pavicevac-Ortiz Nov 30 '21 at 22:13
  • 1
    As I said, you'll want to have the hook as close to where it's needed. In this case in the `Layout` component. – juliomalves Nov 30 '21 at 22:15
  • 1
    Ah I see what you mean now. Thank you. As i retold what happened the thought occurred to me. I probably will have no problem now… the layout component can be used in _app as a wrapper and eliminate my using it in every file. But the hook execution will be in the declaration in of Layout. – Antonio Pavicevac-Ortiz Nov 30 '21 at 22:20

0 Answers0