Return value of getSnapshotBeforeUpdate() should be used in a React class component
- REACT_UNUSED_SNAPSHOT
- Code Quality
- Medium
- react
This rule applies when the getSnapshotBeforeUpdate() lifecycle method is defined but the return value is not used in a React class component.
The return value of getSnapshotBeforeUpdate() is passed as the third snapshot parameter of componentDidUpdate(). It enables capturing up-to-date values right before committing an update to the DOM.
Therefore, getSnapshotBeforeUpdate() becomes meaningless if the snapshot parameter is not used in componentDidUpdate(), and it could be unintended.
In particular, if getSnapshotBeforeUpdate() is defined without a componentDidUpdate() definition, React outputs a warning message.
Noncompliant Code Example
View with compliant examples side by sideimport React from 'react';
export class Hello extends React.Component {
constructor(props) {
super(props);
this.state = { msg: 'hi' };
this.handleClick = this.handleClick.bind(this);
this.helloRef = React.createRef();
}
getSnapshotBeforeUpdate(prevProps, prevState) { // REACT_UNUSED_SNAPSHOT alarm because 'componentDidUpdate()' definition is missing.
if (prevState.msg !== this.state.msg) {
const hello = this.helloRef.current;
return hello.offsetLeft;
}
return null;
}
handleClick() {
if (this.state.msg === 'hi') {
this.setState({ msg: 'bye' });
} else {
this.setState({ msg: 'hi' });
}
}
render() {
return <div ref={this.helloRef} onClick={this.handleClick} style={{ position: "absolute" }}>{this.state.msg}</div>;
}
}Compliant Code Example
View with noncompliant examples side by sideimport React from 'react';
export class Hello extends React.Component {
constructor(props) {
super(props);
this.state = { msg: 'hi' };
this.handleClick = this.handleClick.bind(this);
this.helloRef = React.createRef();
}
getSnapshotBeforeUpdate(prevProps, prevState) {
if (prevState.msg !== this.state.msg) {
const hello = this.helloRef.current;
return hello.offsetLeft;
}
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (snapshot !== null) {
this.helloRef.current.style.left = (snapshot + 10) + "px";
}
}
handleClick() {
if (this.state.msg === 'hi') {
this.setState({ msg: 'bye' });
} else {
this.setState({ msg: 'hi' });
}
}
render() {
return <div ref={this.helloRef} onClick={this.handleClick} style={{ position: "absolute" }}>{this.state.msg}</div>;
}
}Version
This rule was introduced in DeepScan 1.13.0-beta.
See
React Warning: Hello: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). This component defines getSnapshotBeforeUpdate() only.