What are Pure Components and purity in React functions (Pure Functions)?

Short answer

A pure function or component always produces the same output for the same inputs (Props) without causing external side effects (Side Effects) during Render.

Explanation

In React, the Render phase should be free of side effects. A component must not change existing global variables, send HTTP requests, or modify the DOM directly while rendering. Side effects should occur only in Event Handlers or useEffect.

Code example

// Pure component: depends only on the props
function Cup({ guest }: { guest: number }) {
  return <h2>Tea for guest number #{guest}</h2>;
}

Common mistakes

• Directly mutating an array or object passed through props inside the function body (Mutation).

Follow-up questions

• What is StrictMode, and what checks does it perform in development?
• What is the role of React Fiber, and how do Render Phase and Commit Phase differ?

Sources

• React docs — Keeping Components Pure