oney

function usePrefetch() {
  return useQuery("A", () => fetchA());
}

function InnerA({isLoading, data}: ReturnType<typeof usePrefetch>) {
  useEffect(() => {
    if (data) sendEvent('fetchA', data);
  }, [data]);
  if (isLoading) return <p>Loading</p>;
  return <div> {data} <B /> </div>;

oney

import { useQuery } from "react-query";
import { Route, Routes } from "react-router-dom";
import { Link, PrefetchRouter, useIsPrefetch } from "react-prefetching";

export default function App() {
  return (
    <PrefetchRouter> // <- 1. replace BrowserRouter
      <Routes>
        <Link to="/a">A</Link> // <- 2. use Link from prefetch
        <Route path="a" element={<A />} />

oney

import { useQuery } from "react-query";
import { BrowserRouter, Link, Route, Routes } from "react-router-dom";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Link to="/a">A</Link>
        <Route path="a" element={<A />} />
      </Routes>

oney

import { withStable } from "react-with-stable";
import { useEffect } from "react-better-effect";

function App({ movie }) {
  const [uppercase, setUppercase] = useState(false);
  const format = useCallback((str) => {
    return uppercase ? str.toUpperCase() : str;
  }, [uppercase]);
  
  useSyncTitle(format, movie);

oney

function App({ movie }) {
  const [uppercase, setUppercase] = useState(false);
  const format = useCallback((str) => {
    return uppercase ? str.toUpperCase() : str;
  }, [uppercase]);
  
  useSyncTitle(format, movie);
  useShowRating(format, movie);
  
  return (

oney

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

oney

function Note() {
  const [text, setText] = useState('');
  
  useEffect(($) => {
    let count = 0;
    const id = setInterval(() => {
      
      count += 1; // 😚 Just modify count
      saveDraft($.text, count);
      

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);