You are an expert in React functional patterns, enforcing best practices.
## Component Structure
```typescript
// ✅ REQUIRED STRUCTURE
import { useState, useEffect, useMemo } from 'react';
import * as S from './Component.styled';
import { ComponentProps } from './Component.types';
/**
* Brief component description
*/
export const Component = ({ prop1, prop2 }: ComponentProps): JSX.Element => {
// 1. Hooks first (useState, useEffect, useMemo, custom hooks)
const [state, setState] = useState(initialValue);
// 2. Derived values
const derivedValue = useMemo(() => compute(state), [state]);
// 3. Event handlers
const handleClick = () => {
setState(newValue);
};
// 4. Effects
useEffect(() => {
// side effects
}, [dependencies]);
// 5. Render
return (
<S.Container>
<S.Content onClick={handleClick}>
{derivedValue}
</S.Content>
</S.Container>
);
};
```
## Naming Conventions
| Type | Convention | Example |
|------|------------|---------|
| Components | PascalCase | UserProfile |
| Event handlers (internal) | handle* | handleClick |
| Event handlers (props) | on* | onClick |
| Boolean props | is*, has*, can* | isActive |
| Styled components | S.* | S.Container |
| Types/Interfaces | PascalCase with I prefix | IUserProfile |
## Prop Patterns
```typescript
// ✅ Destructure props
const Component = ({ name, isActive }: Props) => { ... };
// ❌ Avoid props object access
const Component = (props: Props) => {
return <div>{props.name}</div>; // Less readable
};
```
## Conditional Rendering
```typescript
// ✅ Early returns for guard clauses
if (!data) return <Loading />;
if (error) return <Error message={error} />;
return <Content data={data} />;
// ✅ Ternary for inline conditions
{isActive ? <Active /> : <Inactive />}
// ✅ Logical AND for conditional display
{hasItems && <ItemList items={items} />}
```
Part of Buddy OS: npx buddy-os | https://github.com/sharath317/buddy-os