You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
But directly passes domProps prop may cause unnecessary update in PureComponent.
Here is an example
importReact,{Component,PureComponent}from'react';import{render}from'react-dom';classSpreadextendsPureComponent{componentDidUpdate(){console.log('updated');// will show}render(){return(<div{...this.props.domProps}>Test</div>);}}classAppextendsComponent{componentDidMount(){this.forceUpdate();}render(){return(<Spreadflag={true}domProps={{className: 'content'}}/>);}}render(<App/>,document.getElementById('mount'));
Here is my solution by omitting unknown HTML props
importReact,{Component,PureComponent}from'react';import{render}from'react-dom';classSpreadextendsPureComponent{componentDidUpdate(){console.log('updated');// will NOT show}render(){const{
flag,// eslint-disable-line
...other,}=this.props;return(<div{...other}>Test</div>);}}classAppextendsComponent{componentDidMount(){this.forceUpdate();}render(){return(<Spreadflag={true}className="content"/>);}}render(<App/>,document.getElementById('mount'));
Another solution is caching domProps object, but I think both of my solutions are not elegant 😂
The text was updated successfully, but these errors were encountered:
React.PureComponent's shouldComponentUpdate() only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only extend PureComponent when you expect to have simple props and state, or use forceUpdate() when you know deep data structures have changed. Or, consider using immutable objects to facilitate fast comparisons of nested data.
Furthermore, React.PureComponent's shouldComponentUpdate() skips prop updates for the whole component subtree. Make sure all the children components are also "pure".
According to Spreading props on DOM elements, it is recommended to use a
domProps
object to spread props on DOM elements.But directly passes
domProps
prop may cause unnecessary update inPureComponent
.Here is an example
Here is my solution by omitting unknown HTML props
Another solution is caching
domProps
object, but I think both of my solutions are not elegant 😂The text was updated successfully, but these errors were encountered: