0

In my react application, I need to listen resize event of the window, so if window size smaller than X, I will call mobileFunc, if it is larger than X, I will call desktopFunc to render some html with a lot variables. (These variables and arguments get different values for desktopFunc and mobileFunc)

I am listening the event, however, every window's size changes sets my state again and again. I don't want to to do that. I am trying to find a way to set/change my state when necessary and if possible decrease listening resize event (optional). I am open to suggestions with debouncing, shouldComponentUpdate etc. I should find an efficient way.

// mobile is false by default in my state.
componentDidMount() {
    window.addEventListener('resize', this.setDeviceType)
}
componentWillUnmount(){
    window.removeEventListener('resize', this.setDeviceType)
}

setDeviceType() {
    if(window.innerWidth < 768) {
        this.setState({mobile: true})
    } else {
        this.setState({mobile: false})
    }
}

render() {
    return(
        <div>
            {this.state.mobile ? this.mobileFunc() : this.desktopFunc()}
        </div>
    )
}
3
  • 1
    use a debounce
    – user7148391
    Apr 30, 2019 at 20:44
  • How can I do that? Can you give me an example based on my code?
    – blocker
    Apr 30, 2019 at 20:51
  • As an aside, what is the reason for doing this? It is rare that I see a true need for something like this to actually be in JS (although there are definitely use cases).
    – Jared
    May 1, 2019 at 2:58

2 Answers 2

1

I haven't tested, but I think this might work...

// mobile is false by default in my state.
componentDidMount() {
    window.addEventListener('resize', this.setDeviceType)
}
componentWillUnmount(){
    window.removeEventListener('resize', this.setDeviceType)
}

setDeviceType() {
    const { mobile } = this.state;
    if(window.innerWidth < 768) {
        if(!mobile) {
            this.setState({mobile: true})
        }
    } else {
        if(mobile) {
            this.setState({mobile: false})
        }
    }
}

render() {
    const { mobile } = this.state;
    return(
        <div>
            {mobile ? this.mobileFunc() : this.desktopFunc()}
        </div>
    )
}

That if/else block could be cleaned up some, but you really online to do perform a setState if it currently isn't what you'd like.

2
  • 1
    this might have weird side effects setState is async and the resize event fires really fast, it should be done with an instance variable
    – user7148391
    Apr 30, 2019 at 20:57
  • No, I wouldn't use an instance variable (doing so would require a forceUpdate or some additional checks). If anything you would want to debounce the resize event as you had mentioned in your original comment. Alternatively, you could use the previous state to do some additional checks (this.setState((prevState) => { ... });). The other option I could see would be to remove the event listener -> then setState -> use setState's callback to re-enable the event listener. All of this is off the cuff and there are probably pros/cons to each option (or others I'm not thinking of).
    – Jared
    May 1, 2019 at 2:56
1

You can use debounced function. For example https://lodash.com/docs/#debounce

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.