Skip to main content

What is a "pure function component"?

ReactJunior~2 min read
Suggest an edit

Definition

A pure function component is a function component that:

always returns the same result for the same input (props) has no side effects during render does not depend on external mutable state (like global variables)

In other words, a "pure function" in the functional sense

In programming, a pure function is a function that:

  1. Has no side effects (does not change external variables, the DOM, does not make requests, etc.);
  2. Is deterministic - given the same arguments, it always returns the same result.

React components are, in essence, functions that accept props and return JSX. So they can be pure too.

Example of a pure component

javascript
function Greeting({ name }) { return <h1>Hello, {name}!</h1>; }

This component:

  • depends only on props.name
  • does not change external state
  • does not trigger side effects (requests, timers, etc.)
  • always returns the same JSX for the same props

Therefore, it's a pure function component.

Example of an impure component

javascript
let counter = 0; function Greeting({ name }) { counter++; // side effect console.log('Rendering'); // side effect return <h1>Hello, {name}!</h1>; }

Violated:

  • The function changes the external variable counter
  • It logs to the console on every render → so it's impure.

Why React needs pure components

  1. Predictability If a component is pure, React knows for sure: given the same props, it will return the same result.
  2. Optimization (React.memo) React can "remember" the result of calling a pure component and not re-render it if props did not change.
javascript
const Greeting = React.memo(function Greeting({ name }) { return <h1>Hello, {name}!</h1>; });
  1. Easier debugging The component's behavior is easy to predict and test.

The difference from a regular function

A React component can have state and effects (through hooks), but that does not cancel its purity during render.

What matters is that the render itself (the function body) is pure. Side effects should run inside useEffect, not during JSX computation.

Summary

CriterionPure componentImpure component
Depends only on propsYesNo
Returns the same JSX for the same propsYesNo
Has no side effects in the bodyYesNo
Can be safely optimized with React.memoYesNot always
Predictable on re-renderYesNo

Summary: A "pure function component" is a React component that behaves like a pure function: given the same props, it returns the same result and does not do anything "extra" during render.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit