Menu
React patterns for callbacks, event handlers, and module-level constants. Use when writing React components, implementing event handlers, or defining constants.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Standard Schema socka contracts (defineSocka), v1 wire envelopes, SockaSession/SockaWebSocketClient, React useSockaSession and SockaSessionProvider, SockaError.
SockaDoSession and SockaWebSocketDO on Cloudflare Durable Objects—contract, handlers, wireFormat, SockaError; extends websocket-do BaseSession.
Standard Schema v1 for socka contracts and wire validation—Zod, Valibot, or any compatible library; no Zod-only public surface.
Enforce strict TypeScript typing without escape hatches. Never use `any`, `as` casts to bypass the compiler, or similar workarounds—find the proper typed solution instead.
React Router v7 routing patterns and environment variable configuration. Use when adding routes, configuring routing, or setting up environment variables.
Read when implementing multi-phase work after a plan exists. Mandatory—mkdir+touch then Write/StrReplace (no heredocs), update the temp punch list at every phase boundary, one item at a time, per-phase tests. Complements punch-list-planning for authors.
| name | react-patterns |
| description | React patterns for callbacks, event handlers, and module-level constants. Use when writing React components, implementing event handlers, or defining constants. |
Use useCallback for callbacks and event handlers to ensure stable references and optimal performance.
const handleClick = useCallback(() => {
// Handler logic
}, [dependencies]);
const handleChange = useCallback((value: string) => {
setState(value);
}, [setState]);
Use useEffectEvent for callbacks inside effects when you need to reference the latest props/state without adding them to dependencies:
import { useEffectEvent } from "react";
function Component({ onUpdate }) {
const [value, setValue] = useState("");
const handleUpdate = useEffectEvent(() => {
onUpdate(value);
});
useEffect(() => {
const interval = setInterval(() => {
handleUpdate();
}, 1000);
return () => clearInterval(interval);
}, []);
}
Define true constants at module level, not inside components.
// ✅ Good - Module level constant
const DEFAULT_CONFIG = {
timeout: 5000,
retries: 3,
};
export default function MyComponent() {
const [config, setConfig] = useState(DEFAULT_CONFIG);
// ...
}
// ❌ Bad - Constant recreated on every render
export default function MyComponent() {
const defaultConfig = {
timeout: 5000,
retries: 3,
};
const [config, setConfig] = useState(defaultConfig);
// ...
}
Benefits: fewer allocations, clearer intent, reuse across components.
useMemo instead)