Juana  O'Keefe

Juana O'Keefe

1603127640

Hooks, Hooks, Hooks!

Prior to 2018, React, an already powerful and widely-used javascript library for building user interfaces, had 3 cumbersome issues:

  1. Reusing logic: in order to to create dynamic interfaces where state is manipulated, logic was constantly being copied for seemingly simple tasks like updating the state from a form field. This often would lead to complicated and bloated data structures.
  2. Giant components: logic often times gets split amongst various lifecycle. methods in order to keep your application working.
  3. Confusing classes: invariably with reused logic and oversized components, our classes themselves can become confusing for both user and the machine.

As Dan Abramov of the React Dev team describes it, these are really three separate issues, but rather systems of the same problem: before 2018, _React did not provide a stateful primitive that is simpler than incorporating a class component and its associated logic. _At one point, React used mixins to pseudo-resolve this issue, but that ultimately created more problems that it solved.

How did the React team resolve this seemingly singular, but hugely impactful inconvenience? Hooks to the rescue.

Image for post

#software-engineering #react-conf-2018 #hooks #react #react-conference #react native

What is GEEK

Buddha Community

Hooks, Hooks, Hooks!

What are hooks in React JS? - INFO AT ONE

In this article, you will learn what are hooks in React JS? and when to use react hooks? React JS is developed by Facebook in the year 2013. There are many students and the new developers who have confusion between react and hooks in react. Well, it is not different, react is a programming language and hooks is a function which is used in react programming language.
Read More:- https://infoatone.com/what-are-hooks-in-react-js/

#react #hooks in react #react hooks example #react js projects for beginners #what are hooks in react js? #when to use react hooks

Hoang  Kim

Hoang Kim

1585500660

React hooks - Giới thiệu tổng quát về Hooks

React hooks ra đời đã giúp functional component trở nên powerful hơn bao giờ hết! 😍Trước đây khi cần dùng đến các tính năng của React như state, life cycle thì mình bắt buộc phải dùng class component. Nhưng giờ thì đã khác, có hooks, functional component như hổ mọc thêm cánh, có thể xử lý được state, life cycle và những thứ khác của React một cách êm đềm.

Cùng mình xem hết videos để khám phá những điều thú vị từ React hooks nhé! 😉

Link tham khảo:

#reactjs #react-hook #hook #javascript #web-development

Juana  O'Keefe

Juana O'Keefe

1603127640

Hooks, Hooks, Hooks!

Prior to 2018, React, an already powerful and widely-used javascript library for building user interfaces, had 3 cumbersome issues:

  1. Reusing logic: in order to to create dynamic interfaces where state is manipulated, logic was constantly being copied for seemingly simple tasks like updating the state from a form field. This often would lead to complicated and bloated data structures.
  2. Giant components: logic often times gets split amongst various lifecycle. methods in order to keep your application working.
  3. Confusing classes: invariably with reused logic and oversized components, our classes themselves can become confusing for both user and the machine.

As Dan Abramov of the React Dev team describes it, these are really three separate issues, but rather systems of the same problem: before 2018, _React did not provide a stateful primitive that is simpler than incorporating a class component and its associated logic. _At one point, React used mixins to pseudo-resolve this issue, but that ultimately created more problems that it solved.

How did the React team resolve this seemingly singular, but hugely impactful inconvenience? Hooks to the rescue.

Image for post

#software-engineering #react-conf-2018 #hooks #react #react-conference #react native

Chaverri Davis

Chaverri Davis

1581660855

React Hooks Tutorial for Beginners: Getting Started With React Hooks

React Hooks Tutorial - 1 - Introduction

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

React Hooks Tutorial - 2 - useState Hook

React Hooks Tutorial - 3 - useState with previous state

React Hooks Tutorial - 4 - useState with object

React Hooks Tutorial - 5 - useState with array

React Hooks Tutorial - 6 - useEffect Hook

React Hooks Tutorial - 7 - useEffect after render

React Hooks Tutorial - 8 - Conditionally run effects

React Hooks Tutorial - 9 - Run effects only once

React Hooks Tutorial - 10 - useEffect with cleanup

React Hooks Tutorial - 11 - useEffect with incorrect dependency

React Hooks Tutorial - 12 - Fetching data with useEffect Part 1

