Deep Dive into Advanced React Concepts

Fiber is React's reimplementation of the core reconciler (since React 16).

Main goals:

• Incremental rendering (ability to pause/resume/prioritize work)
• Better support for animations & gestures
• Concurrent mode foundation
• Improved error boundaries & scheduling

Work units are called "fibers" — linked list instead of stack recursion.

React 18 uses a lane-based priority system instead of simple numbers.

Higher priority lanes (e.g. user input) can interrupt lower priority work (e.g. data fetching, transitions).

Enables features like:

• startTransition / useTransition
• useDeferredValue
• Automatic batching in all cases

In Fiber (React 16+):

1. Render phase (may be paused/resumed) — reconciliation, building fiber tree, side-effect list
2. Commit phase (synchronous, non-interruptible) — apply DOM changes, run layout effects
3. Passive effects (after paint) — run useEffect callbacks

Legacy (pre-16): render → commit (all sync, blocking)

Tearing = inconsistent state view during concurrent render (one part sees old state, another sees new).

React 18 prevents it via:

• useSyncExternalStore (for external stores)
• Consistent snapshot reads during render
• Lane-based priority & transitions

React 18 batches almost everything by default → fewer renders.

• Render only on server → no client JS bundle for them
• Zero hydration cost
• Direct access to backend resources (DB, filesystem, secrets)
• Cannot use state, effects, browser APIs, event handlers
• Can be streamed to client
• Marked with "use server" (Next.js) or implicitly server-rendered

• Server Components are default
• Client Components marked with "use client"
• Server → Client: pass props (serializable only)
• Client → Server: cannot import server components directly
• Server Components can import client components (but client boundary is created)

Streaming = send HTML chunks as soon as they are ready instead of waiting for whole page.

<Suspense> boundaries define fallbacks and streaming chunks:

• Non-Suspense content streams first
• Suspense-wrapped parts stream when ready (or show fallback)

Big win for TTFB and perceived performance.

Automatic memoization compiler (opt-in, experimental in 2025–2026).

Does what developers manually do with:

• React.memo
• useMemo
• useCallback

Analyzes component code → memoizes props, state dependencies, and computations where safe.

Goal: remove most manual memoization boilerplate.

Strict mode double-invoking effects + render → exposes previously hidden side effects.

Also:

• useEffect running more often due to new batching
• Stale closures in concurrent mode
• Missing cleanup functions becoming visible

Use react-window or react-virtualized (or TanStack Virtual).

Key techniques:

• Only render visible rows + small overscan buffer
• Absolute positioning
• Fixed or variable size items
• Handle scroll / resize efficiently

Can reduce DOM nodes from 10,000 to ~30–50.

useMutation({
  mutationFn: updateTodo,
  onMutate: async (newTodo) => {
    await queryClient.cancelQueries({ queryKey: ['todos'] });
    const previous = queryClient.getQueryData(['todos']);
    queryClient.setQueryData(['todos'], old => [...old, newTodo]);
    return { previous };
  },
  onError: (err, newTodo, context) => {
    queryClient.setQueryData(['todos'], context.previous);
  },
  onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] })
});

1. React DevTools Profiler tab → record session → look for wasted renders
2. Why Did You Render library (@welldone-software/why-did-you-render)
3. console.log inside component body
4. use React.memo + why-did-you-render on props
5. Check props equality (new objects/functions every render?)

Hydration mismatch = server-rendered HTML differs from what client renders.

Common causes:

• Browser-specific code (window, document) in SSR
• Random values / Math.random() / Date.now()
• Different timezone / locale formatting
• Third-party scripts modifying DOM before hydration
• Class components with unsafe lifecycles

const About = React.lazy(() => import('./About'));

function App() {
  return (
    }>
      
        } />
      
    
  );
}

Creates separate chunk, loads on demand.

Use error.js file in Next.js App Router (convention-based).

For manual handling:

• Throw error in RSC → caught by nearest error boundary
• notFound() / redirect() for expected cases

Automatically wraps page / segment in Suspense with the loading UI.

Shows instantly while server component / data fetches are pending.

Improves perceived performance (shows skeleton / spinner early).

function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((val: T) => T)) => void] {
  // implementation
}

Or more advanced with generics + type inference from default value.

Components that share implicit state via context (Tabs, Accordion, Select, Dialog).

Modern style (2025):

<Tabs>
  <Tabs.List>...</Tabs.List>
  <Tabs.Content value="1">...</Tabs.Content>
</Tabs>

Implemented with custom context + provider.

Use jest.useFakeTimers() + act:

jest.useFakeTimers();
render(<MyComponent />);
act(() => jest.advanceTimersByTime(1000));
expect(screen.getByText('done')).toBeInTheDocument();

