Build clean, modern React components that apply common best practices and avoid common pitfalls like unnecessary state management or useEffect usage. Use when working on React code or using React features.
We're using modern React (19+) and we're following common best practices focused on clarity, correctness, and maintainability.
function components over arrow functions
useEffect()
@tanstack/react-query)useState() or useReducer() usage
useMemo() sparingly and only for proven performance issuesAVOID in-line event handlers in JSX
PREFER:
function handleClick() {
// ...
}
<button onClick={handleClick} />;
Over:
<button
onClick={() => {
/* ... */
}}
/>
Name handlers clearly (handleSubmit, handleChange, handleClose)
Keep handlers small; extract complex logic into helpers
children intentionally and document expected structurememo, useCallback) unless absolutely required