In computer science, especially in functional programming, there are functions called 'pure functions'. These functions have two properties:

- They don't modify variables that existed before they were called.
- They always return the same output from the same inputs.

React follows the same pattern, in that with the same props, we need to return the same JSX.

University of Michigan - Ann Arbor

Some JavaScript functions are pure functions. A pure function does only one thing and returns the same output for the same input. By building only pure functions, you can avoid confusing bugs and unpredictable behavior as your codebase grows.

Keeping Components Pure on React Js

https://react.dev/learn/keeping-components-pure

Keeping Components Pure in Reat Js

Purity: Components as formulas in React Js

React rendering process must always be pure. Components should return the same JSX and not modify variables that exist before rendering.

Example of impure component:
```js
let count = 0;
export function Counter() {
  count += 1; // Bad: Can't a preexisting variable!
  return <h2>Counter: {count}</h2>;
}
```

Example of pure component:
```js
export function Counter({count}) {
  // This component will return same JSX
  return <h2>Counter: {count}</h2>;
}
```

Side Effects: (un)intended consequences in React JS

- Components can run in different environments, for example, on a server, as long as they return the same result from the same inputs.
- You can improve performance by skipping rendering; this is safe since the component always returns the same results from the same inputs.
- If some data changes in the middle of rendering, React can stop the calculation and recalculate again. Purity makes it safe to stop the calculation at any time.

Learn Before

Related