The
shouldComponentUpdate()
format of the method is as follows:
shouldComponentUpdate(nextProps, nextState)
shouldComponentUpdate()
method returns a Boolean value that specifies whether React should continue rendering. The default value is
true
thatis,
state
the component is re-rendered each time it changes.
shouldComponentUpdate()
is used to determine whether the output of the React component is affected by the current
state
or
props
the impact of the change, when
props
or
state
when there is a change
shouldComponentUpdate()
will be called before the rendering is executed.
The following example demonstrates The following example demonstrates
shouldComponentUpdate()
method returns
false
the action performed when (cannot be modified by clickingthe button): 3.17.1. Example ¶
classHeaderextendsReact.Component{constructor(props){super(props);this.state={favoritesite:"runoob"};}shouldComponentUpdate(){returnfalse;}changeSite=()=>{this.setState({favoritesite:"google"});}render(){return(<div>
<h1>My favorite website is{this.state.favoritesite}</h1>
<buttontype="button"onClick={this.changeSite}>modify</button>
</div>);}}ReactDOM.render(<Header/>,document.getElementById('root'));
shouldComponentUpdate()
method returns
true
(click the button to modify it): 3.17.2. Example ¶
classHeaderextendsReact.Component{constructor(props){super(props);this.state={favoritesite:"runoob"};}shouldComponentUpdate(){returntrue;}changeSite=()=>{this.setState({favoritesite:"google"});}render(){return(<div>
<h1>My favorite website is{this.state.favoritesite}</h1>
<buttontype="button"onClick={this.changeSite}>modify</button>
</div>);}}ReactDOM.render(<Header/>,document.getElementById('root'));