Suggest an edit

Improve this article

Refine the answer for “What is a "pure function component"?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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>;
  });
  ```
3. **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

| Criterion | Pure component | Impure component |
|---|---|---|
| Depends only on `props` | Yes | No |
| Returns the same JSX for the same props | Yes | No |
| Has no side effects in the body | Yes | No |
| Can be safely optimized with `React.memo` | Yes | Not always |
| Predictable on re-render | Yes | No |

---

> **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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts469 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.