From 1b032ec4c73baca9c55f43e93dadc05c30dec0f1 Mon Sep 17 00:00:00 2001 From: controlol Date: Mon, 1 Nov 2021 20:29:58 +0100 Subject: [PATCH] eventlistener should be created and deleted onMount and willUnmount how to fuck up performance; componentDidUpdate especially terrible during development when the component will be updated even more often --- src/components/fileBrowser.jsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/fileBrowser.jsx b/src/components/fileBrowser.jsx index 7c81c81..e6ecc01 100644 --- a/src/components/fileBrowser.jsx +++ b/src/components/fileBrowser.jsx @@ -223,14 +223,15 @@ class FileBrowser extends Component { componentDidMount = () => { this.setState({ prevPath: this.props.currentPath, files: this.props.files }) + + // add click event listener for closing menu + window.addEventListener('click', this.handleWindowClick) } componentDidUpdate = () => { // 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 }) - // add click event listener for closing menu - window.addEventListener('click', () => this.setState({ renderMenu: false })) // the path changed 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 handleInputChange({target}) { const value = target.type === 'checkbox' ? target.checked : target.value