Why advanced patterns solve complex UIs in NextJS - See It in Action

Why advanced patterns solve complex UIs

📖 Scenario: You are building a complex user interface for a dashboard in Next.js. The UI has many parts that need to share data and update efficiently without slowing down the app or causing bugs.To handle this, you will use advanced patterns like context, custom hooks, and memoization to keep your UI fast and easy to maintain.

🎯 Goal: Build a Next.js component structure that uses context to share user data, a custom hook to fetch and update that data, and memoization to avoid unnecessary re-renders.

📋 What You'll Learn

Create a React context called UserContext with default value null

Create a custom hook called useUser that uses useContext(UserContext)

Create a component UserProvider that fetches user data and provides it via UserContext.Provider

Use useMemo to memoize the context value to prevent unnecessary re-renders

Create a child component UserProfile that consumes user data using useUser and displays the user's name

💡 Why This Matters

🌍 Real World

Complex web apps often need to share data like user info or settings across many parts of the UI. Advanced patterns like context and memoization help keep the app fast and organized.

💼 Career

Understanding these patterns is essential for building scalable React and Next.js applications, a common requirement in frontend developer roles.

1

Create UserContext with default null

Create a React context called UserContext with default value null using createContext(null).

NextJS

import { createContext } from 'react'

// Your code here

Need a hint?

Use createContext(null) and assign it to UserContext.

2

Create useUser custom hook

Create a custom hook called useUser that returns the value from useContext(UserContext). Import useContext from 'react'.

NextJS

import { createContext, useContext } from 'react'

export const UserContext = createContext(null)

// Your code here

Need a hint?

Define useUser as a function that returns useContext(UserContext).

3

Create UserProvider component with memoized context value

Create a component called UserProvider that fetches user data from /api/user using useEffect and useState. Use useMemo to memoize the context value object containing the user data. Provide this value via UserContext.Provider wrapping children.

NextJS

import { createContext, useContext, useState, useEffect, useMemo } from 'react'

export const UserContext = createContext(null)

export function useUser() {
  return useContext(UserContext)
}

// Your code here

Need a hint?

Use useState for user, useEffect to fetch data once, and useMemo to memoize the context value.

4

Create UserProfile component consuming user data

Create a component called UserProfile that uses the useUser hook to get the user data. Render a div with the text User: {user.name}. Handle the case when user is null by rendering Loading....

NextJS

import { createContext, useContext, useState, useEffect, useMemo } from 'react'

export const UserContext = createContext(null)

export function useUser() {
  return useContext(UserContext)
}

export function UserProvider({ children }) {
  const [user, setUser] = useState(null)

  useEffect(() => {
    async function fetchUser() {
      const res = await fetch('/api/user')
      const data = await res.json()
      setUser(data)
    }
    fetchUser()
  }, [])

  const value = useMemo(() => ({ user }), [user])

  return {children}
}

// Your code here

Need a hint?

Use useUser to get user, check if user is null, and render accordingly.