Frontend Component Design: Keep UI State Predictable

Reusable frontend components work best when each component has a clear responsibility and a predictable contract. A component that owns unrelated fetching, formatting, navigation, and business rules becomes difficult to test.

Identify the state that genuinely needs to be shared. Keep local presentation state close to the component that uses it, and lift state only when multiple components must coordinate. Define inputs and emitted events clearly, and avoid mutating parent-owned data unexpectedly.

Separate API data from display formatting. A component should have a known loading, success, empty, and error state rather than assuming every request returns a populated array. Use stable keys for lists and ensure forms communicate validation errors in an accessible way.

Refactor when duplication makes changes risky, not simply because two blocks look similar. Over-abstraction can create a maze of props and indirection. A good component boundary makes the interface easier to understand and change without forcing every small visual element into its own abstraction.