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}>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  );
}

function SignupForm() {
  return (
    <form action={async (formData) => {
      await submitSignupData(formData);
    }}>
      <input name="email" type="email" />
      <input name="password" type="password" />
      <SubmitButton />
    </form>
  );
}

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 (
    <form action={async (formData) => {
      await submitContactForm(formData);
    }}>
      <textarea name="message" />
      <FormStatus />
      <SubmitButton />
    </form>
  );
}

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 (
    <form action={async (formData) => {
      const errors = validateRegistration(formData);
      if (errors.length) throw errors;
      await register(formData);
    }}>
      <input name="username" />
      <input name="email" type="email" />
      <ValidationStatus />
      <SubmitButton />
    </form>
  );
}

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 (
    <form action={async (formData) => {
      await submitComment(formData);
    }}>
      <textarea name="comment" />
      <SubmissionStatus />
      <SubmitButton />
    </form>
  );
}

Exemple 2 : Historique des actions

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

  return (
    <div>
      <h3>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>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>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={addTodo}>
        <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={submitComment}>
        <textarea name="comment" />
        <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={optimisticSettings.notifications}
            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 !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!