Use when working with React components, JSX, state management, effects, refs, controlled inputs, rendering performance, and modern React patterns. Covers official React docs and API reference for practical, predictable React development.
This skill applies when tasks involve:
useState, useReducer) and lifting state.useEffect) and dependency correctness.useRef) for DOM access and non-render data.input, select) and handling events.memo, useMemo, useCallback).Use this skill for app and component code that runs in web React environments and for guidance on when React DOM APIs are appropriate.
Prefer composition and clear data flow:
Keep components and hooks pure:
Use state intentionally:
useState for local component state.setX(prev => ...)) when next state depends on previous state.useReducer when state transitions are complex or action-driven.Use effects only for synchronization with external systems:
Reach for refs for non-render state:
useRef.ref.current during render except predictable initialization.Build forms correctly:
value/checked with synchronous onChange.defaultValue/defaultChecked.label, htmlFor, useId) for accessibility.Optimize performance after correctness:
memo, useMemo, and useCallback as optimizations, not semantic requirements.Effect misuse:
useEffect for pure data derivation or event handling logic that belongs in render/event handlers.react-hooks/exhaustive-deps.State shape and updates:
fullName derived from first and last names).Hook rule violations:
Controlled input errors:
value without onChange (read-only field by mistake).e.target.value instead of e.target.checked.null/undefined to controlled value.onChange.Memoization overuse/misuse:
useMemo/useCallback without measured bottlenecks.arePropsEqual that ignores function props or performs expensive deep equality.function TicketForm() {
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const fullName = firstName + ' ' + lastName;
return (
<>
<input value={firstName} onChange={e => setFirstName(e.target.value)} />
<input value={lastName} onChange={e => setLastName(e.target.value)} />
<p>{fullName}</p>
</>
);
}
function ChatRoom({ roomId }) {
useEffect(() => {
const connection = createConnection(roomId);
connection.connect();
return () => connection.disconnect();
}, [roomId]);
return <h1>Room: {roomId}</h1>;
}
function ChatRoom({ roomId }) {
useEffect(() => {
const options = { serverUrl: 'https://localhost:1234', roomId };
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
}, [roomId]);
}
function ProfileForm() {
const [name, setName] = useState('');
const [subscribed, setSubscribed] = useState(false);
return (
<>
<input value={name} onChange={e => setName(e.target.value)} />
<input
type="checkbox"
checked={subscribed}
onChange={e => setSubscribed(e.target.checked)}
/>
</>
);
}
const List = memo(function List({ items, onSelect }) {
return items.map(item => (
<button key={item.id} onClick={() => onSelect(item.id)}>
{item.label}
</button>
));
});
function Page({ items }) {
const handleSelect = useCallback((id) => {
console.log(id);
}, []);
return <List items={items} onSelect={handleSelect} />;
}
Component purity and state updates:
Hooks and effects:
Forms and accessibility:
onChange updates.Performance:
Platform/API correctness:
react-dom) used only in browser/web contexts.render) are not introduced.When producing React guidance or code: