How to use Why Did You Render library in React Native

Yajana Rao
Aug 8, 2021

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-software/why-did-you-render

Create wdyr.js file in root directory of your project

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

--

--

Yajana Rao

🧑🏻‍💻Software Engineer | React, React Native | Tech Blogger