Is it bad to put 'use client' on every file?

Yes, it is considered a bad practice. It creates redundant boundaries and can lead to confusion. This skill helps you place the directive only at the highest necessary point in the component tree.

How do I fix 'useState only works in Client Components'?

This error occurs when hooks are used in a server component. This skill provides a flowchart to help you decide whether to add 'use client' to that component or move the state logic to a dedicated client boundary.

Does this skill work with Next.js?

Absolutely. It is specifically designed for the Next.js App Router and the React Server Components specification.

Can I use server-side data fetching inside a client boundary?

No, async/await for data fetching is currently a Server Component feature. This skill guides you on how to fetch data on the server and pass it as props to your client boundaries.

What is the 'use client' fence model?

The fence model treats 'use client' as a boundary entry point. Once you declare a component as a client boundary, all of its children and imports are automatically treated as client components, making additional directives unnecessary.

React Client Boundary Guide

Name: React Client Boundary Guide
Author: Microck

byMicrock

•

学習とドキュメンテーション

Optimizes React Server Component architecture by guiding the strategic placement of the "use client" directive.

This skill provides expert guidance on navigating the React Server Components (RSC) architecture, specifically focusing on the "use client" directive. It establishes the "Fence" mental model to help developers understand that "use client" marks a boundary rather than a per-component label, preventing redundant directives and bloat. By following its decision flowcharts and best practices, developers can efficiently troubleshoot common RSC errors—such as hook usage in server components or invalid event handler passing—while ensuring their Next.js and React applications maintain optimal performance and clear architectural boundaries.

主な機能

01Decision flowcharts for determining client vs. server component needs

02Troubleshooting for RSC-specific errors like hook and event handler violations

03Best practices for shared components and prop-drilling across boundaries

04Identification and removal of redundant "use client" statements

052 GitHub stars

06Boundary-based mental model for directive placement

ユースケース

01Architecting high-performance interactive pages with minimized client-side bundles

02Migrating legacy React components to the Next.js App Router architecture

03Resolving "useState only works in Client Components" errors during development

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck flpbalada-react-use-client-boundary

For use in Claude.ai and ChatGPT

Download Skill