4 React Hooks incontournables

Les React Hooks sont la clé de voûte du développement React moderne. Alors, si vous vous préparez pour un entretien d’embauche, mieux vaut maîtriser au moins les bases. Voici cinq Hooks fondamentaux à connaître pour ne pas passer pour un « débutant » (et peut-être même décrocher le job de vos rêves).

1. useState : Le magicien de l’état

useState est le sorcier qui vous permet de gérer l’état de vos composants fonctionnels. Fini les composants de classe, bienvenue dans le monde de la magie !

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Vous avez cliqué {count} fois</p>
      <button onClick={() => setCount(count + 1)}>
        Cliquez-moi !
      </button>
    </div>
  );
}

2. useEffect : Le magicien des effets secondaires

useEffect est le magicien des effets secondaires. Il vous permet d’effectuer des actions « magiques » après le rendu du composant : récupérer des données, manipuler le DOM, etc.

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `Vous avez cliqué ${count} fois`;
  }, [count]);

  return (
    <div>
      <p>Vous avez cliqué {count} fois</p>
      <button onClick={() => setCount(count + 1)}>
        Cliquez-moi !
      </button>
    </div>
  );
}

3. useContext : Le magicien du partage

useContext est le magicien du partage. Il vous permet de partager des données entre composants sans passer par une cascade de props (parce que passer des props, c’est fatiguant !).

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Je suis stylé par le contexte !</button>;
}

4. useRef : Le magicien des références

useRef est le magicien des références. Il vous permet de créer des références persistantes qui ne déclenchent pas de re-rendu à chaque mise à jour.

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus sur l'input</button>
    </div>
  );
}

Conclusion

En maîtrisant ces quatre Hooks (useState, useEffect, useContext, useRef), vous serez parfaitement armé(e) pour votre entretien d’embauche. Vous impressionnerez votre futur employeur et aurez toutes les chances de décrocher le job de vos rêves.

Bon codage et bonne chance pour votre entretien !