import { memo, useEffect, useState } from 'react';

type Props = {
  data: {
    number: number;
    title: string;
  };
};

function isEqual(prevProps: Props, nextProps: Props) {
  return prevProps.data.title === nextProps.data.title;
}

const Headline: React.FC<Props> = memo(({ data: { title } }) => {
  console.log('render headline');
  return <h1>{title}</h1>;
}, isEqual);

const App: React.FC = () => {
  const [state, setState] = useState({ number: 0, title: 'Hello Memo' });

  useEffect(() => {
    setTimeout(() => {
      setState({ number: 1, title: 'Hello React' });
    }, 1000);
    setTimeout(() => {
      setState({ number: 2, title: 'Hello React' });
    }, 2000);
  }, []);
  return <Headline data={state} />;
};

export default App;

