Performance of event handler in parent component

Question

I would like to have my components behave differently depending on the width of the browser window.

Instead of repeating the same functions for getting the width of the browser in every component, I am considering wrapping all components in a parent component -

<mainComponent>
  <childComponent1/>
  <childComponent2/>
  <.../>
</mainComponent>

which gets the width of the window and passes it to the child components -

handleResize = (e) => {
  this.setState({windowWidth: window.innerWidth})
};

componentWillMount() {
  this.handleResize()
}

componentDidMount() {
  window.addEventListener('resize', this.handleResize)
}

componentWillUnmount() {
  window.removeEventListener('resize', this.handleResize)
}

render() {
  return <div>
    {React.cloneElement(this.props.children, { windowWidth: this.state.windowWidth })}
  </div>
}

This seems like a bad solution as it may negatively impact performance, especially if the application becomes large.

Am I right to assume that there would be a performance problem with this solution?
During a resize event, the prop value passed to the child changes continuously during the resize action (725, 724, 723, ...). Would there be any performance gains if the width is grouped (s, m, l, xl, ...) so that the props passed to the child does not change as often?
It may become easier to manage state if I use something like Redux or Relay, but would there be any performance gain?
Is there a better way to solve this problem from a performance perspective?

Theo · Accepted Answer · 2016-02-28 09:32:36Z

1

I would say that it all sounds like you are over-thinking the problem.

You could try and look at the Bootstrap grid system as it does all the hard work for you. There is even react-bootstrap written so you should definitely check that out. Go over the grid system as it is quite simple and efficient.

The grid system does exactly what you are trying to do. Wraps a component in Rows and Columns to which you pass different props that respond according to the width of the browser. There is xs sm md and lg.

https://react-bootstrap.github.io/

edited Feb 28, 2016 at 9:32

answered Feb 28, 2016 at 5:53

Theo

1,20310 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andy Over a year ago

Using media queries is indeed a potential solution, but it would be great if I could use javascript as it allows for more flexibility around how that width value is used. As an example, imagine you wanted to render a list and a detail view of each item in that list. If the width is < x pixels, instruct the router to display the details on a separate page. If the width is > x pixels, display the details view in a second column.

Theo Over a year ago

You can use the bootstrap grid system to get close to where you want. After that you can patch it with your own css to perfect it. You can add your own media querios on top, like a Bootstrap override. In my opinion, this is faster and you can spend more time on more important things.

Collectives™ on Stack Overflow

Performance of event handler in parent component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related