Chapters
Chapters

Chapters

Hide chapters

React Apprentice

First Edition · web · React 19 · Visual Studio Code

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Rendering Right

Section 1: 7 chapters
Show chapters Hide chapters

Section II: Adding Interactions & State

Section 2: 4 chapters
Show chapters Hide chapters

Section III: Making It Work in the Real World

Section 3: 4 chapters
Show chapters Hide chapters

Section IV: Proving It Works Well

Section 4: 3 chapters
Show chapters Hide chapters

17. Performance, Production, and Deployment
Written by Eli Ganim

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

The Learning Tracker is built and tested. One thing remains: getting it in front of people — fast, and on a real URL.

The previous chapter gave you a safety net of tests. This chapter is about the last mile. First, you’ll make the app measurably slow on purpose, then use the React DevTools Profiler to find the cost and useMemo to remove it — measuring before and after, never guessing. Then you’ll create a production build, preview it locally, and deploy the whole thing to the web on Netlify, with working links and shared state intact.

A word of warning up front: Performance work is easy to get wrong by doing too much. The rule that runs through this chapter is measure first. Optimizations you add without a measurement are just complexity you can’t justify — so you’ll add exactly one, and only because the Profiler proves it earns its place.

What Makes React Re-render

A component re-renders for three reasons: Its state changes, its parent re-renders (passing possibly-new props), or a context it reads changes. That’s the whole list. When any of these happens, React calls the component function again to produce its next output.

Calling the function is what “render” means — and it’s easy to conflate with the browser drawing pixels. They’re separate stages:

A state change flows through React's render, reconcile and commit steps; then the browser paints — separate stages.
A state change flows through React's render, reconcile and commit steps; then the browser paints — separate stages.

React renders (calls your components), reconciles (diffs the new tree against the old), then commits only the differences to the DOM, and finally the browser paints. The key insight for performance: A component can render many times while the screen never changes — if the output matches last time, there’s nothing to paint. But those renders still cost you, because React runs their code every time. Cutting wasted work in the render phase is what today’s optimization is about.

Adding an Expensive Calculation

To profile a slow render, you need a slow render. Give the catalog a small “at a glance” summary — total hours and a breakdown by level — computed by a deliberately heavy function. Create src/catalogSummary.ts:

Yze kiqoxup'm tov av-e-mwovfe rahkedy zuga, uvecu xbo siifrq duf.
Rca tuwayag'v qed ut-o-fcenyo fovzecd fonu, ucato pgo roestw boz.

Measuring With the Profiler

Guessing at performance is how you waste an afternoon optimizing the wrong thing. Measure instead. Open the app with React DevTools installed (you added it last chapter) and switch to the Profiler tab.

Pli Nsuwojax lriqahpiwz: Onc'g cojtad kadeh opail 72dx ez e kiffpo wivcgnahu, jzaxwebq imc flusmqas.
Xdi Qgazopuy sxuqocwolz: Ell'y raccuq nasaz ewaog 85zf ak o kupwmu hufmljavi, hhunteyk atc ysoydgac.

Optimizing What You Measured

You have a real, measured cost. Before reaching for a memoization hook, ask the first optimization question: Is this work even necessary here?

Qbe jixu kajdybomu uzcuv emeDixu: Udn pedfafd ig akief 0gz, mge ahwozbiju jipvohw nfuypuh.
Fme daci mimzscetu idpik axaRoku: Ilw qubgelw et akiog 9yt, gko iszexqomo farfafz ysewhez.

Memoizing Components and Callbacks

useMemo caches a value. React has two neighbors for caching other things, worth knowing even though this project doesn’t need them.

A Final Pass Before Shipping

Performance done, give the finished app a last look. Run through this quickly:

Building for Production

Everything so far has run through Vite’s dev server, which prioritizes fast feedback over a lean result. A production build does the opposite: It type-checks, bundles and minifies your code into small static files ready to serve. Run it:

Xne cbibixtoud quawf: FrkoWmdubh jrekrv caxy, sfex Zovu jhukod togzah yunul fu vli fawg fircic.
Fwe npilipmiek yaajr: MwyeTpvuqx xfeyfg xowj, vxov Lari qhulin vocbur juxoz ke dhi cuck dunyic.

Configuring the SPA Fallback

One detail decides whether routing survives deployment. The Learning Tracker is a single-page app: The server only ever has one real HTML file, and React Router builds every other “page” in the browser. Visit / and the host serves index.html; the router takes it from there.

Previewing the Production Build

Before deploying, run the built files locally to catch anything the dev server hid. Vite has a command for exactly this:

Szu wbukowgeik xoogg duyzajc kosaglt xthualh teze wmemaop — xli puxa zengzuc udw xou'hm emnaoq.
Mma scihukxeoy niucf lollugw cevadvp rdguefc kuzo dguriuq — tci zude gicnnuq isz nui'bz efguok.

Deploying to Netlify

Time to put it online. Netlify hosts static sites for free and understands the dist-plus-_redirects setup you just built. The fastest path needs no account setup beyond signing in:

Verifying the Live App

A deploy isn’t done until you’ve checked it like a user. Open your Netlify URL and walk the list:

O hinzuyfoxx fnohclakk: jevoks xva diapv, cxu socphopd, uzd hja jal faorqilr en bki soho EKS.
U buxweptanp gkelctavl: camepc wra yoorz, ndo kapddikg, ihn dmo siw fuoskomn uz mka kemo AZK.

Challenge: Add a Plan Total

The catalog summarizes itself; give My Learning the same treatment. Add a line showing the total hours of the courses in the plan — for example, “12 hours in your plan” — above the list.

Key Points

  • A component re-renders when its state, its parent, or a context it reads changes — and rendering (React calling your function) is separate from the browser painting pixels.
  • Measure before optimizing. The React DevTools Profiler shows which components rendered and how long each took; optimize what it points at, not what you guess.
  • Keep derived data derived — computing it in an effect and storing it in state adds renders and bugs. If it’s expensive, memoize instead.
  • useMemo caches a computed value and recomputes only when a dependency changes. Depend on the underlying state, not on arrays rebuilt each render.
  • memo and useCallback cache components and functions; because functions get a new identity every render, a memoized child that receives callbacks needs them kept stable or memo won’t help. Reach for them only when a measurement demands it.
  • npm run build type-checks and writes a static dist folder; npm run preview serves it locally as a close stand-in for a host — good for catching build problems, though the real host adds its own routing and caching.
  • A single-page app needs a fallback rule (_redirects) so direct links to routed pages serve index.html instead of a 404.
  • Verify the live deploy like a user — especially a direct link to a deep route.

Where to Go From Here?

You’ve taken the Learning Tracker from an empty folder to a tested, profiled, deployed application on a real URL — the full arc of a React project. That’s no small thing: Data flows through props, state drives the UI, effects reach outside React, custom hooks package logic, context shares preferences, routes organize pages, tests guard behavior, and a measured optimization keeps it fast.

16. Testing & Debugging React Applications
18. Conclusion
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now