React Hooks Tutorial - 13 - Fetching data with useEffect Part 2

React Hooks Tutorial - 14 - Fetching data with useEffect Part 3

React Hooks Tutorial - 15 - useContext Hook Part 1

React Hooks Tutorial - 16 - useContext Hook Part 2

React Hooks Tutorial - 17 - useContext Hook Part 3

React Hooks Tutorial - 18 - useReducer Hook

React Hooks Tutorial - 19 - useReducer (simple state & action)

React Hooks Tutorial - 20 - useReducer (complex state & action)

React Hooks Tutorial - 21 - Multiple useReducers

React Hooks Tutorial - 22 - useReducer with useContext

React Hooks Tutorial - 23 - Fetching data with useReducer Part 1

React Hooks Tutorial - 24 - Fetching data with useReducer Part 2

React Hooks Tutorial - 25 - useState vs useReducer

React Hooks Tutorial - 26 - useCallback Hook

React Hooks Tutorial - 27 - useMemo Hook

React Hooks Tutorial - 28 - useRef Hook Part 1

React Hooks Tutorial - 29 - useRef Hook Part 2

React Hooks Tutorial - 30 - Custom Hooks

React Hooks Tutorial - 31 - useDocumentTitle Custom Hook

React Hooks Tutorial - 32 - useCounter Custom Hook

React Hooks Tutorial - 33 - useInput Custom Hook

#reactjs #react-js #hooks #react-hooks #javascript

Thierry  Perret

Thierry Perret

1644899922

Learn React Hooks – Guide du débutant

Les composants fonctionnels n'ont pas toujours été la méthode préférée pour déclarer des composants dans React.

Avant l'introduction de la version 16.8 de React, les composants fonctionnels étaient traités comme des citoyens de seconde classe. Ils ne pouvaient pas gérer l'état, la logique et de nombreuses autres fonctionnalités de React, et nous ne les utilisions que pour rendre des composants très simples à l'interface utilisateur.

La version 16.8 de React a résolu ces problèmes en introduisant React Hooks, qui permet aux développeurs d'utiliser ces fonctionnalités de réaction dans des composants fonctionnels.

Dans cet article, vous apprendrez :

  • Que sont les crochets React
  • Quatre crochets React courants avec des exemples de la façon de les écrire dans vos applications
  • Enfin, nous verrons comment écrire vos propres React Hooks personnalisés

Que sont les React Hooks ?

Les crochets sont des fonctions React intégrées introduites dans React version 16.8. Ils vous permettent d'utiliser des fonctionnalités de la bibliothèque React telles que les méthodes de cycle de vie, l'état et le contexte dans des composants fonctionnels sans avoir à vous soucier de la réécrire dans une classe.

Chaque nom React Hook est précédé du mot "use". Par exemple, useStateou useEffect. Ce format a été choisi car les Hooks permettent aux développeurs d'utiliser les fonctionnalités spéciales de la bibliothèque React. Vous utilisez donc usecette fonctionnalité spéciale de la bibliothèque React.

Pourquoi utiliser React Hooks ?

De nombreux développeurs sont sceptiques quant à l'apprentissage de React Hooks. Mais vous ne devriez pas l'être. Voici quelques raisons pour lesquelles vous devriez commencer à utiliser React Hooks :

Les classes dans React peuvent être assez déroutantes

Les cours sont un obstacle à l'apprentissage de React correctement. Pour les utiliser, vous devez comprendre le fonctionnement du mot- thisclé. Vous devez également vous rappeler constamment de lier les gestionnaires d'événements, ainsi que d'autres méthodes redondantes rencontrées lorsque vous travaillez avec des classes dans React.

Les composants des classes sont complexes et peuvent être difficiles à comprendre

Les composants de classe sont généralement volumineux et essaient d'effectuer de nombreuses opérations. À la longue, ils deviennent difficiles à comprendre.

Les crochets résolvent ce problème en vous permettant de séparer les grands composants en diverses fonctions plus petites, plutôt que d'avoir à forcer toute la logique en un seul composant.

Les crochets ont des composants plus courts et une meilleure lisibilité

Les composants de classe sont livrés avec beaucoup de code passe-partout. Considérez le composant de compteur ci-dessous :

