Merge pull request #13020 from vitormateusalmeida/why-did-you-render

Add why did you render lib

bigbluebutton-html5/client/main.jsx

@@ -16,6 +16,9 @@
     with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 */
 /* eslint no-unused-vars: 0 */
+
+import './wdyr';
+
 import React from 'react';
 import { Meteor } from 'meteor/meteor';
 import { render } from 'react-dom';

bigbluebutton-html5/client/wdyr.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+/*
+  To enable a detailed log of why a specific component is rendering,
+  execute this code in your browser's console:
+
+  require('/imports/ui/components/nav-bar/component.jsx').default.whyDidYouRender = {
+    logOnDifferentValues: true,
+    customName: 'Navbar',
+  }
+
+*/
+
+if (process.env.NODE_ENV === 'development') {
+  const whyDidYouRender = require('@welldone-software/why-did-you-render');
+  whyDidYouRender(React, {
+    trackAllPureComponents: false,
+  });
+}

bigbluebutton-html5/package.json

@@ -31,6 +31,7 @@
     "@browser-bunyan/server-stream": "^1.6.1",
     "@jitsi/sdp-interop": "0.1.14",
     "@material-ui/core": "^4.11.4",
+    "@welldone-software/why-did-you-render": "^6.2.0",
     "autoprefixer": "^10.2.5",
     "axios": "^0.21.1",
     "babel-runtime": "~6.26.0",