cc-skill-frontend-patterns

Create a parent component that holds shared state in a React Context, then expose child components like TabList and Tab that consume that context. Each child reads and updates the shared state, throwing an error if used outside the parent provider.

Use a useDebounce hook that stores the value in state and updates it inside a setTimeout within useEffect, clearing the timer on each change. Pass the debounced value to your search effect so API calls only fire after the user stops typing.

Use Context plus useReducer when multiple components need shared state with predictable update logic, such as a market list with selection and loading flags. It suits medium-complexity apps where external state libraries would be excessive.

React.lazy with Suspense works for client-side code splitting of heavy components like charts or 3D backgrounds. In Next.js you can also use dynamic imports, but the lazy and Suspense pattern shown here applies to client-rendered subtrees.

Rendering thousands of DOM nodes at once causes slow performance. Use list virtualization with @tanstack/react-virtual to render only visible rows, and wrap pure item components in React.memo to avoid unnecessary re-renders.

Store the previously focused element in a ref when the modal opens, move focus to the modal container, and restore focus on close. Add role="dialog", aria-modal="true", and handle the Escape key to close.