Patterns: React Concept: Purity

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.


In JavaScript, when a function does not mutate objects but just returns a new object, it’s called a pure function.

A function, or a method, in order to be called pure should not cause side effects and should return the same output when called multiple times with the same input.

A pure function takes an input and returns an output without changing the input nor anything else.

Its output is only determined by the arguments. You could call this function 1M times, and given the same set of arguments, the output will always be the same.

React applies this concept to components. A React component is a pure component when its output is only dependent on its props.

All function components are pure components:

const Button = props => {
  return <button>{props.message}</button>
}

Class components can be pure if their output only depends on the props:

class Button extends React.Component {
  render() {
    return <button>{this.props.message}</button>
  }
}

Lessons in this unit:

0: Introduction
1: React Concept: Composition
2: React Higher Order Components
3: React: Presentational vs Container Components
4: React Render Props
5: React Portals
6: Code Splitting in React
7: Server Side Rendering with React
8: ▶︎ React Concept: Purity
9: React StrictMode
10: Lifecycle events
11: React, how to dynamically choose a component to render