pure component
The major difference between React.PureComponent and React.Component is PureComponent does a shallow comparison on state change. It means that when comparing scalar values it compares their values, but when comparing objects it compares only references. It helps to improve the performance of the app. You should go for React.PureComponent when you can satisfy any of the below conditions. State/Props should be an immutable object State/Props should not have a hierarchy You should call forceUpdate when data changes If you are using React.PureComponent you should make sure all child components are also pure. is there any performance impact in using React.component that we may consider going for React.PureComponent? Yes, it will increase your app performance (because of shallow comparison) I am guessing shouldComponentUpdate() of Purecomponent performs only shallow comparisons . If this is the case can' t the said method used for deeper comparisons? You guessed it correctly. You could use it if you satisfy any of the conditions I mentioned above. "Furthermore, React.PureComponent's shouldComponentUpdate() skips prop updates for the whole component subtree" - Does this mean that prop changes are ignored? Yes, prop changes will be ignored If it couldn't find difference in shallow comparison.
Source: stackoverflow.com
Pure Component In React
import React from 'react'; import PropTypes from 'prop-types'; class Main extends React.Component { constructor(props) { super(props); this.state = { city: "Alwar", } } componentDidMount(){ setInterval(()=>{ this.setState(()=>{ return { city: "Alwar"} }) },2000) } render() { console.log('Main Component render'); return ( <div> <h2> {this.state.title} </h2> <p>User Name: {this.props.name}</p> <p>User Age: {this.props.age}</p> </div> ); } } Main.propTypes ={ name:PropTypes.string.isRequired, age:PropTypes.number.isRequired } Main.defaultProps = { name: 'Pankaj Kumar Choudhary', age: 24 }; export default Main;
Source: www.codeproject.com
pure components
import React from 'react'; import { withRouter } from 'react-router'; // variable which will point to react-router history let globalHistory = null; // component which we will mount on top of the app class Spy extends React.Component { constructor(props) { super(props) globalHistory = props.history; } componentDidUpdate() { globalHistory = this.props.history; } render(){ return null; } } export const GlobalHistory = withRouter(Spy); // export react-router history export default function getHistory() { return globalHistory; }
Source: stackoverflow.com
pure components
// some-other-file.js import history from './history' history.push('/go-here')
Source: stackoverflow.com
pure components
// then, in redux actions for example import { push } from 'react-router-redux' dispatch(push('/some/path'))
Source: stackoverflow.com
pure components
// history.js import { createBrowserHistory } from 'history' export default createBrowserHistory({ /* pass a configuration object here if needed */ })
Source: stackoverflow.com