0.0.21 • Published 7 years ago
react-purist v0.0.21
React Purist
Creates truly pure components that only update if their old props are not identical to their previous props.
Motivation
One big performance issue in React is dealing with code like this:
<MyComp clickHandler={() => props.handleClick(props.someValue)}>
<SomeComp someObject={{ foo: true }}>
Since () => { return true } !== () => { return true }
and { foo: true } !== { foo: true }
,
code like this causes components to rerender every time, rather than only when their props actually change.
React Purist checks the string value of props to see if they are identical. If they are identical, meaning nothing would need to change in your components anyways, the re-render is prevented.
Class Implementation
import { Purify } from 'react-purist';
@Purify
class MyPureComponent extends Component {
// ...
}
export default MyPureComponent
Stateless Implementation
import { Purify } from 'react-purist';
const MyPureComponent = (props) => {
return (
<p>Purify</p>
);
;}
export default Purify(MyPureComponent);