Best practices for React Hooks Strict Rules
.cursorrules in your project root# React Hooks Strict Rules ===================================== ## Core Principles --------------- * **Only Call Hooks at the Top Level**: Hooks should only be called at the top level of a React function component, never inside a loop, conditional statement, or nested function. * **Only Call Hooks from React Function Components**: Hooks can only be called from React function components, not from regular JavaScript functions or class components. ## Code Style Guidelines ---------------------- ### Naming * **Use `use` Prefix**: Hook names should start with the `use` prefix (e.g., `useFetchData`). * **CamelCase**: Hook names should use camelCase (e.g., `useUserData` instead of `use_user_data`). ### Typing * **Type Annotations**: Use type annotations for hook return types and parameters. * **Generic Types**: Use generic types for hooks that accept type parameters. ## Best Practices ---------------- ### Hook Usage * **Minimize Hook Usage**: Avoid using too many hooks in a single component. Instead, break down the component into smaller sub-components. * **Memoize Hook Results**: Use `useMemo` or `useCallback` to memoize hook results and prevent unnecessary recalculations. * **Use `useEffect` for Side Effects**: Use `useEffect` for handling side effects, such as API calls or DOM mutations. ### Error Handling * **Handle Errors**: Always handle errors that may occur during hook execution. * **Use `useErrorBoundary`**: Use `useErrorBoundary` to catch and handle errors in a centralized manner. ### Testing * **Test Hooks**: Write unit tests for custom hooks to ensure they behave as expected. * **Use `renderHook`**: Use `renderHook` from `@testing-library/react-hooks` to test hooks in isolation. ## Common Pitfalls to Avoid --------------------------- ### Incorrect Hook Usage * **Don't Call Hooks in Loops**: Avoid calling hooks inside loops, as this can lead to unexpected behavior. * **Don't Call Hooks Conditionally**: Avoid calling hooks conditionally, as this can lead to unexpected behavior. ### Missing Dependencies * **Include All Dependencies**: Make sure to include all dependencies in the `useEffect` dependency array. * **Use `useCallback` for Dependencies**: Use `useCallback` to memoize dependencies and prevent unnecessary recalculations. ### Unhandled Errors * **Handle Errors**: Always handle errors that may occur during hook execution. * **Use `try-catch` Blocks**: Use `try-catch` blocks to catch and handle errors in a centralized manner. ### Unnecessary Re-renders * **Use `useMemo` and `useCallback`**: Use `useMemo` and `useCallback` to memoize values and prevent unnecessary re-renders. * **Optimize Dependencies**: Optimize dependencies to prevent unnecessary re-renders.
Comprehensive Cursor rules for Next.js 14+ with App Router, including routing, layouts, and API patterns.
Cursor rules for TypeScript with strict type checking, advanced patterns, and best practices.
Cursor rules for Tailwind CSS development with responsive design, custom components, and dark mode.
Cursor
coding
AI coding rules customize how Cursor generates and refactors code for your project. Follow these steps to install React Hooks Strict Rules.
.cursor/rules, for Windsurf use .windsurfrulesComprehensive Cursor rules for Next.js 14+ with App Router, including routing, layouts, and API patterns.
Cursor rules for TypeScript with strict type checking, advanced patterns, and best practices.
Cursor rules for Tailwind CSS development with responsive design, custom components, and dark mode.