oney

// ...
    socket.on('connected', async () => {
      await checkConnection(selectedRoom);
      showToast($.theme, 'Connected to ' + selectedRoom);
      // One line to invoke showToast.
      // No one wants to define a new callback.
    });

oney

import { useEffect } from "react-better-effect";

function Chat({ selectedRoom }) {
  const theme = useContext(ThemeContext);
  
  useEffect(($) => {
    const socket = createSocket('/chat/' + selectedRoom);
    socket.on('connected', async () => {
      await checkConnection(selectedRoom);
      

oney

function Chat({ selectedRoom }) {
  const theme = useContext(ThemeContext);
  
  const onChecked = useEvent(async connectedRoom => {
    showToast(theme, 'Connected to ' + connectedRoom);
  });
  
  const onConnected = useEvent(async connectedRoom => {
    showToast(theme, 'Checking connection to ' + connectedRoom);
    await checkConnection(selectedRoom);

oney

function Chat({ selectedRoom }) {
  const theme = useContext(ThemeContext);
  
  const onConnected = useEvent(async connectedRoom => {
    showToast(theme, 'Checking connection to ' + connectedRoom);
    
    await checkConnection(selectedRoom);
    
    showToast(theme, 'Connected to ' + connectedRoom);
    // After await, theme is not fresh!

oney

function Note() {
  const [text, setText] = useState('');
  
  const onTick = useEvent(() => {
    count += 1; // 😩 I can't modify 'count'
    saveDraft(text, count);
  });
  
  useEffect(() => {
    let count = 0;

oney

// ...
    socket.on('connected', async () => {
      await checkConnection(selectedRoom);
      showToast(theme, 'Connected to ' + connectedRoom);
      // I just want to call showToast with one line
      // Why I must define a new callback with 3 lines
      // of code outside of effect?? 🤨
    });

oney

import { Form } from 'antd';
// If 'submit' prop is useEvent-safe,
// antd would wrap withStable (from React.memo) internally

function Chat({onOdd, onEven}) {
  const [text, setText] = useState('');
  const onSubmit = () => {
    sendMessage(text);
  };
  return <Form submit={onSubmit} />;

oney

function Chat({onOdd, onEven}) {
  const [text, setText] = useState('');
  return <SendButton
    onClick={text.length % 2 ? onEven : onOdd}
    // 😚 SendButton won't re-render
  />;
}

oney

const SendButton = withStable(["onClick"], ({ onClick }) => (
  <button onClick={onClick}>click</button>
));

function ChatA({text}) {
  const onClick = () => sendMessage(text);
  // 😃 No need to do anything else
  return <SendButton onClick={onClick} />;
}

oney

function Chat({rooms}) {
  const [text, setText] = useState('');
  return rooms.map(room => (
    <SendButton onClick={
      () => sendMessage(room, text)
      // 😚 No re-render and no wrapping
    } />
  ));
}