removed useRenderCount (it can be added back later if we care)

pages/[event].tsx

@@ -8,13 +8,11 @@ import { EventData } from '../server/data/events';
 import { AuthButton } from '../shared/components/AuthButton/AuthButton';
 import { Events } from '../shared/components/Events/Events';
 import { useEvents } from '../store/events';
-import { useRenderCount } from '../utils/useRenderCount';
 
 export default withRedux(() => {
   const { query, pushRoute, ready } = useRouter();
   const { initialized, events } = useEvents();
   const [displayedEvent, setDisplayedEvent] = useState<EventData | undefined>(undefined);
-  const renderCount = useRenderCount();
 
   const eventId = parseStringParam(query?.event);
   const eventData = events[eventId];
@@ -30,11 +28,6 @@ export default withRedux(() => {
   return (
     <>
       <h1>{displayedEvent?.name || 'Event List'}</h1>
-      {renderCount && (
-        <pre>
-          {displayedEvent?.name} detail render count: {renderCount}
-        </pre>
-      )}
       <AuthButton />
       <Link href={'/'}>
         <button>Back to index</button>

pages/index.tsx

@@ -3,17 +3,11 @@ import React from 'react';
 import { withRedux } from '../next-utils/withRedux';
 import { AuthButton } from '../shared/components/AuthButton/AuthButton';
 import { Events } from '../shared/components/Events/Events';
-import { useRenderCount } from '../utils/useRenderCount';
 
-export default withRedux(() => {
-  const renderCount = useRenderCount();
-
-  return (
-    <>
-      <h1>Event List</h1>
-      {renderCount && <pre>Index render count: {renderCount}</pre>}
-      <AuthButton />
-      <Events />
-    </>
-  );
-});
+export default withRedux(() => (
+  <>
+    <h1>Event List</h1>
+    <AuthButton />
+    <Events />
+  </>
+));

shared/components/AuthButton/AuthButton.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 
 import { useAuth, useUserName } from '../../../store/auth';
-import { useRenderCount } from '../../../utils/useRenderCount';
 
 export const AuthButton = () => {
   const { loggedIn, login, logout } = useAuth();
   const userName = useUserName();
-  const renderCount = useRenderCount();
 
   return (
     <>
@@ -18,7 +16,6 @@ export const AuthButton = () => {
         </div>
         {loggedIn !== 'unknown' && <div className={'user'}>User: {userName ?? '<empty>'}</div>}
         (simulated 250ms latency on all requests)
-        {renderCount && `AuthButton render count: ${renderCount}`}
       </div>
       <style jsx>{`
         div {

shared/components/Events/Event.tsx

@@ -3,13 +3,11 @@ import React, { useState } from 'react';
 
 import { EventData } from '../../../server/data/events';
 import { useEvents } from '../../../store/events';
-import { useRenderCount } from '../../../utils/useRenderCount';
 import { Loader } from '../Loader/Loader';
 import { Modal } from '../Modal/Modal';
 
 export const Event = ({ event }: { event: EventData }) => {
   const [open, setOpen] = useState(false);
-  const renderCount = useRenderCount();
   const { loading } = useEvents();
 
   return (
@@ -23,7 +21,6 @@ export const Event = ({ event }: { event: EventData }) => {
             <button onClick={() => setOpen(true)}>View Details</button>
           </div>
         </Loader>
-        {renderCount && <pre>Event render count: {renderCount}</pre>}
       </div>
 
       {open && (

shared/components/Events/Events.tsx

@@ -1,20 +1,17 @@
 import React from 'react';
 
 import { useEvents } from '../../../store/events';
-import { useRenderCount } from '../../../utils/useRenderCount';
 import { Event } from './Event';
 
 export const Events = ({ specificEventIds }: { specificEventIds?: string[] }) => {
   const { initialized, events } = useEvents();
-  const renderCount = useRenderCount();
 
   if (!initialized) return null;
 
   const eventIds = specificEventIds || Object.keys(events);
 
   return (
     <>
-      {renderCount && <pre>Events render count: {renderCount}</pre>}
       <div>
         {eventIds.map(id => {
           const event = events[id];