non-performant-detector v1.1.3

Installtion

npm i non-performant-detector

Use

    Import  {Insights} from 'non-performnat-detector';

Wrap your component with Insights component like this at the time of invoking it:
    <Insights insightID="UniqueId">
        <YourComponent />
    <Insights>
Give the unique insightID every time you are wrapping it with Insight component

conditions

1. JSX of children of Insights component must have one and only one parent element

    The correct way of writing the code of YourComponent

        <div>
            {…more codes…}
        </div>

    The incorrecy way of writing the code of YourComponent

        <div> ….</div>
        <div> ….</div>

2. You should not be storing anything in session storage with insightIDs as keys that you are providing while using Insight component.

What this package does

1. The component Insights checks if its children is performant or non-performant.
2. This checking is done on the basis of render duration of its children.
3. If the render duration of children is greater than certain threshold Then it will be declaired non-performant.
4. Initially this threshold is taken to be 1ms.
5. This threshold is made configurable, user can change this threshold at any point of time.
6. If the component is non-performant then a red border is added around the component and a badge is shown in the top right corner of the component.
7. Clicking on the badge gives information about the render and option to configure threshold. Further it also shows suggestions to improve the render duration of the component.
8. Above process is termed profiling beacause internally this package is using Profiler component of react.

Drawbacks

1. If the component is declared non-performant then a red border is added and informantion about its previous border is lost.
2. User is prohibited to store some information in session storage correspoding to insightIDs provided.

Session storage data that this package stores is used by a browser extension which gives user more options to
configure threshold and It also allows user to turn profiling ON or OFF. 

Link of this browser extension will be updated soon.