Example using Profiler, keyboard events, and demonstrating effect of memoization. https://reactjs.org/docs/profiler.html

App.test.js

import { Profiler, useState, useMemo } from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event'

let msgs = [];
function pushMsg(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  msgs.push([id, phase])
}
function PushProfiler({id, children}) {
  return (
    <Profiler id={id} onRender={pushMsg}>
      {children}
    </Profiler>
  );
}

beforeEach(() => {
  msgs = [];
});


test('standard controlled input', async () => {
  function App() {
    const [val, setVal] = useState('')
    return (
      <div>
        <PushProfiler id="Input">
          <input value={val} onInput={(e) => setVal(e.target.value)}/>
        </PushProfiler>
      </div>
    )
  }

  render(<PushProfiler id="App">
    <App />
  </PushProfiler>);

  await userEvent.click(screen.getByRole('textbox'))
  await userEvent.keyboard('fo') // translates to: f, o

  expect(msgs).toEqual([
    ['Input', 'mount'],
    ['App', 'mount'],
    ['Input', 'update'],
    ['App', 'update'], // f
    ['Input', 'update'],
    ['App', 'update'] // o
  ])
});

test('Memoized children', async () => {
  function Dummy() {
    return (<PushProfiler id="Dummy"></PushProfiler>);
  }

  function App() {
    const [val, setVal] = useState('')
    const memoedChildren = useMemo(() => <Dummy/>, []);
    return (
      <div>
        <PushProfiler id="Input">
          <input value={val} onInput={(e) => setVal(e.target.value)}/>
        </PushProfiler>
        {memoedChildren}
      </div>
    )
  }

  render(<PushProfiler id="App">
    <App />
  </PushProfiler>);

  await userEvent.click(screen.getByRole('textbox'))
  await userEvent.keyboard('fo') // translates to: f, o

  expect(msgs).toEqual([
    ['Input', 'mount'],
    ['Dummy', 'mount'],
    ['App', 'mount'],
    ['Input', 'update'],
    ['App', 'update'], // f
    ['Input', 'update'],
    ['App', 'update'] // o
  ])
});


test('Non-Memoized children', async () => {
  function Dummy() {
    return (<PushProfiler id="Dummy"></PushProfiler>);
  }

  function App() {
    const [val, setVal] = useState('')
    return (
      <div>
        <PushProfiler id="Input">
          <input value={val} onInput={(e) => setVal(e.target.value)}/>
        </PushProfiler>
        <Dummy />
      </div>
    )
  }

  render(<PushProfiler id="App">
    <App />
  </PushProfiler>);

  await userEvent.click(screen.getByRole('textbox'))
  await userEvent.keyboard('fo') // translates to: f, o

  expect(msgs).toEqual([
    ['Input', 'mount'],
    ['Dummy', 'mount'],
    ['App', 'mount'],
    ['Input', 'update'],
    ['Dummy', 'update'],
    ['App', 'update'], // f
    ['Input', 'update'],
    ['Dummy', 'update'],
    ['App', 'update'] // o
  ])
});