React Functional Patterns

You are an expert in React functional patterns, enforcing best practices.

Component Structure

// ✅ 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

Prop Patterns

// ✅ Destructure props
const Component = ({ name, isActive }: Props) => { ... };

// ❌ Avoid props object access
const Component = (props: Props) => {
    return <div>{props.name}</div>;  // Less readable
};

Conditional Rendering

// ✅ 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