How to use @welldone-software/why-did-you-render - 6 common examples

import React, { useEffect, memo } from 'react'
import { useMachine } from '../xstate-custom/useMyMachine'
import { MainMachine, MainTypes } from '../fsm/mainMachine'
import Row from './row'

import './styles.css'

import { StateChart } from '@statecharts/xstate-viz'

import whyDidYouRender from '@welldone-software/why-did-you-render'
whyDidYouRender(React)

let uid = 0

const App = () => {
	const [state, send] = useMachine(MainMachine, { debug: false })

	const { songs, completed } = state.context

	// console.log(
	// 	'\n\n[Parent State] = ',
	// 	state.value,
	// 	'\n[context] = ',
	// 	state.context,
	// )

	const rows = songs.map((it, idx) => {

/* eslint-disable */
import React, { useEffect, useState, useMemo, useRef, useContext } from 'react'
import ReactDOM from 'react-dom'
import { useMachine } from '@xstate/react'
import CompressMachine from './machine'
import { dump } from './helpers'

import { StateChart } from '@statecharts/xstate-viz'

import './styles.css'

import whyDidYouRender from '@welldone-software/why-did-you-render'
whyDidYouRender(React)

const MyContext = React.createContext()

let uid = 0

const App = () => {
	const { state, send } = useContext(MyContext)

	const { songs } = state.context

	// console.log('\n[State] = ', state.value, '\n[context] = ', state.context)

	// console.log( '\n changed:', state )
	// dump(state.value)
	// console.log('\n[context] = ', state.context)

/* eslint-disable */
import React, { useEffect, useState, useRef, memo } from 'react'
import ReactDOM from 'react-dom'
import { useMachine } from '@xstate/react'
import CompressMachine from './machine'
import WorkerMachine from './workerMachine'
import { dump } from './helpers'
import Row from './row'

import './styles.css'

import { StateChart } from '@statecharts/xstate-viz'

import whyDidYouRender from '@welldone-software/why-did-you-render'
whyDidYouRender(React)

const MyContext = React.createContext()

let uid = 0

const App = () => {

	const [state, send] = useMachine(CompressMachine)

	const { songs } = state.context

	const onUpdate = song => {
		send({
			type: 'update',
			data: song,
		})

import propTypes from 'prop-types';
import '../common/utils';
import '../components/base';
import './api';
import './localization';
import '../styles/styles.scss';
import React from 'react';


global.propTypes = propTypes;
// For debugging reasons for re-rendering components we use whyDidYouRender in dev mode
if (__DEV__ && typeof window !== 'undefined') {
    const whyDidYouRender = require('@welldone-software/why-did-you-render/dist/no-classes-transpile/umd/whyDidYouRender.min.js'); whyDidYouRender(React);
}

import PropTypes from 'prop-types'
import posed, { PoseGroup } from 'react-pose'
import shortid from 'shortid'
import { fadeIn } from './atoms/Transitions'
import Typekit from './atoms/Typekit'
import HostnameCheck from './atoms/HostnameCheck'
import Header from './organisms/Header'
import Footer from './organisms/Footer'
import styles from './Layout.module.scss'
import { useMeta } from '../hooks/use-meta'

// https://github.com/welldone-software/why-did-you-render
if (process.env.NODE_ENV !== 'production') {
  // eslint-disable-next-line
  const whyDidYouRender = require('@welldone-software/why-did-you-render/dist/no-classes-transpile/umd/whyDidYouRender.min.js')
  whyDidYouRender(React)
}

Layout.propTypes = {
  children: PropTypes.any.isRequired,
  location: PropTypes.shape({
    pathname: PropTypes.string.isRequired
  }).isRequired
}

export default function Layout({ children, location }) {
  const { allowedHosts } = useMeta()
  const timeout = 200
  const RoutesContainer = posed.div(fadeIn)
  const isHomepage =
    location.pathname === '/' ||
    location.pathname === '/offline-plugin-app-shell-fallback/'

library.add(
	faCog,
	faEllipsisH,
	faGavel,
	faComments,
	faSmile,
	faEdit,
	faCaretRight,
	faCaretDown,
	faCloudUploadAlt,
	faSpinner
);

if (process.env.NODE_ENV !== "production") {
	const whyDidYouRender = require("@welldone-software/why-did-you-render/dist/no-classes-transpile/umd/whyDidYouRender.min.js");
	whyDidYouRender(React, {
		include: [/.*/],
		exclude: [/^Connect/, /TimeAgo/, /StyledComponent/, /styled/, /FontAwesomeIcon/, /Gravatar/]
	});
}

ReactDOM.render(
	
		
			<>
				
				
				 } />
				
			
		
	,