Cursor rule

1---
2description: React-specific TypeScript patterns and best practices
3globs: *.tsx
4alwaysApply: false
5---
6 
7# React + TypeScript Coding Standards
8 
9This rule builds on the core TypeScript standards and provides additional guidance for React development.
10 
11## Hooks
12 
13- Group hooks logically. Separate each `useState`, `useEffect`, `useMemo`, `useCallback`, etc., with a blank line.
14- Avoid mixing multiple concerns inside a single hook.
15- Always clean up effects that use subscriptions, timers, or external resources:
16```tsx
17  useEffect(() => {
18    const interval = setInterval(() => {
19      // logic
20    }, 1000);
21 
22    return () => clearInterval(interval);
23  }, []);
24```
25 
26## Controlled Components
27 
28- Always use controlled inputs where possible.
29- Bind input `value` and `onChange` explicitly:
30```tsx
31  const [email, setEmail] = useState("");
32 
33  return <input value={email} onChange={(e) => setEmail(e.target.value)} />;
34```
35 
36## Prop Drilling & Component Design
37 
38- Avoid excessive prop drilling — prefer composition or context where appropriate.
39- Use wrapper components and shared state management (like Redux Toolkit) when scaling.
40 
41## Component Structure
42 
43- Keep components small and focused on a single responsibility.
44- Use internal render helpers when returning multiple JSX sections:
45```tsx
46  const renderUserInfo = () => {
47    return <div>{user.name}</div>;
48  };
49 
50  return <div>{renderUserInfo()}</div>;
51```
52 
53## Naming Conventions
54 
55- Component names should be PascalCase.
56- File and folder names should match the component name.
57 
58## Props
59 
60- Always define prop types using an interface named `iComponentNameProps`.
61- Default prop values should be handled via destructuring or `defaultProps` (if using class components).
62- Optional props should be marked with `?`.
63 
64## Type Safety
65 
66- Strongly type event handlers and state:
67```tsx
68  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
69    e.preventDefault();
70  };
71```
72 
73## Readability
74 
75- Avoid ternary expressions inside JSX if it makes the code unreadable — extract logic to a variable.
76- Break complex JSX trees into smaller, reusable components.
77 
78## State Naming
79 
80- Use descriptive state names that reflect their purpose.
81```tsx
82  const [isModalVisible, setIsModalVisible] = useState(false);
83```
84 
85## Example
86 
87```tsx
88interface iLoginFormProps {
89  onSubmit: (email: string, password: string) => void;
90}
91 
92const LoginForm: FC<iLoginFormProps> = ({ onSubmit }) => {
93  const [email, setEmail] = useState("");
94  const [password, setPassword] = useState("");
95 
96  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
97    e.preventDefault();
98    onSubmit(email, password);
99  };
100 
101  return (
102    <form onSubmit={handleFormSubmit}>
103      <input
104        value={email}
105        onChange={(e) => setEmail(e.target.value)}
106        placeholder="Email"
107      />
108      <input
109        value={password}
110        onChange={(e) => setPassword(e.target.value)}
111        type="password"
112        placeholder="Password"
113      />
114      <button type="submit">Login</button>
115    </form>
116  );
117};
118```
119