Задачи Javascript

🔁 Повторный рендер через slot и render prop

Автор: Герман Пирогов

Что выведет console.count и почему? Как избежать лишних рендеров?

const App = () => {
  return <Child slot={<SubChild />} renderProp={() => <SubChild />} />;
};

const Child = ({ slot, renderProp }) => {
  const [state, setState] = useState(0);

  return (
    <div>
      {slot}, {renderProp()}
      <button onClick={() => setState(state + 1)}>Increment</button>
    </div>
  );
};

const SubChild = () => {
  console.count('SubChild');

  return <div>SubChild</div>;
};