react

Frontend errors are inevitable, so I’d rather control the blast radius. I wrap unstable sections with an ErrorBoundary that shows a friendly fallback and captures context for reporting. I also avoid spamming the error tracker by including a fingerprin

Spinners hide layout shifts and make an app feel slow even when it isn’t. Skeletons preserve layout and give users a sense of progress without jumping content around. I keep skeleton components simple and match the shape of the final UI. One practical

Search boxes are a classic place to accidentally fire a request on every keystroke. I debounce the value that triggers the query (not the input rendering) so typing stays responsive, and I cancel/ignore stale requests so results don’t arrive out of or

Scroll listeners are easy to get wrong and they can cause performance issues on long lists. IntersectionObserver lets the browser do the hard work: I put a sentinel div at the bottom of the list and trigger fetchNextPage when it becomes visible. I als

Brittle test suites often come from mocking fetch at every call site. MSW lets me mock at the network layer: components make real HTTP calls, but the test environment intercepts them and returns deterministic responses. That keeps tests closer to real

Modals are accessibility traps—literally. Without focus management, keyboard users can tab into the page behind the modal and get lost. I trap focus within the dialog while it’s open, restore focus to the trigger on close, and support Escape to dismis

Forms are where type safety and UX collide. react-hook-form keeps re-renders low, and Zod gives me a single schema I can share between frontend and backend if I want. I wire zodResolver so field-level errors show up automatically, and I keep a stable

I like API routes that read like tiny, well-scoped controllers. In Next.js Route Handlers, I keep auth and input parsing right at the top, then return explicit status codes instead of throwing for expected failures. I also avoid leaking server-only de

Interactive UI should feel instant even when the network isn’t. With optimistic updates, I update the cache immediately and roll back if the server rejects the mutation. The trick is to keep optimistic state small and obvious: update a count and a boo

I don’t want components depending on each other just to show a toast. A tiny event bus (or context) lets any part of the app emit a toast without wiring props through five layers. The important part is keeping the API small—something like show(message