startTransition = low-level API to wrap any state update as transition.

useTransition = hook version that also gives isPending flag.

Use startTransition outside components (e.g. libraries).

• Component composition (children, render props)
• Pass components as props (slot pattern)
• CloneElement + extra props
• Wrapper components that inject behavior

Context still most common for truly global data.

Pages Router (legacy):

• getStaticProps → static at build time
• getServerSideProps → SSR per request
• getStaticPaths → dynamic static paths

App Router (modern):

• Server Components + async/await in component
• fetch with { cache: 'no-store' } = SSR
• fetch with { next: { revalidate: 3600 } } = ISR
• Static by default

const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
  queryKey: ['posts'],
  queryFn: ({ pageParam = 1 }) => fetchPosts(pageParam),
  getNextPageParam: (lastPage) => lastPage.nextCursor,
});

Use IntersectionObserver on last item to call fetchNextPage.

• Automatic caching
• Background refetching & stale-while-revalidate
• Deduping requests
• Pagination & infinite queries built-in
• Optimistic updates & rollback
• Devtools & error handling
• Less race conditions

• Debounce / throttle input
• Use abort controller + cleanup in useEffect
• TanStack Query handles it automatically (latest request wins)
• Track request ID and ignore old responses

• Progressive enhancement (works without JS)
• Direct server functions (no endpoint needed)
• Automatic pending state & optimistic UI with useActionState
• Simpler revalidation (revalidatePath, revalidateTag)
• FormData support built-in

• Use built-in <Image> component
• Automatic WebP / AVIF conversion
• Lazy loading & placeholders (blur, empty)
• Sizes attribute for responsive
• Remote images with loader config
• Image Optimization API caching

Common patterns 2025–2026:

• NextAuth.js / Auth.js
• Server-side session check in middleware
• Protect routes with middleware or layout
• RSC: read cookies / headers directly
• Client: useSession hook
• Server Actions: verify session before mutation

Hybrid rendering: static shell + dynamic holes filled at request time.

Static parts cached, dynamic parts (Suspense boundaries) rendered per request.

Combines best of SSG + SSR + streaming.

Available in Next.js 14+ (stable in 15).

SPA (Create React App / Vite):

• Prerendering tools (prerender.io, react-snap)
• Server-side prerendering services
• Bad for crawlers without JS

Next.js:

• Static export / SSG
• SSR / ISR
• Metadata API / generateMetadata
• Open Graph / Twitter cards automatic

Replaces getStaticPaths — defines dynamic routes to prerender at build time.

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map(post => ({ slug: post.slug }));
}

• next-themes or custom context + localStorage + useEffect
• CSS variables + class on html / body
• prefers-color-scheme media query
• Server component reads cookie → passes initial theme
• Client toggle updates cookie + class

• Browser APIs (window, document) during SSR
• Date / random values differing server vs client
• Third-party scripts modifying DOM early
• useEffect setting state on mount
• Different component tree structure

• React DevTools Profiler (development only)
• Chrome Performance tab → flamegraph
• Why Did You Render in production (with tracking)
• Web Vitals (CLS, LCP, FID/INP)
• Next.js next build + next start + analytics

Static page regenerated in background after time interval while serving stale version.

App Router: fetch(..., { next: { revalidate: 3600 } })

Pages Router: getStaticProps with revalidate: 60

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: { images: post.ogImage }
  };
}

import { NextResponse } from 'next/server';

export function middleware(request) {
  const token = request.cookies.get('token')?.value;
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

export const config = { matcher: ['/dashboard/:path*'] };

• Server Actions + useActionState (React 19)
• React Hook Form + Zod + Server Actions
• Form + action attribute pointing to Server Action
• Optimistic updates with useOptimistic

• Reserve space for images / ads (width, height, aspect-ratio)
• Use Next.js <Image> with fill / sizes
• Avoid injecting content above existing content
• Font loading: use font-display: swap or self-host
• Monitor with Lighthouse / Web Vitals

• Full type-safety (search params, route params)
• Client-side only routing (SPA feel)
• Built-in data loading & pending states
• Less server dependency
• Great for complex apps with nested layouts

Next.js still wins for SEO + SSR.

• Middleware checks session + role → redirect if unauthorized
• Server Components: check role before rendering sensitive content
• Client: hide UI elements based on role (but never trust client)
• Server Actions: verify role before mutation

1. Avoid new object/function references in render (useMemo, useCallback wisely)
2. Use React.memo + stable props for list items & pure components
3. Virtualize long lists (react-window / TanStack Virtual)
4. Leverage Server Components + streaming + Suspense
5. Profile first — don't premature optimize; React Compiler reduces manual work