skills.rest
klen
klenCOMMUNITY
Explore all skills by this author →
Website𝕏@hornedsGitHub

react-use-client-boundary

Guide proper placement of the "use client" directive in React Server Components.

5|Updated Oct 17, 2011
Search Tags:#react#next.js#server components#use client#client components#react server components
One-click install
npx skills add https://github.com/klen/dotfiles --skill react-use-client-boundary-klen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-use-client-boundary
Source: https://github.com/klen/dotfiles/tree/main/.config/opencode/skills/react-use-client-boundary
Command: npx skills add https://github.com/klen/dotfiles --skill react-use-client-boundary-klen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill clarifies the correct usage of the "use client" directive in React Server Components, preventing common errors and ensuring efficient client-server architecture.

Core Features & Use Cases

  • Understanding Boundaries: Explains that "use client" defines a boundary, not a component label.
  • When to Use: Guides on adding the directive only when a component is imported by a Server Component AND requires client-side features (hooks, event handlers, browser APIs).
  • When NOT to Use: Details scenarios where "use client" is unnecessary or detrimental, such as when already within a client boundary or for pure presentation components.
  • Common Mistakes: Illustrates the error of redundant directives and provides the correct approach with single boundary definition.
  • Decision Flowchart & Examples: Offers visual aids and real-world code examples for clarity.

Quick Start

Use the react-use-client-boundary skill to understand when to apply the "use client" directive in React Server Components.

Frequently Asked Questions about react-use-client-boundary

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
When should I add the 'use client' directive in React Server Components?▼

Add the 'use client' directive only when a component is imported by a Server Component and requires client-side features like hooks, event handlers, or browser APIs. It defines a module boundary rather than acting as a simple component label.

Why am I getting Server Component errors when using hooks or event handlers?▼

Server Component errors occur because hooks and event handlers require client-side execution. You must define a client boundary by adding the 'use client' directive to the file containing the component before importing it into your Server Component architecture.

How do I determine the optimal placement of client boundaries in Next.js?▼

Determine optimal client boundary placement by pushing boundaries as deep into the component tree as possible. Apply 'use client' only to leaf components requiring interactivity, keeping parent Server Components static to preserve server-side rendering benefits.

When should I not use the 'use client' directive in my Next.js application?▼

Do not use the 'use client' directive for pure presentation components or when a component is already located within an existing client boundary. Redundant directives do not switch components back to server execution and can degrade code clarity.

Related Skills

Explore More Software Engineering Skills→
AgentientAgentient
2

rsc-composition-patterns

Decide server versus client boundaries for React Server Components in Next.js 14+ apps.

Official
Intermediate
Chris-MaskeyChris-Maskey

react-use-client-boundary

Diagnose React use client directive placement and client boundary misconfigurations in Next.js.

Community
Intermediate
nathanielcrowell12-specnathanielcrowell12-spec

nextjs

Implement Next.js 15 server components, client components, server actions, and API routes.

Community
Intermediate
mcclowesmcclowes

nextjs-server-navigation

Implement server-side navigation in Next.js Server Components using Link and redirect().

Community
Basic