Liste des crochets de réaction prédéfinis utiles

Jetons un coup d’œil à quelques crochets React prédéfinis utiles que d’autres développeurs ont partagés.

React est une bibliothèque JavaScript utilisée pour créer des applications Web interactives. C’est l’une des bibliothèques les plus populaires en raison de son API facile à utiliser.

React fournit quelques crochets intégrés que nous pouvons utiliser dans des composants ou les utiliser pour créer nos propres crochets avec une logique réutilisable autonome.

Pour faciliter le développement d’applications React, de nombreux développeurs ont développé leurs propres hooks personnalisés et les ont mis à la disposition de tous. Dans cet article, nous examinerons quelques crochets React prédéfinis utiles.

Réagir à la requête

React Query est une bibliothèque qui nous fournit des hooks React pour faciliter les requêtes HTTP à partir de notre application React. Nous pouvons configurer la bibliothèque client HTTP à utiliser pour effectuer les requêtes avec la requête React.

Pour installer la bibliothèque, nous lançons :

@tanstack/react-query

Alors pour l’utiliser, on écrit :

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import App from "./App";

const queryClient = new QueryClient();

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </StrictMode>
);

App.js

import { useQuery } from "@tanstack/react-query";

export default function App() {
  const { isLoading, error, data } = useQuery({
    queryKey: ["answer"],
    queryFn: async () => {
      const res = await fetch("https://yesno.wtf/api");
      return res.json();
    },
  });

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return <div className="App">{data.answer}</div>;
}

Nous emballons le QueryClientProvider composant autour de notre React App composant de point d’entrée afin que nous puissions utiliser le useQuery crochet dans les composants de notre application.

Dans Appon appelle le useQuery crochet avec un objet avec le queryFn propriété qui fait la demande que nous voulons. Nous l’avons défini sur une fonction qui appelle
fetch faire une requête GET à https://yesno.wtf/api et renvoie une promesse avec l’objet JSON de réponse.

Le useQuery hook renvoie un objet avec le data propriété contenant les données de réponse. Le error propriété a la réponse d’erreur s’il y en a une.

isLoading est un indicateur booléen qui est true si la demande est en cours.

Le queryKey La propriété est définie sur un tableau avec l’identifiant unique de la requête. Nous pouvons mettre tout ce qui identifie de manière unique la demande dans le tableau.

Redux

Redux est une bibliothèque populaire pour la gestion des états globaux dans les applications React. Il peut être utilisé de manière autonome ou dans les applications React.

Redux est mis à jour pour inclure une API de crochets qui facilite la gestion des états en réduisant la quantité de code passe-partout nécessaire.

Pour l’installer, on lance :

@reduxjs/toolkit

Ensuite, nous pouvons l’utiliser en créant un magasin avec quelques actions.

Nous pouvons utiliser les crochets intégrés pour envoyer les actions et obtenir les états. Pour ce faire, nous écrivons :

import { createSlice } from "@reduxjs/toolkit";

export const counterSlice = createSlice({
  name: "counter",
  initialState: {
    value: 0,
  },
  reducers: {
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { incrementByAmount } = counterSlice.actions;
export const selectCount = (state) => state.counter.value;
export default counterSlice.reducer;

appeler le createSlice fonctionner avec un objet avec le initialState propriété définie sur un objet avec les valeurs initiales des états globaux.

Ensuite, nous fixons le reducers propriété à un objet avec une méthode qui est définie sur une fonction qui prend la state objet d’état global et le action qui est un objet de l’action envoyée.

Dans la fonction, nous ajoutons le payload valeur à la value État. Nous fixons le name propriété à 'counter' nommer stocker
counter.

Ensuite, nous exportons le incrementByAmount action en y accédant depuis le counterSlice.actions propriété. Ensuite, nous exportons le selectCount fonction qui retourne le counter magasins value État.

Après cela, nous exportons le reducer propriété comme exportation par défaut qui a le réducteur que nous avons défini précédemment pour mettre à jour l’état.

Suivant dans index.jsnous écrivons:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counter";
import App from "./App";

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>
);

appeler configureStore avec un objet qui a le reducer propriété définie sur un objet avec la propriété counter propriété définie sur counterReducer.

Ensuite, pour rendre les crochets Redux disponibles dans notre application React, nous enveloppons le Provider composante autour de notre point d’entrée App composant.

Nous fixons le store au store nous avons créé afin que nous puissions y accéder dans notre application.

Enfin, dans App.jsnous écrivons:

import { useDispatch, useSelector } from "react-redux";
import { incrementByAmount } from "./counter";

export default function App() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div className="App">
      <button onClick={() => dispatch(incrementByAmount(2))}>increment</button>
      <p>{count}</p>
    </div>
  );
}

