Comprendre React New Hooks

React 19 introduit plusieurs nouveaux hooks puissants qui révolutionnent la façon dont nous traitons les formulaires et gérons les mises à jour optimistes dans nos applications. Dans ce blog, nous explorerons useFormStatus, useActionState et useOptimistic - trois hooks qui rendent nos applications React plus réactives et conviviales.

useFormStatus : gestion améliorée des formulaires

Le hook useFormStatus fournit des informations en temps réel sur les soumissions de formulaires, ce qui facilite la création de formulaires réactifs et accessibles. Explorons comment ce hook améliore les capacités de gestion de formulaires de React 18.

Exemple 1 : État de chargement du formulaire de base

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button disabled>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  );
}

function SignupForm() {
  return (
    

{ await submitSignupData(formData); }}>

); }

Dans React 18, vous devrez gérer manuellement les états de chargement à l'aide de useState. Le nouveau hook useFormStatus gère automatiquement cela, réduisant ainsi le code passe-partout.

Exemple 2 : plusieurs états de formulaire

function FormStatus() {
  const { pending, data, method } = useFormStatus();

  return (
    <div role="status">
      {pending && <span>Submitting via {method}...</span>}
      {!pending && data && <span>Last submission: {new Date().toLocaleString()}</span>}
    </div>
  );
}

function ContactForm() {
  return (
    

{ await submitContactForm(formData); }}>

); }

Exemple 3 : Statut de validation du formulaire

function ValidationStatus() {
  const { pending, validationErrors } = useFormStatus();

  return (
    <div role="alert">
      {validationErrors?.map((error, index) => (
        <p key="{index}" classname="error">{error}</p>
      ))}
    </div>
  );
}

function RegistrationForm() {
  return (
    

{ const errors = validateRegistration(formData); if (errors.length) throw errors; await register(formData); }}>

); }

Exemple 4 : Progression d'un formulaire en plusieurs étapes

