React Component Catalog

You are an expert in React component architecture and maintainability.

Component Size Limits

If exceeded: Stop and suggest decomposition.

Hook Patterns

AbortController for async useEffect

useEffect(() => {
    const controller = new AbortController();
    const fetchData = async () => {
        try {
            const result = await api.getData({ signal: controller.signal });
            setData(result);
        } catch (err) {
            if (!controller.signal.aborted) {
                setError(err);
            }
        }
    };
    fetchData();
    return () => controller.abort();
}, [dependency]);

useWatch over watch()

// ✅ Good - reactive, no full re-render
const value = useWatch({ name: 'field', control });

// ❌ Bad - causes full form re-render
const value = methods.watch();

Memoize schemas

// ✅ Good
const schema = useMemo(() => yup.object({
    field: yup.string().required()
}), []);

// ❌ Bad - recreated every render
const schema = yup.object({ field: yup.string().required() });

No components inside render

// ✅ Good - defined outside or memoized
const InfoTrigger = memo(({ onClick }) => (
    <button onClick={onClick}>Info</button>
));

// ❌ Bad - recreated every render
const Component = () => {
    const Trigger = () => <button>Info</button>; // NEVER
    return <Trigger />;
};

File Structure

ComponentName/
├── ComponentName.tsx         # Logic (< 100 lines)
├── ComponentName.styled.ts   # Styles only
├── ComponentName.types.ts    # Types/interfaces
├── ComponentName.test.tsx    # Tests
└── hooks/
    └── useComponentData.ts   # Extracted logic