# Error: You're Importing a component that needs useState

> This error occurs when using the app directory. To resolve, you can use the use client directive to mark components as Client Components.

**URL:** https://sentry.io/answers/client-component-use-state/

---

## The Problem

When using `useState` in a component in Next.js 13, you might encounter the following 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.
```

This error occurs when using the `app` directory. By default, in Next.js 13, components are marked as [Server Components](https://nextjs.org/docs/app/building-your-application/rendering#server-components). This means that the HTML is compiled on the server and sent to the client. Server Components shouldn’t contain any code that uses browser-specific APIs, or hooks that are specifically intended for client-side usage (like `useState`).

## The Solution

To resolve this error, you can use the `use client` directive to mark components as [Client Components](https://nextjs.org/docs/app/building-your-application/rendering/client-components).

The component below would result in the error in question:

```jsx
import { useState } from "react";

export default function MyComponent() {
  const [state, setState] = useState("");
  return <></>;
}
```

By adding the `use client` directive, we resolve the error:

```jsx
"use client";

import { useState } from "react";

export default function MyComponent() {
  const [state, setState] = useState("");

  return <></>;
}
```

If you want to use a component marked as a Client Component in a Server Component (for example, a third-party library), export the component from the `lib` folder at the same level as the `app` directory.

```jsx
// lib/third-party-component.js
"use client";

export * from "@some/library";
```

Then, in your Server Component:

```jsx
import { Component } from "../lib/third-party-component";

export default function Page() {
	 return (
		 // use your component
	 )
}
```

---

*Source: [sentry.io/answers/client-component-use-state/](https://sentry.io/answers/client-component-use-state/)*