chat.jsx

import { withStable } from "react-with-stable";

const SendButton = withStable(
  ["onClick"], // list 'onClick' as stable callback
  ({ onClick }) => (
    <button onClick={onClick}>Click</button>
  )
);

function Chat() {
  const [text, setText] = useState('');

  // 🎉 No need to wrap it
  const onClick = () => {
    sendMessage(text);
  };

  return <SendButton onClick={onClick} />;
}

// vs.

const SendButton = React.memo(
  ({ onClick }) => (
    <button onClick={onClick}>Click</button>
  )
);

function Chat() {
  const [text, setText] = useState('');

  // 😟 Still have to write useEvent every time
  const onClick = useEvent(() => {
    sendMessage(text);
  });

  return <SendButton onClick={onClick} />;
}