Marina Sokolova

A controlled component stores the field value in React state and re-renders on every keystroke. An uncontrolled component keeps the value in the DOM, and we read it through a ref. I usually use controlled components because validation is easier. But on one project, a form had more than thirty fields and the whole form re-rendered on each keystroke. We switched to uncontrolled fields and read the values only on submission. It became noticeably faster.

I check what is slow: the initial load or interactions. For loading, I open the network tab, check the bundle size and what loads synchronously. For interactions, I use the React DevTools profiler and look for components re-rendering for no reason. I measure first, then fix it; otherwise you can spend a week optimising something that bothers nobody.

I try to use semantic tags: a button should be a button, not a div. I add ARIA attributes for complex components such as dropdowns. Honestly, I have not gone through the entire interface using only a keyboard; testing usually catches those issues.

There was a design with infinite scrolling in an orders table, but users needed to find orders by number. I suggested pagination and filters instead, and showed how long finding an order took in both versions. The designer agreed after seeing the numbers. It is better to discuss the user's task than personal taste.