Rule proposal: no layout thrashing

[lencioni]

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?

[ljharb]

If there’s a way to do it that minimizes false positives, that sounds like a great idea.