How to use Why Did You Render library in React Native

why-did-you-render can be used to detect unnecessary re renders in react native.

Setup

Install why-did-you-render package for your react native project

Using Npm

npm install @welldone-software/why-did-you-render --save-dev

Using Yarn:

yarn add --dev [@welldone](http://twitter.com/welldone)-software/why-did-you-render

Create wdyr.js file in root directory of your project

import React from 'react';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

Setting flag trackAllPureComponents will enable logging for all pure components.

You can track a component by setting whyDidYouRender to true

Import wdyr as the first import in index.js

Run the application and you should be able to see the logs

References:

On Expo Snack you might have some issue, Please refer this link for some information: https://github.com/welldone-software/why-did-you-render/issues/58

Link to github repo: https://github.com/welldone-software/why-did-you-render