I've seen a lot of seemingly simple code lead to layout thrashing and performance problems that could have been statically detected and avoided. It would be nice to have a rule that could flag some of these scenarios.

I think it might make sense to take Paul Irish's list of what causes layout/reflow, and write a rule that flags when these happen synchronously in places like componentDidMount, render, and componentWillReceiveProps, etc.

Example:

class Foo extends React.Component { constructor(props) { super(props); this.state = { windowHeight: window.innerHeight, // <-- this forces layout }; } // ... }

Thoughts?