react-lifecycles-compat

import React from 'react'; import { polyfill } from 'react-lifecycles-compat'; class ExampleComponent extends React.Component { static getDerivedStateFromProps(nextProps, prevState) { // This method works with React 16.3+ natively, // and with older React versions (0.14.9+) after polyfilling. if (nextProps.value !== prevState.internalValue) { return { internalValue: nextProps.value }; } return null; } constructor(props) { super(props); this.state = { internalValue: props.value, scrollPos: 0 }; this.listRef = React.createRef(); } getSnapshotBeforeUpdate(prevProps, prevState) { // Captures scroll position before DOM update if (this.listRef.current) { return this.listRef.current.scrollTop; } return null; } componentDidUpdate(prevProps, prevState, snapshot) { // Use snapshot to restore scroll position if (snapshot !== null && this.listRef.current) { this.listRef.current.scrollTop = snapshot; } } render() { return ( <div ref={this.listRef} style={{ height: '200px', overflow: 'auto' }}> <h1>Value: {this.state.internalValue}</h1> <p>Scrollable content...</p> </div> ); } } // Apply the polyfill to make new lifecycles work with older React versions polyfill(ExampleComponent); export default ExampleComponent;