Introducing the Optimistic Hook. A Sneak Peek into React's Canary Channel

Have you ever wished your web applications could feel faster and more responsive, even during asynchronous operations like network requests? Well, hold onto your seats because React's Canary channel has a game-changer for you: the useOptimistic Hook.

What is useOptimistic?

For the first time in React, developers are getting a built-in solution to optimistically update the UI. While this might sound like familiar territory for some seasoned developers, with famous third-party libraries like Tanstack Query and RTK Query offering similar features, useOptimistic marks React's official foray into this realm.

How Does it Work?

The syntax is elegant and simple:

const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);

Let's break it down:

• state: This represents the initial value of the state and serves as the fallback when no action is pending.
• updateFn: A pure function that takes the current state and an optimistic value, returning the resulting optimistic state. This function is where the magic happens, allowing you to craft the optimistic state to reflect the expected outcome of asynchronous actions.

Usage Examples

Optimistically Updating Forms

One of the most compelling use cases for useOptimistic is in form submission. Imagine this scenario: a user fills out a form and hits submit. Instead of staring at a loading spinner, the interface immediately updates to reflect the user's action. The submitted data appears instantly, labeled with a message like "Sending...". This instant feedback creates a perception of speed and responsiveness, even before the server acknowledges the request.

import { useOptimistic } from 'react';
 
function AppContainer() {
  const [optimisticState, addOptimistic] = useOptimistic(
    state,
    (currentState, optimisticValue) => {
      // Craft the optimistic state here
    }
  );
}

The following examples are taken from the React documentation. Please, refer to the documentation for more information.

import { useOptimistic, useState, useRef } from "react";
 
async function deliverMessage(message) {
  await new Promise((res) => setTimeout(res, 1000));
  return message;
}
 
 
function Thread({ messages, sendMessage }) {
  const formRef = useRef();
  async function formAction(formData) {
    addOptimisticMessage(formData.get("message"));
    formRef.current.reset();
    await sendMessage(formData);
  }
 
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [
      ...state,
      {
        text: newMessage,
        sending: true
      }
    ]
  );
 
  return (
    <>
      {optimisticMessages.map((message, index) => (
        <div key={index}>
          {message.text}
          {!!message.sending && <small> (Sending...)</small>}
        </div>
      ))}
      <form action={formAction} ref={formRef}>
        <input type="text" name="message" placeholder="Hello!" />
        <button type="submit">Send</button>
      </form>
    </>
  );
}
 
export default function App() {
  const [messages, setMessages] = useState([
    { text: "Hello there!", sending: false, key: 1 }
  ]);
  async function sendMessage(formData) {
    const sentMessage = await deliverMessage(formData.get("message"));
    setMessages((messages) => [...messages, { text: sentMessage }]);
  }
  return <Thread messages={messages} sendMessage={sendMessage} />;
}

Why Should You Care?

In a world where user experience reigns supreme, every millisecond counts. With useOptimistic, you have the power to elevate your applications to new heights of responsiveness. By providing immediate feedback to users, even during asynchronous operations, you can create a seamless and engaging experience that keeps users coming back for more.

Conclusion

While useOptimistic is still in its infancy and only available in React's Canary and experimental channels, it's undoubtedly a feature worth keeping an eye on. As developers, our mission is to constantly push the boundaries of what's possible, and useOptimistic represents a significant leap forward in that journey.

So, what are you waiting for? Dive into the Canary channel, experiment with useOptimistic, and discover the future of frontend development today!