How to prevent re-rendering on onChange Event of input field

Question

/**

• Make sure we keep the same functionality, without causing a re-render
• on every keypress when typing in the input.

*/ import React, { useState } from "react";

export const Example: React.FC = () => {

  const [userInput, setUserInput] = useState("");

  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    setUserInput(event.target.value);
  }

  console.log("Example renders");

  return (
    <>
      <h1>Send us some feedback</h1>
      <div>
        <input type="text" onChange={handleChange} value={userInput} />
        <button
          type="submit"
          onClick={() => {
            alert(userInput);
          }}
        >
          Submit
        </button>
      </div>
    </>
  );
};