michael.reber/rclone-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

eventlistener should be created and deleted onMount and willUnmount

Browse Source 
how to fuck up performance; componentDidUpdate
especially terrible during development when the component will be updated even more often
This commit is contained in:
controlol 2021-11-01 20:29:58 +01:00
parent b50a91b6b5
commit 1b032ec4c7
1 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/fileBrowser.jsx
View File

@ -223,14 +223,15 @@ class FileBrowser extends Component {
componentDidMount = () => { componentDidMount = () => {
this.setState({ prevPath: this.props.currentPath, files: this.props.files }) this.setState({ prevPath: this.props.currentPath, files: this.props.files })
// add click event listener for closing menu
window.addEventListener('click', this.handleWindowClick)
} }
componentDidUpdate = () => { componentDidUpdate = () => {
// if the component was just created set the path // if the component was just created set the path
if (this.state.prevPath === "" && this.props.currentPath !== "") return this.setState({ prevPath: this.props.currentPath, files: this.props.files }) if (this.state.prevPath === "" && this.props.currentPath !== "") return this.setState({ prevPath: this.props.currentPath, files: this.props.files })
// add click event listener for closing menu
window.addEventListener('click', () => this.setState({ renderMenu: false }))
// the path changed // the path changed
if (this.props.currentPath !== this.state.prevPath) { if (this.props.currentPath !== this.state.prevPath) {
@ -248,6 +249,12 @@ class FileBrowser extends Component {
} }
} }
componentWillUnmount = () => {
window.removeEventListener('click', this.handleWindowClick)
}
handleWindowClick = () => this.setState({ renderMenu: false })
// used to filter the files // used to filter the files
handleInputChange({target}) { handleInputChange({target}) {
const value = target.type === 'checkbox' ? target.checked : target.value const value = target.type === 'checkbox' ? target.checked : target.value