Separation of concerns in React - Performance & Optimization

Performance: Separation of concerns

MEDIUM IMPACT

Separation of concerns affects how easily the browser can update and render components by organizing code into focused parts.

Organizing UI logic and styles in React components

React

const useCountStyle = (count) => React.useMemo(() => ({ color: count > 5 ? 'red' : 'blue', fontWeight: 'bold' }), [count]);
function MyComponent() {
  const [count, setCount] = React.useState(0);
  const style = useCountStyle(count);
  return <div style={style} onClick={() => setCount(count + 1)}>Count: {count}</div>;
}

Separates style calculation into a memoized hook, reducing recalculations and re-renders.

📈 Performance GainReduces style recalculation and paint triggers, improving INP.

Organizing UI logic and styles in React components

React

function MyComponent() {
  const [count, setCount] = React.useState(0);
  const style = { color: count > 5 ? 'red' : 'blue', fontWeight: 'bold' };
  return <div style={style} onClick={() => setCount(count + 1)}>Count: {count}</div>;
}

Mixing state logic, styling, and markup inline causes the component to re-render and recalculate styles on every update.

📉 Performance CostTriggers multiple recalculations and paint on each click, increasing INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Mixed logic and styles inline	High - recalculates on every state change	Multiple reflows per update	High paint cost due to style recalculation	[X] Bad
Memoized styles and separated logic	Low - only updates when needed	Single reflow per relevant change	Lower paint cost with stable styles	[OK] Good

Rendering Pipeline

Separation of concerns helps the browser by limiting what changes on updates, so fewer stages like Layout and Paint need to run.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout and Paint stages become expensive if concerns are mixed causing unnecessary updates.

Core Web Vital Affected

INP

Separation of concerns affects how easily the browser can update and render components by organizing code into focused parts.

Optimization Tips

1Keep logic, styles, and markup in separate parts to avoid unnecessary updates.

2Use memoization to prevent recalculating styles on every render.

3Minimize inline styles and complex calculations inside render functions.

Performance Quiz - 3 Questions

How does separating style logic from component markup affect React performance?

A It increases bundle size significantly.

B It reduces unnecessary recalculations and re-renders, improving responsiveness.

C It causes more layout thrashing.

D It delays initial page load.

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for frequent style recalculations and layout thrashing.

What to look for: High number of style recalculations and layout events indicate poor separation; fewer events show better performance.