Rerender input react component on parent props change

Question

I have in an input field that should use some delay option on typing and making a search request. Also I need Re-run the this search component whenever the search text change in props. But I got an issue with and Search field is hanging after pasting value that could not be found and trying to remove it.

export class TableToolbar extends Component {
    state = {
        search: this.props.search,
    }

    static getDerivedStateFromProps(props, state) {
        // Re-run the table whenever the search text change.
        // we need to store prevSearch to detect changes.
        if (props.search !== state.prevSearch) {
            return {
                search: props.search,
                prevSearch: state.search,
            }
        }
        return null
    }

     captureInput = e => {
        if (this.timer) {
            clearTimeout(this.timer)

            delete this.timer
        }

        this.input = e.target.value

        this.setState({search: this.input})

        this.timer = setTimeout(() => {
            this.props.handleSearch(this.input)
            delete this.input
        }, capturedInputTimeout)
    }

    render() {
     <input onChange={this.captureInput} value={this.state.search} />
    }

}

Also I found another solution to debounce this handleSearch request with use-debounce https://github.com/xnimorz/use-debounce

But still not quite understand how to rerender component correctly. I need pass search props from parent in some case when I want to keep search value when move between pages.

Second variant with use-debounce , but still not quite understand how to rerender component when search props updates

 const TableToolbar = ({search, handleSearch}) => {

    const [searchValue, setSearchValue] = useState(search)
    const [debouncedText] = useDebounce(searchValue, 500)

   useEffect(() => {
        handleSearch(debouncedText)
    },
    [debouncedText]
    )

        render() {
         <input onChange={e => setSearchValue(e.target.value)}  />
        }
    }

Answer 1

For the issue with hanging I think your captureInput function runs on every re-render. You should can call it like this to avoid that onChange={() => this.captureInput

For rerendering on change you could look into shouldComponentUpdate where you've got acccess to nextProps which you can compare with the current props and return true if different.