import React from 'react'import Button from '@material-ui/core/Button'const Child = (props) => <div {...props} />const Child2 = ({ children, ...props }) => (  <div {...props}>    {children} <Child />  </div>)Child2.whyDidYouRender = trueconst App = () => {  const [state, setState] = React.useState({})  return (    <div>      <Child>{JSON.stringify(state, null, 2)}</Child>      <div>        <Button type="button" onClick={() => setState({ hello: 'hi' })}>          Submit        </Button>      </div>      <Child2>Child #2</Child2>    </div>  )}export default App

npx create-react-app <name> --typescript

import React from 'react'import {  Log,  VisualizerProvider,  traceLifecycle,} from 'react-lifecycle-visualizer'class TracedComponent extends React.Component {  state = {    loaded: false,  }  componentDidMount() {    this.props.onMount()  }  render() {    return <h2>Traced Component</h2>  }}const EnhancedTracedComponent = traceLifecycle(TracedComponent)const App = () => (  <VisualizerProvider>    <EnhancedTracedComponent />    <Log />  </VisualizerProvider>)

// Hoist helper functions (but not vars) to reuse between test casesconst renderComponent = ({ count }) =>  render(    <StateMock state={{ count }}>      <StatefulCounter />    </StateMock>,  )it('renders initial count', async () => {  // Render new instance in every test to prevent leaking state  const { getByText } = renderComponent({ count: 5 })  await waitForElement(() => getByText(/clicked 5 times/i))})it('increments count', async () => {  // Render new instance in every test to prevent leaking state  const { getByText } = renderComponent({ count: 5 })  fireEvent.click(getByText('+1'))  await waitForElement(() => getByText(/clicked 6 times/i))})

import React from 'react'import FileView from './src/components/FileView'const App = (props) => <FileView {...props} />export default App