The test case for interview discussion (React developer)

react-test-case.js

import { useState } from 'react';

// 1) The following code is not optimal in terms
// of performance. Could you improve it?
const Page = () => {
  const [value, setValue] = useState(0);

  return (
    <Counter
      value={value}
      increase={() => setValue(value + 1)}
    />
  );
};

// 2) You need to figure out which properties are
// causing this component to re-render and why.
// 3) Could you implement a generic function
// that can do such detections?
const Counter = (props) => {
  const { value, increase } = props;
  
  return (
    <div>
      <span>{value}</span>
      {' '}
      <button onClick={increase}>+1</button>
    </div>
  );
};

export default Page;