Embedding expressions in JSX in React - Performance & Optimization

Performance: Embedding expressions in JSX

MEDIUM IMPACT

Embedding expressions in JSX affects rendering speed and re-rendering efficiency by controlling how dynamic content updates in the UI.

Displaying dynamic content inside a React component

React

function Greeting({ user }) {
  const fullName = `${user.firstName} ${user.lastName}`;
  return <div>{fullName} is logged in</div>;
}

Precomputing the expression outside JSX reduces repeated calculations during rendering, improving update speed.

📈 Performance Gainreduces recalculations to once per render, improving INP

Displaying dynamic content inside a React component

React

function Greeting({ user }) {
  return <div>{user.firstName + ' ' + user.lastName + ' is logged in'}</div>;
}

Concatenating strings directly inside JSX causes React to re-evaluate the entire expression on every render, which can slow down updates if the expression is complex or repeated many times.

📉 Performance Costtriggers multiple recalculations on each render, increasing CPU usage

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Complex expressions inside JSX	No extra DOM nodes	No direct reflows	Higher CPU usage delaying paint	[X] Bad
Precomputed expressions outside JSX	No extra DOM nodes	No direct reflows	Lower CPU usage, faster paint	[OK] Good

Rendering Pipeline

When JSX expressions are embedded, React evaluates them during the render phase. Complex expressions increase CPU work before React creates the virtual DOM. This affects the reconciliation and commit phases, potentially delaying user interaction readiness.

→Render Phase

→Reconciliation

→Commit Phase

⚠️ BottleneckRender Phase CPU work due to expression evaluation

Core Web Vital Affected

INP

Embedding expressions in JSX affects rendering speed and re-rendering efficiency by controlling how dynamic content updates in the UI.

Optimization Tips

1Avoid complex calculations directly inside JSX expressions.

2Precompute or memoize values used in JSX to reduce CPU load.

3Keep JSX expressions simple to improve interaction responsiveness.

Performance Quiz - 3 Questions

What is a performance downside of embedding complex expressions directly inside JSX?

A They add extra DOM nodes, increasing layout time.

B They block network requests during rendering.

C They cause React to re-evaluate the expression on every render, increasing CPU usage.

D They increase CSS selector complexity.

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for long scripting tasks during render phase.

What to look for: High CPU time in scripting related to React rendering indicates expensive JSX expressions.