javascript – Mixing controlled/uncontrolled behaviour with `getDerivedStateFromProps`


I have a component that displays a bunch of selectable options in a single row. It takes a pageSize prop from the parent component due to responsiveness requirements.

If the pageSize prop ever changes, I need to reset the currentPage (currently active page), which is held in state, to 0.

class OptionsRow extends React.PureComponent {
    state = {
        currentPage: 0
    }
    ...
    static getDerivedStateFromProps(props, state) {
        // Reset page on pageSize change
        return {
            currentPage: props.pageSize === state.prevPageSize
                ? state.currentPage
                : 0,
            prevPageSize: props.pageSize
        }
    }
    ...
}

This code works as intended.

The reason I’m asking for a review is that React in it’s documentation warns against getDerivedStateFromProps so I’m not sure if this is a correct usage. In order to avoid derived state, it recommends making the component completely controlled/uncontrolled, so I should lift the currentPage up to the parent component. But is this really necessary? Is something wrong with my solution except for “verbose code”?

Thank you!