import React, { StrictMode, useState, useEffect, useCallback, memo } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';

export let actionRenders = 0;
const Action = memo(function Action({ onRead }) {
  useEffect(() => {
    actionRenders++;
  });
  return <button onClick={onRead}>Read item notice</button>;
});
function App() {
  const [reviews, setReviews] = useState(0);
  const [reads, setReads] = useState(0);
  const onRead = useCallback(() => setReads((value) => value + 1), []);
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <button onClick={() => setReviews((value) => value + 1)}>Unrelated review</button>
      <Action onRead={onRead} />
      <output>
        Reviews {reviews}; reads {reads}
      </output>
    </main>
  );
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);