class Counter extends Component {
    constructor(props) {
        super(props)
        this.state = {
        	count: 1,
        }
    }
    render() {
        return (
            <div>
                The Current Count: {this.state.count}
                <div>
                <button onClick={this.setState({ count: this.state.count - 1 })}>
                add
                </button>
                <button onClick={this.setState({ count: this.state.count + 1 })}>
                subtract
                </button>
                </div>
            </div>
    );
    }
}

Voici un code équivalent utilisant un composant fonctionnel et React Hooks :

function Counter  ()  {
    const [count, setCount] = useState(1);
    return (
        <div>
            The Current Count: {this.state.count}
            <div>
                <button onClick={() => setCount(count + 1)}>add</button>
                <button onClick={() => setCount(count - 1)}>subtract</button>
            </div>
        </div>
    );
};

Remarquez comment le composant de classe est beaucoup plus complexe. Vous avez besoin d'une classe pour étendre React, d'un constructeur pour initialiser l'état, et vous devez référencer le mot- thisclé partout.

L'utilisation de composants fonctionnels supprime une grande partie de cela, de sorte que notre code devient plus court et plus facile à lire et à entretenir.

Règles d'utilisation des crochets React

Lors de l'utilisation de React Hooks, il y a quelques règles à respecter :

  • N'appelez les crochets qu'au niveau supérieur d'un composant : vous ne devez pas utiliser les crochets à l'intérieur des boucles, des conditions ou des fonctions imbriquées. Au lieu de cela, utilisez toujours Hooks au niveau supérieur de votre fonction React, avant tout mot-clé de retour.
  • N'appelez que des crochets à partir de fonctions React : n'appelez jamais de crochets à partir de fonctions JavaScript normales. Vous pouvez :
    ✅ Appeler des Hooks à partir des composants fonctionnels de React.
    ✅ Appelez des crochets à partir de crochets personnalisés.

Crochets de réaction les plus courants

À ce jour, React a 10 crochets intégrés. Regardons les quatre plus courants :

  • useState
  • useEffect
  • useContext
  • useReducer

crochet useState

Le crochet useState vous permet de créer, mettre à jour et manipuler l'état à l'intérieur des composants fonctionnels.

React a ce concept d'état, qui sont des variables qui contiennent des données dont dépendent nos composants et qui peuvent changer avec le temps. Chaque fois que ces variables changent, React met à jour l'interface utilisateur en restituant le composant dans le DOM avec les valeurs actuelles des variables d'état.

Le crochet prend un seul argument optionnel : une valeur initiale pour l'état. Ensuite, il renvoie un tableau de deux valeurs :

  • La variable d'état
  • Une fonction pour mettre à jour l'état

Prenons l'exemple d'un composant de compteur :

Pour utiliser un Hook, la première étape consiste à importer le Hook en haut du fichier :

import { useState } from "react";

Ensuite, initialisez le Hook avec une valeur. En raison du fait qu'il renvoie un tableau, vous pouvez utiliser la déstructuration du tableau pour accéder aux éléments individuels du tableau, comme ceci :

const [count, setCount] = useState(0);

Avec cela, le code du composant sera :

import { useState } from "react";

function Counter() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);
    return (
        <div>
        Current Cart Count: {count}
            <div>
            <button onClick={() => setCount(count - 1)}>Add to cart</button>
            <button onClick={() => setCount(count + 1)}>Remove from cart</button>
            </div>
        </div>
    );
}

Voici à quoi ressemblera le composant une fois rendu.

Compteur

En cliquant sur le bouton Ajouter au panier ou Supprimer du panier , la valeur du nombre de variables d'état changera et le composant sera restitué avec la valeur mise à jour de l'état.

useEffect Hook

Si vous connaissez les méthodes de cycle de vie de la classe React, vous pouvez considérer le useEffectcrochet comme les méthodes de cycle de vie componentDidMount, componentDidUpdateet componentWillUnmount, toutes combinées en une seule fonction. Il vous permet de répliquer les méthodes de cycle de vie de React dans des composants fonctionnels.

Le useEffectcrochet vous permet d'effectuer des effets secondaires dans les composants de fonction. Les effets secondaires sont des actions qui peuvent s'exécuter parallèlement aux opérations principales d'un composant, telles que les interactions d'API externes, la modification de variables d'état et la récupération de données.

