Pure Functions

1. Return value is always the same for the same input values.
2. Return value is only determined by its input values.

Pure function should not modify any non-local state, and should not have any side effects such as reassigning non-local variables or printing to a screen.

Makes code readable and easy to test.

In React

Pure functional components in React are often called stateless components.

import React from "react";
 
const PureFunctionalComponent = (props) => {
  return <div>Hello, {props.name}!</div>;
};
 
export default memo(PureFunctionalComponent);

With React.memo() we can create memoized pure functional components that bail out of rendering on unnecessary updates using shallow comparison of props.