4 minutes
6 Hooks de React Les Plus Utiles
Dernière mise à jour: 13 mai, 2022Les composants fonctionnels sont définitivement mon type de composant de react préféré. Je les trouve plus faciles à écrire et à lire. La taille minimale du code passe-partout nécessaire pour que le composant soit opérationnel est également beaucoup plus petite que l'alternative. Les crochets (Hooks) vont être votre plus grande aide lorsque vous travaillez avec des composants fonctionnels.
§useState Pour La Gestion des États
L'utilisation de ce crochet facilite la gestion de l'état de react. La gestion de l'état avec setState dans les composants basés sur la classe est également facile à créer, mais pas aussi simple et directe que l'utilisation d'un crochet. Ce crochet peut être initialisé avec un état.
const [data, setData] = useState({name: "john", surname: "doe"});
Nous utiliserons setState de cette manière pour définir l'état :
setState(newState);
Nous pouvons définir l'état dynamiquement de cette façon :
const NameChanger = ({name}) => {
const [name, setName] = useState(name);
return (
<>
Count: {name}
<button onClick={() => setName(name)}>Reset Name</button>
<button onClick={() => setName("Slim Shady")}>Slim Shady</button>
<button onClick={() => setName("Giovanna Giorno")}>Giovanna Giorno</button>
</>
);
}
Nous définissons la valeur de pour notre nom. Et le bouton de réinitialisation (Reset) remettra le nom à sa valeur initiale. Très simple et facile à lire, n'est-ce pas ? La manipulation de la valeur de l'état à l'aide de la valeur actuelle est également très simple. L'ajout de ce bouton à notre composant nous aidera à faire cela :
<button onClick={() => setName(prevName => prevName + "!")}>Add "!"</button>
Avec ce bouton, nous ajoutons simplement "!" à la fin de notre string "name". Ce prevName nous aidera à répliquer le comportement de fusion de "setState" dans les composants de classe :
setState(prevState => {
// Object.assign fonctionnerait également
return {...prevState, ...updatedValues};
});
Eh bien voilà, à mon avis, c'était en fait 60% de ce qu'est la réaction.Si vous avez appris quelque chose de cette partie, bon travail !
§useEffect Pour Tout
Ce crochet est l'équivalent de componentDidMount, componentDidUpdate et componentWillUnmount.
Nous gérons les abonnements, les minuteries, les mutations, la journalisation et les effets secondaires (side effects) sont censés être gérés ici à l'aide de ce crochet. Un exemple aidera à mieux comprendre, je suppose:
useEffect(() => {
const interval = setInterval(() => {
console.log('Cela s'exécutera toutes les secondes !');
}, 1000);
return () => clearInterval(interval);
}, []);
Nous effaçons facilement l'intervalle en le retournant. Nous verrons le log toutes les secondes et lorsque le composant "mount" (se monte), nous l'effaçons avec "clearInterval()".
Nous pouvons définir une condition pour exécuter notre useEffect. useEffect attend le changement dans notre tableau de conditions et exécute lorsque la condition change :
useEffect(() => {
console.log("condition a changé")
}, [condition])
Vous pouvez créer autant d'effets useEffect que vous le souhaitez. Quel que soit leur rôle ou leur fonctionnalité.
§Gardez un Thème Cohérent avec useContext
L'API React Context vous aide beaucoup en matière de gestion d'état dans les grands projets. Vous pouvez considérer l'API Context comme un remplacement de redux. Avec ce crochet, vous pouvez atteindre l'état et conserver un utilisateur ou un thème cohérent dans vos projets de react.
Nous renvoyons la valeur de contexte actuelle pour notre contexte spécifique (MyContext) de cette façon :
const value = useContext(MyContext);
Si vous mettez à jour d'une manière ou d'une autre le js <MyContext.Provider> le plus proche au-dessus du composant, ce crochet déclenchera un rendu avec la dernière valeur de contexte transmise à ce fournisseur MyContext.
Je copie directement l'exemple donné dans les documents officiels de react. Je ne pouvais pas trouver un meilleur exemple qui pourrait expliquer l'utilisation de ce crochet.
const themes = {
light: {
foreground: "#000000",
background: "#eeeeee"
},
dark: {
foreground: "#ffffff",
background: "#222222"
}
};
const ThemeContext = React.createContext(themes.light);
function App() {
return (
<ThemeContext.Provider value={themes.dark}>
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar(props) {
return (
<div>
<ThemedButton />
</div>
);
}
function ThemedButton() {
const theme = useContext(ThemeContext);
return (
<button style={{ background: theme.background, color: theme.foreground }}>
I am styled by theme context!
</button>
);
}
§Empêchez Les Flashs de Contenu avec useLayoutEffect
Avez-vous déjà eu un problème avec un contenu qui devait changer dynamiquement et vous montriez à l'utilisateur quelque chose qu'il n'était pas censé voir, pendant une fraction de seconde ? Si votre réponse est oui, c'est le crochet qui résoudra votre problème.
Il n'y a qu'une seule différence entre useEffect et useLayoutEffect, useLayoutEffect se déclenche de manière synchrone après toutes les mutations DOM. Les mises à jour planifiées dans useLayoutEffect seront vidées de manière synchrone, avant que le navigateur n'ait la possibilité de peindre. Vous voulez utiliser ce crochet pour éviter d'avoir ces redoutables bouffées de contenu dans notre DOM.
SI vous êtes plus habitué à utiliser des composants basés sur des classes, considérez ce crochet comme l'équivalent de componentDidMount et componentDidUpdate.
Dans le rendu du serveur (server-rendering), vous réagirez lorsque vous utiliserez useLayoutEffect. Parce que useLayoutEffect ne peut pas s'exécuter tant que Javascript n'est pas téléchargé.
Gardez simplement à l'esprit que useLayoutEffect est un peu plus délicat à utiliser que useEffect. Utilisez useEffect chaque fois qu'il est interchangeable. La plupart du temps, vous aurez besoin de useEffect de toute façon. La plupart du temps, vous aurez besoin de useEffect de toute façon.
§Mise en Cache (Caching) Facile à L'Aide de useSwr
Vous pouvez obtenir ce crochet (Hook) en installant le package swr.
npm i swr
Vous pouvez obtenir ce crochet en installant le package swr. Le nom "SWR" dérive de "stale-while-revalidate". SWR renvoie d'abord les données du cache (stale), puis envoie la demande (revalidation) et revient enfin avec les données à jour. Vous pouvez lire la documentation officielle ici.
import useSWR from 'swr'
function Profile() {
const { data, error } = useSWR('/api/user', fetcher)
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
return <div>hello {data.name}!</div>
}
Ce crochet prend deux arguments. La "clé" (key) et la fonction "récupérateur" (fetcher). La clé sera utilisée comme identifiant unique et l'extracteur renverra des données et des objets d'erreur. La clé est généralement l'URL de l'API que nous souhaitons utiliser.
La valeur "data" est indéfinie tant que la requête n'est pas terminée. Quand il se termine, il s'agit soit de données, soit d'une erreur.
Pour le récupérateur, n'hésitez pas à utiliser votre bibliothèque de récupération de données préférée, elle peut être asynchrone.
Un exemple simple tiré de la documentation officielle :
import useSWR from 'swr'
function Profile() {
const { data, error } = useSWR('/api/user', fetcher)
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
return <div>hello {data.name}!</div>
}
§useRef pour Focus et Persister
Il existe de nombreux cas d'utilisation pour ce crochet particulier.
useRef peut être initialisé avec une valeur :
const refContainer = useRef(initialValue);
Ceci est un autre exemple de son utilisation. La valeur persistera entre les rendus provoqués par les changements d'état. Vous pouvez donc compter de cette manière en utilisant ce crochet.
const MyComponent = () => {
const ref = useRef({
count: 0
});
// chaque nouveau rendu fait augmenter le "count" d'un
ref.current.count += 1;
// vous pouvez également incrémenter le nombre en utilisant cette méthode
const incrementCount = () => {
ref.current.count += 1;
}
return <>exemple</>;
}
This value will be kept after state changes and re-renders. I'm sure you can think of couple of scenarios that this hook can come in handy.
useRef Hook est généralement utilisé pour accéder à un fils :
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
De cette façon, cliquer sur le bouton nous permettra de nous concentrer directement sur l'entrée. Vous pouvez utiliser cette méthode de focus dans un crochet useEffect et le tour est joué, vous avez un formulaire prêt à être écrit.
Ilker AkbiyikTable Des Matières
Articles Similaires