Dans celui-ci, nous appelons le useSelector crochet pour retourner le value la valeur de l’état en l’appelant avec une fonction pour renvoyer la valeur de l’état.

Et puis nous appelons useDispatch pour retourner le dispatch fonction que nous utilisons pour envoyer une action.

Ensuite, nous ajoutons un bouton qui définit le onClick prop à une fonction qui appelle dispatch qui appelle le incrementByAmount action avec 2 comme action.payload valeur de la propriété. En conséquence, le value état sera incrémenté de 2.

Ensuite, nous affichons la dernière value indiquer le montant en rendant le count.

Le useMedia hook nous permet de vérifier la taille actuelle de l’écran sans écrire notre propre code avec du JavaScript simple.

Pour l’installer, on lance :

npm install --save use-media

Alors pour l’utiliser, on écrit :

import useMedia from "use-media";

export default function App() {
  const isWide = useMedia({ minWidth: "500px" });
  return (
    <div className="App">
      <p>{isWide.toString()}</p>
    </div>
  );
}

appeler le useMedia crochet avec un objet qui vérifie si le minWidth de l’écran est de 500px. Il revient ensuite true si la condition dans l’objet est satisfaite et false sinon.

Formulaire de crochet de réaction

React ne propose aucun moyen de valider les formulaires. Par conséquent, de nombreuses bibliothèques sont disponibles pour nous permettre de valider les formulaires.

La bibliothèque React Hook Form nous permet d’ajouter des formulaires de validation de formulaire dans notre application React.

Pour l’installer, on lance :

npm install react-hook-form

Puis on l’utilise en écrivant :

import { useForm } from "react-hook-form";

export default function App() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => console.log(data);
  console.log(watch("name"));

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <input defaultValue="name" {...register("name")} />
        <br />
        <input {...register("required", { required: true })} />
        <br />
        {errors.required && <span>This field is required</span>}
        <br />
        <input type="submit" />
      </form>
    </div>
  );
}

Nous appelons le useForm crochet pour renvoyer un objet avec diverses propriétés.

Le register La propriété est une fonction que nous appelons pour enregistrer l’entrée avec React Hook Form afin qu’elle soit incluse avec la validation du formulaire.

On utilise les propriétés retournées par register comme valeurs prop pour les entrées que nous enregistrons. Nous l’appelons avec le nom de l’entrée. Le errors propriété est un objet avec le résultat de la validation du formulaire avec le nom de l’entrée comme noms de propriété.

Le onSubmit prop est réglé sur le handleSubmit fonction appelée avec notre onSubmit fonction pour que onSubmit est appelée uniquement lorsque tous les champs sont valides.

Dans onSubmitnous obtenons les valeurs de forme à partir du data paramètre en tant qu’objet. Le watch La fonction nous permet de regarder les valeurs de formulaire saisies et renvoie la valeur.

Cintre de réaction

La bibliothèque React Hanger nous fournit de nombreux crochets React que nous pouvons utiliser.

Pour l’installer, on lance :

npm i react-hanger

Ensuite, nous pouvons utiliser certains des crochets fournis dans notre application React.

Par exemple, nous utilisons le useInput crochet pour nous permettre de lier notre entrée à un état en écrivant :

App.js

import { useInput } from "react-hanger";

export default function App() {
  const name = useInput("");
  console.log(name.value);

  return (
    <div className="App">
      <input type="text" value={name.value} onChange={name.onChange} />
    </div>
  );
}

Nous appelons le useInput crochet avec la valeur initiale de name.value. Ensuite, nous fixons le value soutenir à name.value pour afficher la valeur d’entrée. Et nous fixons le onChange appui à la name.onChange fonction pour mettre à jour name.value valeur avec la valeur d’entrée.

Un autre crochet utile fourni avec React Hanger est le useArray accrocher. Nous pouvons l’appeler pour créer un état de tableau.

Par exemple, nous écrivons :

App.js

import { useArray } from "react-hanger";

export default function App() {
  const { value, push, pop } = useArray([]);

  return (
    <div className="App">
      <button onClick={() => push(Math.random())}>push</button>
      <button onClick={() => pop()}>pop</button>
      <p>{JSON.stringify(value)}</p>
    </div>
  );
}

appeler le useArray accrochez et placez le value valeur initiale de la propriété dans un tableau vide.

Puis nous appelons push en premier onClick gestionnaire pour ajouter un nombre aléatoire au value déployer. Et nous appelons pop dans la seconde onClick gestionnaire pour supprimer le dernier élément de la value déployer.

Conclusion

Pour faciliter le développement d’applications React, de nombreux développeurs ont développé leurs propres hooks personnalisés et les ont mis à la disposition de tous.

Il existe des crochets prédéfinis pour nous permettre de faire beaucoup de choses, y compris faire des requêtes HTTP, ajouter une validation de formulaire, stocker des états locaux et globaux et plus encore.