0Pricing
React Academy · Lesson

Using the Profiler Tab

Record renders, read flame graphs, and identify slow components.

Using the Profiler Tab is a free React Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will use the React DevTools Profiler to record renders, read flame graphs, and identify which components are causing performance bottlenecks.

Opening the Profiler

Click the **Profiler** tab in React DevTools (next to Components). You will see a Record button (circle) and a Reload and Profile button. The profiler only works in development mode.

Recording a Session

Click **Record** (the circle), interact with your app (e.g. click a button, type in an input), then click **Stop** (the square). DevTools captures every render that happened during the session.

Reading the Flame Graph

The flame graph shows one bar per component per commit. Width = time spent rendering. Tall stacks = deep component trees. Hover over a bar to see the component name and exact render duration.

Commits Timeline

At the top of the Profiler you see a row of small bars — one per React commit. Taller bars represent slower commits. Click a bar to jump to that commit's flame graph.

Why Did a Component Render?

Select a component in the flame graph and look at the **Why did this render?** section. It shows whether the component rendered because props changed, state changed, or a parent re-rendered.

Grey vs Coloured Bars

Grey bars mean the component did **not** render in this commit (React reused the previous output). Coloured bars mean it did re-render — darker colours indicate longer render times.

The Ranked Chart View

Switch from Flame Graph to **Ranked** chart (toggle at the top). This lists all rendered components sorted by render time, making it easy to spot the slowest component immediately.

Record & Reload

Click **Reload and Profile** instead of Record to capture page load including initial renders. This helps you find components that are slow on first mount.

Enabling Profiling in Production

Production builds disable the Profiler by default. To profile production, build with `react-dom/profiling` as an alias and `scheduler/tracing-profiling`. Most teams profile in development first.

Quick Check

In the React DevTools Profiler flame graph, what does the width of a bar represent?

Recap

You can now record a profiler session, read flame graphs and ranked charts, check why a component re-rendered, and use the commits timeline to navigate between renders.

Up Next

Next lesson: **Debugging Common React Errors** — you will diagnose missing-key warnings, undefined state bugs, and hydration mismatches using DevTools and the browser console.

Frequently asked questions

Is the “Using the Profiler Tab” lesson free?

Yes — the full text of “Using the Profiler Tab” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Using the Profiler Tab”?

Record renders, read flame graphs, and identify slow components. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Using the Profiler Tab” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Installing & Opening React DevTools
  2. Inspecting Component Trees & Props
  3. Using the Profiler Tab
  4. Debugging Common React Errors
← Back to React Academy