function FormProgress() {
  const { pending, step, totalSteps } = useFormStatus();

  return (
    <div classname="progress-bar">
      <div classname="progress">



<h3>
  
  
  Example 5: File Upload Progress
</h3>



<pre class="brush:php;toolbar:false">function UploadProgress() {
  const { pending, progress } = useFormStatus();

  return (
    <div>
      {pending && progress && (
        <div classname="upload-progress">
          <div classname="progress-bar">



<h2>
  
  
  useActionState: Managing Action Results
</h2>

<p>The useActionState hook provides a way to track the state of form actions and server mutations, making it easier to handle success and error states.</p>

<h3>
  
  
  Example 1: Basic Action State
</h3>



<pre class="brush:php;toolbar:false">function SubmissionStatus() {
  const state = useActionState();

  return (
    <div>
      {state.status === 'success' && <p>Submission successful!</p>}
      {state.status === 'error' && <p>Error: {state.error.message}</p>}
    </div>
  );
}

function CommentForm() {
  return (
    

{ await submitComment(formData); }}>

); }

Exemple 2 : Historique des actions

function ActionHistory() {
  const state = useActionState();

  return (
    <div>
      <h3 id="Recent-Actions">Recent Actions</h3>
      <ul>
        {state.history.map((action, index) => (
          <li key="{index}">
            {action.type} - {action.timestamp}
            {action.status === 'error' && ` (Failed: ${action.error.message})`}
          </li>
        ))}
      </ul>
    </div>
  );
}

Exemple 3 : mécanisme de nouvelle tentative

function RetryableAction() {
  const state = useActionState();

  return (
    <div>
      {state.status === 'error' && (
        <button onclick="{()"> state.retry()}
          disabled={state.retrying}
        >
          {state.retrying ? 'Retrying...' : 'Retry'}
        </button>
      )}
    </div>
  );
}

Exemple 4 : file d'attente d'actions

function ActionQueue() {
  const state = useActionState();

  return (
    <div>
      <h3 id="Pending-Actions">Pending Actions</h3>
      {state.queue.map((action, index) => (
        <div key="{index}">
          {action.type} - Queued at {action.queuedAt}
          <button onclick="{()"> action.cancel()}>Cancel</button>
        </div>
      ))}
    </div>
  );
}

Exemple 5 : Statistiques d'action

function ActionStats() {
  const state = useActionState();

  return (
    <div>
      <h3 id="Action-Statistics">Action Statistics</h3>
      <p>Success Rate: {state.stats.successRate}%</p>
      <p>Average Duration: {state.stats.avgDuration}ms</p>
      <p>Total Actions: {state.stats.total}</p>
    </div>
  );
}

useOptimistic : mises à jour fluides de l'interface utilisateur

Le hook useOptimistic permet des mises à jour immédiates de l'interface utilisateur en attendant les réponses du serveur, créant ainsi une expérience utilisateur plus réactive.

Exemple 1 : liste de tâches optimiste

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [...state, newTodo]
  );

  async function addTodo(formData) {
    const newTodo = {
      id: Date.now(),
      text: formData.get('todo'),
      completed: false
    };

    addOptimisticTodo(newTodo);
    await saveTodo(newTodo);
  }

  return (
    <div>
      <form action="%7BaddTodo%7D">
        <input name="todo">
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {optimisticTodos.map(todo => (
          <li key="{todo.id}">{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

Exemple 2 : bouton J'aime optimiste

function LikeButton({ postId, initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    likes,
    (state) => state + 1
  );

  async function handleLike() {
    addOptimisticLike();
    await likePost(postId);
  }

  return (
    <button onclick="{handleLike}">
      {optimisticLikes} Likes
    </button>
  );
}

Exemple 3 : fil de commentaires optimistes

function CommentThread({ postId }) {
  const [comments, setComments] = useState([]);
  const [optimisticComments, addOptimisticComment] = useOptimistic(
    comments,
    (state, newComment) => [...state, newComment]
  );

  async function submitComment(formData) {
    const comment = {
      id: Date.now(),
      text: formData.get('comment'),
      pending: true
    };

    addOptimisticComment(comment);
    await saveComment(postId, comment);
  }

  return (
    <div>
      <form action="%7BsubmitComment%7D">
        <textarea name="comment"></textarea>
        <button type="submit">Comment</button>
      </form>
      {optimisticComments.map(comment => (
        <div key="{comment.id}">



<h3>
  
  
  Example 4: Optimistic Shopping Cart
</h3>



<pre class="brush:php;toolbar:false">function ShoppingCart() {
  const [cart, setCart] = useState([]);
  const [optimisticCart, updateOptimisticCart] = useOptimistic(
    cart,
    (state, update) => {
      const { type, item } = update;
      switch (type) {
        case 'add':
          return [...state, item];
        case 'remove':
          return state.filter(i => i.id !== item.id);
        case 'update':
          return state.map(i => i.id === item.id ? item : i);
        default:
          return state;
      }
    }
  );

  async function updateCart(type, item) {
    updateOptimisticCart({ type, item });
    await saveCart({ type, item });
  }

  return (
    <div>
      {optimisticCart.map(item => (
        <div key="{item.id}">
          {item.name} - ${item.price}
          <button onclick="{()"> updateCart('remove', item)}>Remove</button>
        </div>
      ))}
    </div>
  );
}

Exemple 5 : Paramètres utilisateur optimistes

function UserSettings() {
  const [settings, setSettings] = useState({});
  const [optimisticSettings, updateOptimisticSetting] = useOptimistic(
    settings,
    (state, update) => ({
      ...state,
      [update.key]: update.value
    })
  );

  async function updateSetting(key, value) {
    updateOptimisticSetting({ key, value });
    await saveSettings({ [key]: value });
  }

  return (
    <div>
      <div>
        <label>
          Theme:
          <select value="{optimisticSettings.theme}" onchange="{e"> updateSetting('theme', e.target.value)}
          >
            <option value="light">Light</option>
            <option value="dark">Dark</option>
          </select>
        </label>
      </div>
      <div>
        <label>
          Notifications:
          <input type="checkbox" checked onchange="{e"> updateSetting('notifications', e.target.checked)}
          />
        </label>
      </div>
    </div>
  );
}

N'oubliez pas de consulter la documentation officielle de React pour obtenir les informations les plus récentes et les meilleures pratiques lors de l'utilisation de ces hooks dans vos applications.

Bon codage !