🎁 The Js-Craft Guide to React is now available with a 30% off discount!

Client components and the “use client” directive in NextJs 13

By default, any component in the /app directory comes as a React server-side component. And this brings some serious performance advantages.

However, there are things that we can't do on the server side. Things like using the window object or managing the client-side state. For situations like these, we have the client components.

You can declare a NextJs component as a client component by using the "use client" directive:

"use client"
export default function MyClientComponent() {
    // code here
}

For example, if you try to use the useState() hook without declaring the component as client-side we will get an error:

import { useState } from "react"
export default function MyClientComponent() {
    const [myVal, setMyVal] = useState('ABC')
    return (<h1>{myVal}</h1>)
}

You will get the below error:

You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
   ,----
 1 | import { useState } from "react"
    :          ^^^^^^^^
    `----
Maybe one of these should be marked as a client entry with "use client":

Or, if we try:

import { useEffect } from "react"

export default function MyClientComponent() {
    useEffect(() => {})
    return (<h1>This component calls useEffect()</h1>)
}

We will get:

You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

Both of these errors will be fixed by adding the "use client" directive:

"use client"
import { useState } from "react"
export default function MyClientComponent() {
    const [myVal, setMyVal] = useState(0)
    return (<h1>{myVal}</h1>)
}

Some notes on the client components in NextJs:

  • the "use client" directive needs to be added as the first line in the file, before any imports
  • we cannot directly use a server component directly into a client component.
  • performance wise we should keep the client components at a minimum. For example, according to the documentation, if we have a search box that uses a state we should extract that search box in a client-side component instead of declaring the whole page as a client component:
    // SearchBar is a Client Component
    import SearchBar from './SearchBar';
    // Logo is a Server Component
    import Logo from './Logo';
    // Layout is a Server Component by default
    export default function Layout({ children }) {
    // code here
    }

When to use the "use client" directive in NextJs 13

You should declare a component as a client-side component in one of the following situations:

  • when we use event listeners (eq: onClick, onChange) in our components
  • when we use hooks like useState(), useReducer(), useEffect(), or other custom hooks that are depending on the state or lifecycle hooks
  • when we use browser-only APIs (eq: window, document) or hooks that use these APIs
  • when you want to use localStorage in your components
  • some very particular cases for data fetching

Importing a Server Component in a Client Component

We cannot directly import a Server Component into a NextJs 13 Client Component. The reason for this is that the server component can contain code for things like reading/writing files or databases on the server side. We can overcome this obstacle by using only the rendered server component in the client one.

As usual, you can checkout the full working code of this example on my Githup repo.

10 Javascript AI projects with Langchain & React

Not sure what to build? Dive in with these Javascript AI projects! Learn how to build LLM powered apps using Langchain.js and React! Connect your apps to LLMs such as OpenAI, create agents, use vector databases, or setup AI context.

10 Javascript AI projects with Langchain & React

Not sure what to build? Dive in with these Javascript AI projects! Learn how to build LLM powered apps using Langchain.js and React! Connect your apps to LLMs such as OpenAI, create agents, use vector databases, or setup AI context.


Leave a Reply

Your email address will not be published. Required fields are marked *

📘 The Guide to React Home Screencasts Best of Newsletter Search X

📘 - 10 Javascript AI projects with React and LangChain

Hi friend! Before you go, just wanted to let you know about the 10 Javascript AI projects ideas with React and LangChain FREE ebook.

One of the best ways to learn is by doing the work. Choose from these 10 project ideas and start working on topics such as:

  • How does LangChain work
  • Connecting to OpenAI LLM
  • Create AI Agents
  • Simple and Sequential Chains
  • Adding Memory (Chat Context)
  • Prompt Templates
  • Using OutputParsers and Tools for Agents
  • Work with Documents and more...

Keep building and see the new capabilities LLM models can add to your React app! Get all projects as an ebook right to your inbox!

X