react-typescript-auto

React and TypeScript Standards

Critical Rules

• All React components MUST be defined as functional components using const and arrow functions – except for Error Boundaries.
• ALWAYS define explicit types or interfaces for component props and state.
• EVERY element in a list rendered by map() MUST have a unique key prop.
• Hooks (useState, useEffect, useContext, etc.) MUST only be called at the top level of a functional component or custom hook.
• Component filenames MUST use PascalCase (e.g., MyComponent.tsx).
• Prefix custom hooks with "use" (ie. "useUserAuth")
• Prefix event handlers with "handle" (ie. "handleClick")
• Prefix boolean values with verbs (ie. isLoading for loading state, or canSubmit for ability to submit)

React Hooks

• Only call hooks at the top level of React function components or custom hooks (never inside loops, conditions, or nested functions).
• Always start custom hook names with use (e.g., useFetchData).
• Extract reusable logic into custom hooks to avoid duplication.
• Specify all dependencies in hook dependency arrays (e.g., useEffect, useCallback, useMemo).
• Avoid using any in hook return types or parameters; always type your hooks.
• Use useCallback and useMemo to optimize performance only when necessary.
• Document the purpose and expected usage of custom hooks.

Best Practices for useEffect

The useEffect hook is used for side effects in functional components, such as data fetching, subscriptions, or manually changing the DOM. To avoid bugs and performance issues, follow these best practices:

• Always specify all external dependencies in the dependency array. Missing dependencies can cause stale values or unexpected behavior.
• Avoid using any in effect callbacks or dependencies.
• Use cleanup functions to prevent memory leaks, especially for subscriptions or timers.
• Prefer splitting effects by purpose rather than combining unrelated logic in a single effect.
• Avoid side effects that synchronously update state in a way that triggers another render loop.
• For async logic, define the async function inside the effect and call it, rather than making the effect callback itself async.