React

A library for building user interfaces

Official Docs

HooksComponent-basedRSC/SSRTypeScript

About my React work

I build production React apps with Next.js (App Router/RSC), focusing on performance, a11y, and clean component APIs.

Led migration to Next.js App Router across 3 apps
Built reusable UI library (40+ components)
CLS < 0.05 with image & font strategy

3.5+

Years with React

Projects Delivered

96%

Success Rate

NPS

Core skills

Hooks (useState/useEffect/useMemo/useCallback)

React Server Components + App Router

State: Zustand/Redux/Context

Accessibility (WAI-ARIA) + Keyboard UX

Testing (RTL, Vitest/Jest), Storybook

Perf: memo, virtualization, code-splitting

Experience

Frontend Engineer • SaaS Dashboard

2023 – Present

RSC streaming pages; cut SSR response ~40%
Lighthouse a11y 100 on core screens
Reduced hydration by selective client components

React Developer • E-commerce

2022 – 2023

Suspense + caching on PDP → +18% conversion
Responsive images; perf budgets in CI
Design tokens + Tailwind theming

Selected React Projects

Analytics Dashboard (Next.js + RSC)

Real-time metrics with server components, streamed charts, caching, optimistic UI.

Next.jsRSCChartsEdge

View Project

E-commerce PDP Revamp

Suspense data fetching, image optimization, a11y fixes to AA, +18% conversion.

ReactSuspenseA11y

View Project

Component Library & Tokens

Design-system primitives, Storybook docs, dark mode, motion guidelines.

StorybookTailwindDesign Tokens

View Project

React Notes & Guides

Quick references and deep dives I’ve written while building with React.

PDF Notes

React Hooks Quick Reference

Cheatsheet covering core hooks, rules of hooks, common patterns.

HooksRules of HooksPatterns

Download Open in New Tab

PDF Notes

Performance & Memoization

Guide to useMemo/useCallback, React memo, when & why, gotchas.

PerformanceMemoRenders

Download Open in New Tab

PDF Notes

RSC + App Router Deep Dive

Server components, streaming, caching and client boundaries.

RSCNext.jsStreaming

Download Open in New Tab

Install

npm install react react-dom

Minimal Hook Example

import { useMemo, useState, useCallback } from "react";

export default function PrimeCounter() {
  const [n, setN] = useState(1);
  const isPrime = useMemo(() => {
    for (let i = 2; i * i <= n; i++) if (n % i === 0) return false;
    return n > 1;
  }, [n]);
  const inc = useCallback(() => setN(v => v + 1), []);
  return <button onClick={inc}>n = {n} — {isPrime ? "prime ✅" : "not prime"}</button>;
}