useOptimistic

Canary

ה-Hook useOptimistic זמין כרגע רק בערוצי Canary ו-experimental של React. מידע נוסף ב-ערוצי השחרור של React.

useOptimistic הוא React Hook שמאפשר לעדכן את ה-UI באופן אופטימי.

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

Reference
- useOptimistic(state, updateFn)
שימוש
- עדכון אופטימי של טפסים

Reference

`useOptimistic(state, updateFn)`

useOptimistic הוא React Hook שמאפשר להציג state שונה בזמן שפעולה אסינכרונית מתבצעת. הוא מקבל state כארגומנט ומחזיר עותק של אותו state שיכול להיות שונה במשך הפעולה האסינכרונית, למשל בקשת רשת. אתם מספקים פונקציה שמקבלת את ה-state הנוכחי ואת קלט הפעולה, ומחזירה את ה-state האופטימי שישמש בזמן שהפעולה ממתינה.

ה-state הזה נקרא “אופטימי” כי בדרך כלל משתמשים בו כדי להציג למשתמש מיד את תוצאת הפעולה, למרות שבפועל הפעולה לוקחת זמן להשלים.

import { useOptimistic } from 'react';

function AppContainer() {
  const [optimisticState, addOptimistic] = useOptimistic(
    state,
    // updateFn
    (currentState, optimisticValue) => {
      // merge and return new state
      // with optimistic value
    }
  );
}

ראו דוגמאות נוספות בהמשך.

Parameters

state: הערך שיוחזר בתחילה ובכל פעם שאין פעולה ממתינה.
updateFn(currentState, optimisticValue): פונקציה שמקבלת את ה-state הנוכחי ואת הערך האופטימי שמועבר ל-addOptimistic, ומחזירה את ה-state האופטימי המתקבל. זו חייבת להיות פונקציה טהורה. updateFn מקבלת שני פרמטרים: currentState ו-optimisticValue. הערך המוחזר יהיה הערך הממוזג של currentState ו-optimisticValue.

Returns

optimisticState: ה-state האופטימי המתקבל. הוא שווה ל-state אלא אם יש פעולה ממתינה, ובמקרה כזה הוא שווה לערך שהוחזר מ-updateFn.
addOptimistic: פונקציית dispatch לקריאה כשיש עדכון אופטימי. היא מקבלת ארגומנט אחד, optimisticValue, מכל סוג, ותיקרא ל-updateFn עם state ו-optimisticValue.

שימוש

עדכון אופטימי של טפסים

ה-Hook useOptimistic מספק דרך לעדכן את ממשק המשתמש באופן אופטימי לפני שפעולת רקע, כמו בקשת רשת, מסתיימת. בהקשר של טפסים, הטכניקה הזו עוזרת לאפליקציות להרגיש תגובתיות יותר. כשמשתמש שולח טופס, במקום להמתין לתגובה מהשרת כדי לשקף את השינויים, הממשק מתעדכן מיד עם התוצאה הצפויה.

לדוגמה, כשמשתמש מקליד הודעה בטופס ולוחץ על כפתור “Send”, ה-Hook useOptimistic מאפשר להודעה להופיע מיד ברשימה עם תווית “Sending…”, עוד לפני שההודעה באמת נשלחת לשרת. הגישה ה”אופטימית” הזו יוצרת תחושת מהירות ותגובתיות. לאחר מכן הטופס מנסה באמת לשלוח את ההודעה ברקע. כשהשרת מאשר שההודעה התקבלה, תווית “Sending…” מוסרת.

Fork

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

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

PrevioususeMemo

NextuseReducer

useOptimistic - This feature is available in the latest Canary