DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

itwillwork
itwillwork

Posted on

Understand React render better

To answer the question. Why did the rendering happen?

example

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 {

    ...

}

or

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 {

    ...

}

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Good news! You can update to dark mode in your DEV settings.