Technical note / React & components
A good component has a clear job.
Smaller responsibilities and explicit states make an interface easier to build and improve.
Split by responsibility.
Before writing JSX, sketch the parts of the interface and what each one owns. A component is more useful when its purpose can be explained in one sentence. Visual boundaries and data responsibilities are both helpful clues.
Describe the states first.
A form is not just its empty screenshot. It can be editing, sending, successful or unsuccessful. Naming those states makes it easier to decide which controls are available and which message a person should see.
const [status, setStatus] = useState('idle');
const isSending = status === 'sending';Review the seams.
Check what happens between components: a language change during editing, an error followed by a retry, or a return from a detail page. Clear responsibilities help, but the transitions between them are part of the product too.