Le useEffecthook accepte 2 arguments :

  • Une fonction avec le code à exécuter
  • Un tableau qui contient une liste de valeurs de la portée du composant (variables d'accessoires, de contexte et d'état), connu sous le nom de tableau de dépendances, qui indique au crochet de s'exécuter chaque fois que sa valeur est mise à jour. S'il n'est pas fourni, le crochet s'exécutera après chaque rendu.

Voici un exemple d'utilisation du Hook :

import { useState, useEffect } from "react";
function Counter() {
    // Declare state variables
    const [count, setCount] = useState(0);
    const [product, setProduct] = useState("Eggs");
    useEffect(() => {
    	console.log(`${product} will rule the world!`);
    });
    return (
        <div>
        Current {product}'s count: {count}
            <div>
                <button onClick={() => setCount(count + 1)}>Add to cart</button>
                <button onClick={() => setCount(count - 1)}>Remove from cart</button>
                Change Product:{" "}
                <input type="text" onChange={(e) => setProduct(e.target.value)} />
            </div>
        </div>
    );
}

Dans l'exemple, l'effet s'exécutera après chaque mise à jour d'état.

Effet par défaut

wAAAAAAAAIdjI8JkO231psw0iuv3rz7D4biSJbmiabqyrbuVgAAOw ==

Comment déclencher conditionnellement un effet

Pour exécuter le crochet uniquement lorsque certaines valeurs ont changé, transmettez les variables en tant que dépendance dans le tableau :

useEffect(() => {
	console.log(`${product} will rule the world!`);
}, [product]); // Only re-run the effect if the value of product changes

Avec ce changement, le crochet ne s'exécutera que lors du premier rendu et lorsque la valeur du produit est modifiée.

Effect-dependency-array

Comment exécuter une fois sur le premier rendu

Si vous voulez qu'un effet ne s'exécute qu'une seule fois lors du premier rendu, comme faire des appels d'API lorsque le composant est rendu pour la première fois, vous pouvez passer un tableau vide comme dépendance comme ceci :

useEffect(() => {
	console.log("This runs once on first render");
}, []);

En fournissant un tableau vide, il indique au crochet d'écouter les changements d'état zéro, de sorte qu'il ne s'exécutera qu'une seule fois.

useContext Hook

Le useContextHook fonctionne avec l'API React Context. Il vous permet de rendre des données particulières accessibles à tous les composants de l'application, quelle que soit leur profondeur d'imbrication.

React a un flux de données unidirectionnel, où les données ne peuvent être transmises que du parent à l'enfant. Pour transmettre des données (comme l'état) d'un parent à un composant enfant, vous devrez les transmettre manuellement en tant qu'accessoire à différents niveaux en fonction de la profondeur d'imbrication du composant enfant.

Pour des données telles que la langue préférée de l'utilisateur, le thème ou les propriétés de l'utilisateur authentifié, il est fastidieux de devoir les transmettre manuellement dans l'arborescence des composants.

L'API Context de React et le useContextHook facilitent la transmission de données entre tous les composants de l'application.

Il accepte un objet de contexte créé à l'aide de React.createContextet renvoie le contexte actuel comme suit :

const value = useContext(SomeContext);

Regardons un exemple du fonctionnement du Hook :

Tout d'abord, créez un contexte pour utiliser le Hook. Par exemple, voici un UserContext pour obtenir la valeur des utilisateurs actuels :

import React from "react";
// some mock context values
const users = [
{
    name: "Harry Potter",
    occupation: "Wizard",
},
{
    name: "Kent Clark",
    occupation: "Super hero",
},
];

export const UserContext = React.createContext(users);

Chaque contexte a un wrapper de fournisseur, qui permet à ses composants enfants de s'abonner aux modifications du contexte et transmet la valeur du contexte via une prop de valeur.

Si la prop de valeur du fournisseur est mise à jour, ses composants enfants consommateurs seront restitués avec la nouvelle valeur de contexte.

function Users() {
return (
    <UserContext.Provider value={users}>
    <UserProfile />
    </UserContext.Provider>
);
}

Dans l'exemple, UserProfileon fait de la composante consommatrice du contexte.

