Can you provide a Next.js v12 example? #239

Activity

1. vzaidman

   added

   help wantedExtra attention is neededExtra attention is needed

   good first issueGood for newcomersGood for newcomers

   on Apr 18, 2022
2. qfdk commented on Jun 30, 2022

   

   qfdk

   on Jun 30, 2022

   Last edited by qfdk

   More actions

   @dungle-scrubs Hello, i use next v12.

   You need the steps as follows :

   1. Create a wdyr.js

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

   2. Import the wdyr.js in _app.js

   import '../hooks/wdyr';

   3. Add props in the compostant

   const XXX=()=>{
       return <h1>xxx</h1>
   }
   XXX.whyDidYouRender = true;
   export default XXX;

   ❤️React with ❤️1Reacted by Kevin
3. dungle-scrubs commented on Jul 5, 2022

   

   dungle-scrubs

   on Jul 5, 2022

   Author

   More actions

   @qfdk Thank you, that helped.
4. apperside commented on Dec 12, 2022

   

   apperside

   on Dec 12, 2022

   More actions

   For me it didn't worked untlll I added

   "jsxImportSource": "@welldone-software/why-did-you-render"

   to tsconfig.ts

   👍React with 👍4Reacted by Mike Chabot, Jon Christie, Samuel Stickle and Matheus Francisco

   🚀React with 🚀2Reacted by Mike Chabot and Matheus Francisco
5. mikechabot commented on Jan 9, 2023

   

   mikechabot

   on Jan 9, 2023

   More actions

   @apperside Thanks. Can confirm this was also the solution to allow wdyr logging for Next 13.

   👍React with 👍3Reacted by Apperside, Jon Christie and Matheus Francisco