react

React Hooks enable state and lifecycle features in function components. I use useState to add stateful values that persist between renders. The useEffect hook handles side effects like data fetching, subscriptions, and DOM manipulation. Dependencies a

Portals render components outside their parent DOM hierarchy while maintaining React's component tree for context and events. I use portals for modals, tooltips, and dropdowns that need to escape overflow: hidden containers or z-index stacking context

Breadcrumbs help users understand their location in deep hierarchies and provide quick navigation to parent pages. I build breadcrumbs from React Router's location state and route configuration. For nested routes, I define metadata like breadcrumb lab

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

Compound components create flexible, composable APIs by sharing state between parent and child components via context. Instead of passing dozens of props, child components access shared state through context. A Select component might have Select.Trigg

Prefetching data when users hover over links makes navigation feel instant. React Query's prefetchQuery loads data into cache before users click. When they navigate, the data is already available and renders immediately. I use the onMouseEnter event o

Skeleton screens show content placeholders while data loads, making apps feel faster than spinners. I create skeleton components that match the layout of actual content with subtle pulsing animations. React Query's isLoading flag determines whether to

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

Keeping TypeScript types in sync with Rails API responses is critical but tedious. I generate TypeScript interfaces automatically from Rails serializers or JSON Schema using tools like quicktype or custom scripts. For manual definitions, I create a ty

Accessible modals require focus management, keyboard navigation, and ARIA attributes. I build a reusable Modal component that traps focus inside when open, moves focus to the first interactive element, and returns it to the trigger on close. The Escap

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

SPAs struggle with SEO because content loads via JavaScript after the initial HTML. React Helmet manages document head tags like title, meta descriptions, and Open Graph tags per route. Each page component declares its own metadata, and Helmet ensures