import React, { useContext } from "react";
import { UserContext } from "./App";

export function UserProfile() {
    const users = useContext(UserContext);
    return (
        <div>
            {users.map((user) => (
            <li>
            I am {user.name} and I am a {user.occupation}!
            </li>
            ))}
        </div>
    );
}

Cela affichera les propriétés des utilisateurs actuels :

zrquu592NphAAAAAElFTkSuQmCC

useReducer Hook

Le useReducerCrochet est une alternative au useStateCrochet. La différence est qu'il permet une logique plus complexe et des mises à jour d'état qui impliquent plusieurs sous-valeurs.

Semblable à useState, useReducervous permet de créer des variables de type état qui entraînent la mise à jour de l'interface utilisateur chaque fois qu'elles changent.

Ce Hook accepte 2 arguments : une fonction réductrice et un état initial.

useReducer(reducer, initialState);

Il renvoie un tableau de deux valeurs qui peuvent être déstructurées à la valeur actuelle de l'état et une fonction de répartition.

const [state, dispatch] = useReducer(reducer, initialState);

Découvrons ses arguments et les valeurs renvoyées :

  • state : Il s'agit de la valeur actuelle de initialState passée au Hook.
  • reducer : Le reducer est une fonction qui accepte l'état et une action. Sur la base de ces arguments, il détermine comment la valeur de l'état va changer.
  • dispatch : La fonction dispatch est la façon dont nous passons une action à la fonction reducer. Il distribue l'action à utiliser pour mettre à jour l'état.

En règle générale, nous parcourons le type d'actions que nous avons effectuées dans notre application via une instruction switch pour déterminer comment la valeur de l'état va changer. C'est ainsi que le Hook met à jour les valeurs de son état.

function reducer(state, action) {
    switch (action.type) {
        case "CASE_1":
        return {
        	updatedState,
        };
        case "CASE_2":
        return {
        	updatedState,
        };
        default:
        	return state;
    }
}

La fonction dispatch distribue généralement un objet au format :

dispatch({ type: "ACTION_TYPE", payload: optionalArguments });

Où type est la description de l'action et la charge utile est les arguments que vous souhaitez transmettre au réducteur.

Comment créer des crochets personnalisés

Un crochet personnalisé est l'idée d'extraire la logique de composant couramment utilisée de l'interface utilisateur dans des fonctions JavaScript en utilisant les crochets React déjà disponibles. Cela vous aide à éviter la duplication de code et vous permet de rendre cette logique réutilisable dans plusieurs composants.

Examinons un exemple de crochet personnalisé qui renverra une réponse à partir de toute URL d'API valide que nous lui transmettrons.

//useFetch.js
import { useState, useEffect } from "react";

export function useFetch(url) {
	//values
    const [data, setData] = useState(null);
    const [error, setError] = useState("");
    useEffect(() => {
        fetch(url)
        .then(res => {
            if (!res.ok) {
            throw Error("something wrong, çould not connect to resource");
        }
        setData(res.json());
        })
        .then(() => {
        	setError("");
        })
        .catch( error => {
            console.warn(`sorry an error occurred, due to ${error.message} `);
            setData(null);
            setError(error.message);
        });
    }, [url]);
    return [data, error];
}

Vous pouvez désormais utiliser cette logique n'importe où dans votre application simplement en important la fonction et en passant un chemin d'API comme argument, plutôt que de tout écrire à partir de zéro.

Emballer

J'espère que vous avez pu voir à quel point React Hooks est utile. Ils vous permettent de créer des composants efficaces à la volée sans vous soucier des tracas liés aux composants de classe.

Qu'il s'agisse de vous permettre de vous concentrer sur l'écriture de votre code principal ou de vous permettre de créer vos propres crochets personnalisés... Les crochets React sont tellement cool ! Je suis ravi que vous les essayiez par vous-même.

Si vous avez trouvé cet article utile, partagez-le avec vos amis et votre réseau. Aussi, n'hésitez pas à vous connecter avec moi sur Twitter et mon blog où je partage un large éventail d'articles et de ressources pédagogiques gratuits.

Merci d'avoir lu et bon codage !

Link: https://www.freecodecamp.org/news/the-beginners-guide-to-react-hooks/

#react #hook #hooks