Designing Frontend Patterns
Quick Start
// Compound component pattern with context
const SelectContext = createContext<SelectContextValue | null>(null);
export function Select({ children, value, onValueChange }: SelectProps) {
const [isOpen, setIsOpen] = useState(false);
return (
<SelectContext.Provider value={{ isOpen, setIsOpen, value, onValueChange }}>
<div className="relative">{children}</div>
</SelectContext.Provider>
);
}
Select.Trigger = SelectTrigger;
Select.Content = SelectContent;
Select.Item = SelectItem;
Features
| Feature |
Description |
Guide |
| Compound Components |
Shared state via context for flexible component APIs |
ref/compound-components.md |
| Custom Hooks |
Encapsulate reusable logic (useDebounce, useLocalStorage) |
ref/custom-hooks.md |
| Render Props |
Maximum flexibility for data fetching and rendering |
ref/render-props.md |
| State Machines |
Predictable state transitions for complex flows |
ref/state-machines.md |
| HOCs |
Cross-cutting concerns (auth, error boundaries) |
ref/higher-order-components.md |
| Optimistic UI |
Instant feedback with rollback on failure |
ref/optimistic-updates.md |
Common Patterns
Custom Hook with Cleanup
export function useDebounce<T>(value: T, delay: number): T {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const timer = setTimeout(() => setDebouncedValue(value), delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debouncedValue;
}
export function useLocalStorage<T>(key: string, initialValue: T) {
const [stored, setStored] = useState<T>(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch { return initialValue; }
});
useEffect(() => {
window.localStorage.setItem(key, JSON.stringify(stored));
}, [key, stored]);
return [stored, setStored] as const;
}
State Machine Pattern
type FormState = 'idle' | 'validating' | 'submitting' | 'success' | 'error';
type FormEvent =
| { type: 'SUBMIT'; data: FormData }
| { type: 'SUCCESS'; response: any }
| { type: 'ERROR'; error: string };
function useFormMachine() {
const [state, setState] = useState<FormState>('idle');
const [context, setContext] = useState({ data: null, error: null });
const send = useCallback((event: FormEvent) => {
switch (state) {
case 'idle':
if (event.type === 'SUBMIT') { setState('validating'); }
break;
case 'submitting':
if (event.type === 'SUCCESS') { setState('success'); }
if (event.type === 'ERROR') { setState('error'); setContext(c => ({ ...c, error: event.error })); }
break;
}
}, [state]);
return { state, context, send };
}
Optimistic Update Hook
export function useOptimistic<T>(initialData: T, reducer: (state: T, action: any) => T) {
const [state, setState] = useState({ data: initialData, pending: false, error: null });
const previousRef = useRef(initialData);
const optimisticUpdate = useCallback(async (action: any, asyncOp: () => Promise<T>) => {
previousRef.current = state.data;
setState({ data: reducer(state.data, action), pending: true, error: null });
try {
const result = await asyncOp();
setState({ data: result, pending: false, error: null });
} catch (error) {
setState({ data: previousRef.current, pending: false, error: error as Error });
}
}, [state.data, reducer]);
return { ...state, optimisticUpdate };
}
Best Practices
| Do |
Avoid |
| Use compound components for complex UI with shared state |
Overusing HOCs (prefer hooks) |
| Create custom hooks to encapsulate reusable logic |
Mutating state directly |
| Implement state machines for complex state transitions |
Deeply nested component hierarchies |
| Use TypeScript for type-safe component APIs |
Passing too many props (use context/composition) |
| Use forwardRef for component library primitives |
Creating components with side effects in render |
| Keep components focused with single responsibility |
Prop drilling for deeply nested data |
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
tomevault-io