React Render Performance?

Question

[qwead]

Какими средствами можно отслеживать рендер react-компонентов?
В ручную каждому компоненту писать что-то подобное не удобно

render() {
    console.warn((this.name || this.displayName) + ' was rendered!');
    return (<div>...</div>);
}

Answer 1

[Ваге]

https://github.com/nitin42/react-perf-devtool/ новый для React Fiber

Answer 2

[Антон Спирин]

Можно так:

function withLog(WrappedComponent) {
  return class extends React.Component {
    displayName = WrappedComponent.displayName || WrappedComponent.name;
    
    componentDidMount() {
      console.log(`[${this.displayName}]: componentDidMount`);
    }

    ...

    render() {
      console.log(`[${this.displayName}]: render`);
      return <WrappedComponent {...this.props} />;
    }
  }
}

class MyComp extends React.Component {
  ...
}

const MyCompWithLog = withLog(MyComp);

Демо: https://jsfiddle.net/qg0cvjjs/

Comments

[qwead]

Кстати, да. Хороший способ через hoc, спасибо )

[Антон Спирин]

qwead, тут стоит отметить, что логи вызываются из обертки. Но зато можно даже время рендера с монтированием замерить: https://jsfiddle.net/Lnq26wL5/
Да и время обновления при желании.

[qwead]

Антон Спирин, заметил, что консоль лог отрабатывает только если во WrappedComponenet приходят новые props. Но меня то больше интересует ререндер при изменении стейта наблюдаемого компонента )

[Антон Спирин]

qwead, тогда вам больше подойдет ответ Ваге. Я и не знал, что кто-то уже реализовал perf-devtool для react 16. Думаю perf-devtool, в вашем случае, будет лучшим решением.