Why React uses Pure Components?

React enforces using pure components. To ensure this React has ‘StrictMode’ on in the development mode/environment. So that any impure component can be identified.

React Doc says, “React’s rendering process must always be pure. Components should only return their JSX, and not change any objects or variables that existed before rendering—that would make them impure!”

and “React is designed around this concept. React assumes that every component you write is a pure function. This means that React components you write must always return the same JSX given the same inputs”.

A Pure Function is always returns the same result for the same input arguments. It minds it’s own business; does not depend on any outside state or data. Rather, it only depends on its input arguments. And always returns same result for same input. But why is it so important in React? Let’s dive into that:

1. Optimized Rendering :

Pure Components are similar to any other component in React but it skips re-renders for same props and state. If the Input of a component (props, state, context; that can alter what JSX to be returned) are not changed, then there is no need to re-render that component. If You have a long render tree, and a upper level component’s input value (state, prop or context) changes than each one of the rest of the children below need not be re-rendered. As React uses Pure components, only re-render those child components whose value have been changed due to the re-render of the upper-level/parent component. Rest of the components whose inout are not affected, need not be re-rendered, preventing unnecessary re-renders simply by comparing the new props and state with their previous values.

If there is no difference (shallow comparison), React skips the render cycle. This leads to significant performance improvements in complex UIs. Once a component has been mounted, being a pure component, unless it's input has changed, that component will not re-rendered, reducing a huge amount of re-render in every parent component update.

As the main reason behind JS making web applications slower during browser rendering is the painting phase, not the processing or calculation JavaScript itself. So, as the re-renders are strongly controlled taking advantage of the Pure nature of the component, the React application can deliver a very fast and smooth experience to the user.

Furthermore, outputs of pure components can be safely cached, further improving performance.

2. Environment Independence :

Pure functions, by definition, depend only on their inputs and produce the same output every time without side effects. This makes components that are based on pure functions environment-agnostic. For example:

• Server-Side Rendering (SSR): Pure components can be easily rendered on the server because they don’t rely on local or mutable state.

• Static Generation: The same pure function can generate static content efficiently for multiple users.

3. Interruptible Rendering :

Purity ensures that React can pause and resume work safely, knowing the output of the components is predictable. React’s Concurrent Rendering benefits greatly from pure components. When data changes during rendering (e.g., from user input or server updates), React can stop the outdated rendering work without completing it. This ensures smoother and faster rendering without wasting time.

4. Unlocking Advanced React Features :

Pure components are foundational to many of React’s modern features:

• Data Fetching: Features like useSuspence depend on predictable component behavior, allowing React to handle loading and error states seamlessly.

• Improved Debugging: Pure components simplify debugging since their behavior is predictable and doesn’t rely on external state or effects.

• Side effects: Ensure side effects like API calls or subscriptions are handled with event handlers and hooks like useEffect rather than directly inside the render logic.

Pure functions and components are at the core of React’s philosophy. They give significant performance boost, enable advanced features like Server Side Rendering and Concurrent Rendering, and simplify debugging and maintenance. If you want even clearer concept, you may have a look at this good old stackoverflow article, it nicely explains the concept behind pure functions being vital in React.JS.