Cursor rule

1---
2description: React general guidelines for Twenty CRM
3alwaysApply: false
4---
5# React Guidelines
6 
7## Core Rules
8- **Functional components only** (no classes)
9- **Named exports only** (no default exports)
10- **Event handlers over useEffect** for state updates
11 
12## Component Structure
13```typescript
14// ✅ Correct
15export const UserProfile = ({ user, onEdit }: UserProfileProps) => {
16  const handleEdit = () => onEdit(user.id);
17  
18  return (
19    <StyledContainer>
20      <h1>{user.name}</h1>
21      <Button onClick={handleEdit}>Edit</Button>
22    </StyledContainer>
23  );
24};
25```
26 
27## Props & Event Handlers
28```typescript
29// ✅ Correct - Destructure props
30const Button = ({ onClick, isDisabled, children }: ButtonProps) => (
31  <button onClick={onClick} disabled={isDisabled}>
32    {children}
33  </button>
34);
35 
36// ✅ Correct - Event handlers over useEffect
37const UserForm = ({ onSubmit }: UserFormProps) => {
38  const handleSubmit = async (data: FormData) => {
39    await onSubmit(data);
40    // Direct event handling, not useEffect
41  };
42 
43  return <Form onSubmit={handleSubmit} />;
44};
45```
46 
47## Component Design
48- **Small, focused components** - Single responsibility
49- **Composition over inheritance** - Combine simple components
50- **Extract complex logic** into custom hooks
51 
52```typescript
53// ✅ Good - Composed from smaller components
54const UserCard = ({ user }: UserCardProps) => (
55  <StyledCard>
56    <UserAvatar user={user} />
57    <UserInfo user={user} />
58    <UserActions user={user} />
59  </StyledCard>
60);
61```
62 
63## Performance
64```typescript
65// ✅ Use memo for expensive components only
66const ExpensiveChart = memo(({ data }: ChartProps) => {
67  // Complex rendering logic
68  return <ComplexChart data={data} />;
69});
70 
71// ✅ Memoize callbacks when needed
72const UserList = ({ users, onUserSelect }: UserListProps) => {
73  const handleUserSelect = useCallback((user: User) => {
74    onUserSelect(user);
75  }, [onUserSelect]);
76 
77  return (
78    <div>
79      {users.map(user => (
80        <UserItem key={user.id} user={user} onSelect={handleUserSelect} />
81      ))}
82    </div>
83  );
84};
85```