Understand React render better

#react #frontend #perfomance #devtool

To answer the question. Why did the rendering happen?

Advantages

used directly for one component, therefore it works very fast
for all versions of React from 0.13.0 to 16.0.0
zero dependencies

Install

npm install clear-render --save-dev

You can set globally, to be used in all their projects without having to install each.

Usage

Wrap the component for which you want to watch. And yet!

import clearRender from 'clear-render';

@clearRender
class SimpleComponent extends React.Component {

    ...

}

import clearRender from 'clear-render';
import OriginalSimpleComponent from './SimpleComponent';

const SimpleComponent = clearRender(OriginalSimpleComponent);

...

<SimpleComponent {...props} />

Usage for CodePen and JSBin as UMD module

in html area

<script src="https://unpkg.com/clear-render@latest/build/umd/index.js"></script>

in js area use clearRender from global scope

@clearRender
class SimpleComponent extends React.Component {

    ...

}

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.