jsx-eslint/eslint-plugin-react

Rule proposal: no layout thrashing

Open

#1889 aperta il 20 lug 2018

Vedi su GitHub
 (1 commento) (1 reazione) (0 assegnatari)JavaScript (2797 fork)batch import
acceptedhelp wantednew rule

Metriche repository

Star
 (8630 star)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

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?

Guida contributor