useOptimistic

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

• optimisticState: 결과적인 낙관적인 상태. 작업이 대기 중이지 않을 때는 state와 동일하며, 그렇지 않은 경우 updateFn에서 반환된 값과 동일

• addOptimistic: 낙관적인 업데이트가 있을 때 updateFn을 호출하는 dispatch 함수. 어떠한 타입의 optimisticValue라는 하나의 인자를 취함
 

• state: 작업이 대기 중이지 않을 때 초기에 반환될 값

• updateFn(currentState, optimisticValue): 낙관적인 상태를 반환하는 순수 함수

import { useOptimistic, useState, useRef } from "react";
import { deliverMessage } from "./actions.js";

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