Keeping Components Pure in React: Definition, Usage, and Importance

React is designed around the idea that components should function like pure functions in programming. This article explains what "keeping components pure" means, how to apply it, when to use it, and what happens if you don't follow this principle, with specific examples in the context of building a news website.

Definition: What is a Pure Component?

In functional programming, a pure function has two key characteristics:

• No side effects: It does not modify any variables, objects, or states outside its scope before being called.
• Predictable: Given the same input, it always returns the same output, regardless of time, system state, or randomness.

React applies this concept to components: a component is considered pure if it:

• Relies only on props and internal state (if any) to produce JSX.
• Does not modify external data (such as global variables or API data directly inside the component).
• Returns the same UI (JSX) when given the same set of props/state, no matter when it is called.

Example of a pure component:

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

Input: name (props).
Output: <h1>Hello, [name]!</h1>.

For name = "John", the result will always be <h1>Hello, John!</h1>, with no random changes.

How to Keep a Component Pure?

To maintain purity in a component, follow these principles:

1. Do Not Modify External Data

Avoid modifying global variables, objects, or arrays passed through props.

❌ Incorrect:

let count = 0
function Counter() {
  count++ // Modifying an external variable
  return <p>Count: {count}</p>
}

✅ Correct: Use internal state instead of a global variable:

function Counter() {
  const [count, setCount] = useState(0)
  return <p onClick={() => setCount(count + 1)}>Count: {count}</p>
}

2. Avoid Side Effects in Render

Side effects such as API calls, localStorage updates, or direct DOM manipulation should not occur inside the render function of a component.

❌ Incorrect:

function NewsList() {
  fetch('https://api.example.com/news') // API call in render
  return <div>News List</div>
}

✅ Correct: Use useEffect to handle side effects:

function NewsList() {
  const [news, setNews] = useState([])
  useEffect(() => {
    fetch('https://api.example.com/news')
      .then((res) => res.json())
      .then((data) => setNews(data))
  }, [])
  return (
    <div>
      {news.map((item) => (
        <p>{item.title}</p>
      ))}
    </div>
  )
}

3. Only Return JSX Based on Props/State

A component should not generate random data or depend on the current time unless it is an explicit input from props/state.

❌ Incorrect:

function Clock() {
  return <p>Time: {new Date().toLocaleTimeString()}</p>
}

✅ Correct: Pass time via props or use state:

function Clock({ time }) {
  return <p>Time: {time}</p>
}

When to Use Pure Components?

Keeping components pure is beneficial in most cases, especially when:

• Rendering UI based on fixed data: For example, a news article component (ArticleCard) should only receive props and return JSX.
• Reusing components: Pure components can be used in multiple places without unexpected behavior.
• Optimizing performance: React relies on purity to determine when to re-render components. Impure components may cause unnecessary renders, slowing down the application.
• Easier testing: Pure components are easy to unit test because their output is predictable based on input.

Example in a news website:

function ArticleCard({ title, summary }) {
  return (
    <div>
      <h2>{title}</h2>
      <p>{summary}</p>
    </div>
  )
}

Used on the homepage, category pages, or anywhere, simply passing different props.

What Happens If You Don't Use Purity?

1. Unpredictable Behavior

Example: A component modifying a global variable:

let viewCount = 0
function ArticleView({ title }) {
  viewCount++ // Side effect
  return (
    <h2>
      {title} (Views: {viewCount})
    </h2>
  )
}

❌ Issue: Every time <ArticleView /> re-renders (due to prop changes or parent re-rendering), viewCount increases, even if the user has not actually viewed the article.

2. Unnecessary Renders, Reducing Performance

Example: Component making API calls in render:

function NewsList() {
  const data = fetch('https://api.example.com/news') // API call in render
  return <div>News</div>
}

❌ Issue: Every time React re-renders NewsList (due to parent changes or state updates), the API is called again, wasting resources and potentially crashing the app.

3. Hard to Debug and Maintain

Example: Component relying on real-time updates without using props/state:

function LiveNews() {
  return <p>Latest news at {new Date().toLocaleTimeString()}</p>
}

❌ Issue: UI changes constantly even if there’s no new data, making it hard to debug or reproduce issues.

✅ Fix: Move side effects outside render and use a pure component:

function LiveNews({ timestamp }) {
  return <p>Latest news at {timestamp}</p>
}
 
function NewsContainer() {
  const [time, setTime] = useState(new Date().toLocaleTimeString())
  useEffect(() => {
    const interval = setInterval(() => setTime(new Date().toLocaleTimeString()), 1000)
    return () => clearInterval(interval)
  }, [])
  return <LiveNews timestamp={time} />
}

✅ LiveNews is pure, only displaying based on timestamp. The time logic is handled in the parent component.

Conclusion

Keeping components pure in React is a crucial principle to ensure applications are easy to understand, maintain, and optimize. By avoiding side effects, relying only on props/state for rendering JSX, and structuring logic properly, you create predictable and efficient components.

In a news website, components like ArticleCard and CategoryHeader should always remain pure, while complex logic (API calls, real-time updates) should be managed in parent components or via useEffect. If you don’t follow purity, you may encounter unpredictable behavior, performance issues, and maintenance difficulties—problems that can be easily avoided with purity!