AP3
All topics

Runtime / profiling before refactoring

React Fundamentals

Understand rendering, ownership, subscriptions, and lifecycle deeply enough to design the runtime—not just the component.

Why this matters

A polished interface can still waste work, hide lifecycle bugs, and fracture ownership. React fundamentals make it possible to reason about what renders, why it renders, what stays subscribed, and which boundary should own a product behavior.

Concepts to learn

  • Rendering and re-rendering
  • State versus derived state
  • Effects, cleanup, and when not to use an effect
  • Custom hooks, context, and subscriptions
  • Component and server/client boundaries
  • Suspense, loading, and error states
  • Memoization, profiling, hydration, and code splitting

Apply It in Casset

Casset is the working environment for this skill—not the curriculum itself.

  • Profile `/connor` and prove the existing ProfileAppSurface and lazy-loader split only warm the selected Casset App; keep the regression test honest.
  • Measure hydration, render count, App launch latency, and background work rather than assuming the expensive surface.
  • Audit effects and subscriptions in the Artist Runtime host, then generalize the remaining transitional playback bridge without creating a second owner.
  • Improve loading, unavailable, and failure choreography in ProfileAppChrome and ShelfSurface.

Suggested project

Runtime foundations

A measured hardening pass across one Profile World: lifecycle, subscriptions, loading states, and code-split boundaries.

Open project notebook

Evidence of completion

These are completion conditions, not claimed achievements. Each stays planned until it links to a real artifact or verification.

  • measurementBefore/after hydration, render-count, and App-launch measurementsplanned
  • testsRegression coverage proving hidden Apps stay parked and only the selected implementation warmsplanned
  • pull requestA narrowly scoped lifecycle or subscription improvementplanned
  • productionMobile verification on the live `/connor` Profile Worldplanned

Open questions

  • Which lifecycle belongs to React, and which belongs to the canonical playback/runtime owner?
  • When is memoization evidence-based rather than ritual?

Related notes

Books, talks, and useful things

  • article
    You Might Not Need an EffectReact
  • tool
    React DevTools Profiler

    Measure first. Preserve the trace with the change.

Reflection journal

The question is not whether a component is elegant. It is whether the ownership model stays legible while the product is moving.
Previous topicTypeScript FundamentalsNext topicProduct Data & Analytics