React Hooks・Next.js パターン

What problem does it solve?

This Skill addresses common pitfalls in React and Next.js development, such as infinite loops caused by dependency array issues and inefficient state management, providing clear patterns for robust Client Component development.

Core Features & Use Cases

• Infinite Loop Prevention: Demonstrates correct useCallback and useEffect usage to avoid infinite re-renders, especially after code linting.
• Server Actions & Optimistic UI: Guides on implementing secure Server Actions and enhancing user experience with useOptimistic.
• State Management: Shows best practices for Zustand store integration, including selective subscriptions and server-to-client data passing.
• Suspense & Loading States: Explains how to leverage Suspense and loading.tsx for seamless asynchronous data fetching.
• Custom Hooks: Provides examples of reusable custom hooks like useFetch and useDebounce.
• Use Case: When refactoring a component and encountering unexpected re-renders after Biome checks, use this Skill to apply the correct useCallback pattern to stabilize your effects.

Quick Start

Apply the useCallback pattern to the fetchData function in your useEffect hook to prevent infinite loops.