block1.js

import React, { useState } from 'react';

const Child1 = () => {
  console.log('Child1 rendered')
  return <div style = {{border: '1px solid red', padding: '30px'}}>
    Child1
  </div>
}
const Child2 = () => {
  console.log('Child2 rendered')
  return <div style = {{border: '1px solid red', padding: '30px'}}>
    Child2
  </div>
}
const Parent = () => {
  console.log('Parent rendered')

  let [count, setCount] = useState(0)
  const handleMouseEnter = () => setCount(prevCount => prevCount + 1)

  return <div onMouseEnter={handleMouseEnter} style = {{border: '1px solid black', padding: '50px'}}>
    Parent. Count: {count}
    <Child1/>
    <Child2/>
  </div>
}
export default Parent