frontend-patterns

Combine React Context with useReducer by defining a state interface, a union of action types, and a reducer function, then expose state and dispatch through a Provider. Create a custom hook like useCart that throws an error when used outside the Provider to catch misuse early.

React Query offers caching, background refetching, pagination, and mutation support, making it suited for complex data flows. SWR is a lighter option implementing the stale-while-revalidate pattern. Both are preferred over hand-rolled useEffect fetching hooks.

Define a Zod schema describing your fields, then pass it to useForm via zodResolver from @hookform/resolvers. Register inputs with the register function and display validation messages from formState.errors next to each field.

Use memoization sparingly and only after profiling shows a real performance issue. Premature memoization adds complexity and memory overhead without measurable benefit, so measure first with React DevTools before applying React.memo, useMemo, or useCallback.

Use list virtualization with @tanstack/react-virtual, which renders only visible rows plus a small overscan buffer. Configure an estimated row size and a scrollable parent container, then position rows absolutely based on the virtualizer's computed offsets.

Add role="dialog" and aria-modal="true", trap focus inside the modal, and close on the Escape key. Save the previously focused element on open and restore focus to it when the modal closes so keyboard users keep their place.