{"@attributes":{"version":"2.0"},"channel":{"title":"DEV Community: Martial Anouman","description":"The latest articles on DEV Community by Martial Anouman (@oanouman).","link":"https:\/\/dev.to\/oanouman","image":{"url":"https:\/\/media2.dev.to\/dynamic\/image\/width=90,height=90,fit=cover,gravity=auto,format=auto\/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F278695%2F970fb681-f9da-4102-9bb3-7d665b2b8c78.jpeg","title":"DEV Community: Martial Anouman","link":"https:\/\/dev.to\/oanouman"},"language":"en","item":{"title":"Les hooks React expliqu\u00e9s!: useState (1\/8)","pubDate":"Sun, 23 May 2021 11:38:23 +0000","link":"https:\/\/dev.to\/oanouman\/les-hooks-react-expliques-usestate-1-8-14fe","guid":"https:\/\/dev.to\/oanouman\/les-hooks-react-expliques-usestate-1-8-14fe","description":"

Les articles de la s\u00e9rie:<\/p>\n\n

    \n
  1. \ud83d\udc49\ud83c\udffe useState<\/a>\n<\/li>\n
  2. useEffect<\/li>\n
  3. useReducer<\/li>\n
  4. useContext<\/li>\n
  5. useCallback<\/li>\n
  6. useRef<\/li>\n
  7. useMemo<\/li>\n
  8. useLayoutEffect<\/li>\n<\/ol>\n\n

    Salut \u00e0 tous!
    \nCet article est le premier d'une s\u00e9rie de 8 consacr\u00e9s aux hooks<\/strong> en React. Il s'agira de pr\u00e9senter chacun des hooks (ou presque), leur utilit\u00e9 ainsi qu'un ou deux cas d'utilisation.
    \nL'objectif est essentiellement de faciliter leur prise en main. Par cons\u00e9quent, ces articles s'adresse en premier lieu \u00e0 toutes personne ayant une connaissance basique de React.<\/p>\n\n

    Sur ce, en avant la musique...\ud83c\udfb6 \ud83d\ude0e<\/p>\n

    \n \n \n C'est quoi les hooks?\n<\/h1>\n\n

    Les hooks sont simplement un ensemble de fonctions permettant de reproduire les fonctionnalit\u00e9s offertes par les composants bas\u00e9s sur les classes (class-based components<\/strong>) dans les composants bas\u00e9s sur les fonctions (fonctional components<\/strong>). Elles sont disponibles depuis la version 16.8 de React.<\/p>\n\n

    Par convention, leur noms sont sous la forme useXXX<\/em>. Elles sont donc facilement reconnaissables \ud83d\ude42.
    \nLes hooks les plus populaires sont useState<\/strong>, useEffect<\/strong>, useCallback<\/strong>, pour ne citer que ceux l\u00e0.<\/p>\n\n

    Dans la suite de ce premier article, nous explorerons plus en d\u00e9tails le hook useState<\/strong>.<\/p>\n

    \n \n \n Pourquoi utiliser les hooks?\n<\/h1>\n\n

    Les hooks permettent d'exploiter pleinement les composants bas\u00e9s sur des fonctions. Alors la bonne question serait plut\u00f4t: Pourquoi utiliser les composants bas\u00e9s sur des fonctions?<\/strong><\/p>\n\n

    Pour faire simple, ils nous permettent d'\u00e9crire des composants moins verbeux, plus simple \u00e0 lire, comprendre et \u00e0 maintenir. <\/p>\n\n

    Cependant, le but de cette article n'\u00e9tant pas de vous pr\u00e9senter l'utilit\u00e9 des composants bas\u00e9s sur des fonctions, j'invite les plus curieux \u00e1 en savoir plus en allant par ici<\/a><\/strong>.<\/p>\n

    \n \n \n A quoi sert useState?\n<\/h1>\n\n

    Pour ceux qui utilisent React depuis les versions <16.8, useState<\/strong> est l'\u00e9quivalent de this.state<\/em> et this.setState<\/em>. C'est le \"hook d'\u00e9tat\" qui permet de g\u00e9rer un \u00e9tat dans un composant bas\u00e9 sur une fonction.<\/p>\n

    \n \n \n Comment utiliser useState?\n<\/h1>\n\n

    Assez parl\u00e9, un exemple s'impose \ud83d\ude0c.<\/p>\n

    \n \n \n Avec un composant bas\u00e9 sur une classe\n<\/h4>\n\n\n
    \n
    import<\/span> {<\/span> Component<\/span> }<\/span>  from<\/span> '<\/span>react<\/span>'<\/span>\n\nclass<\/span> MyComponent<\/span> extends<\/span> Component<\/span> {<\/span>\n  constructor<\/span>(<\/span>props<\/span>)<\/span> {<\/span>\n      super<\/span>(<\/span>props<\/span>)<\/span>\n      this<\/span>.<\/span>state<\/span> =<\/span> {<\/span>\n          count<\/span>:<\/span> 0<\/span>\n      }<\/span>\n  }<\/span>\n\n  handleClick<\/span>()<\/span> {<\/span>\n    this<\/span>.<\/span>setState<\/span>({<\/span>count<\/span>:<\/span> this<\/span>.<\/span>state<\/span>.<\/span>count<\/span> +<\/span> 1<\/span>})<\/span>\n  }<\/span>\n\n  render<\/span>()<\/span> {<\/span>\n    return<\/span> (<\/span>\n      <<\/span>div<\/span>><\/span>\n        <<\/span>p<\/span>><\/span>Vous avez cliqu\u00e9 {<\/span>this<\/span>.<\/span>state<\/span>.<\/span>count<\/span>}<\/span> fois<\/<\/span>p<\/span>><\/span>\n        <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>this<\/span>.<\/span>handleClick<\/span>}<\/span>><\/span>\n          Cliquez ici\n        <\/<\/span>button<\/span>><\/span>\n      <\/<\/span>div<\/span>><\/span>\n    )<\/span>\n  }<\/span>\n}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n
    \n  \n  \n  Equivalent avec un composant bas\u00e9 sur une fonction\n<\/h4>\n\n\n
    \n
    import<\/span> {<\/span>useState<\/span>}<\/span> from<\/span> '<\/span>react<\/span>'<\/span>\n\nconst<\/span> MyComponent<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\n  const<\/span> [<\/span>count<\/span>,<\/span> setCount<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>\n\n  const<\/span> handleClick<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\n    setCount<\/span>(<\/span>count<\/span> +<\/span> 1<\/span>)<\/span>\n  }<\/span>\n\n  return<\/span> (<\/span>\n    <<\/span>div<\/span>><\/span>\n      <<\/span>p<\/span>><\/span>Vous avez cliqu\u00e9 {<\/span>this<\/span>.<\/span>state<\/span>.<\/span>count<\/span>}<\/span> fois<\/<\/span>p<\/span>><\/span>\n      <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>this<\/span>.<\/span>handleClick<\/span>}<\/span>><\/span>\n        Cliquez ici\n      <\/<\/span>button<\/span>><\/span>\n    <\/<\/span>div<\/span>><\/span>\n  )<\/span>\n}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n
    Avouez qu'avec le hook c'est beaucoup moins verbeux \ud83d\ude01.<\/p>\n\n
    D\u00e9cortiquons tout \u00e7a!<\/p>\n
    \n  \n  \n  Cr\u00e9ation d'une variable d'\u00e9tat\n<\/h4>\n\n\n
    \n
    const<\/span> [<\/span>count<\/span>,<\/span> setCount<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n
    La fonction useState<\/strong> prend en param\u00e8tre l'\u00e9tat initial (la valeur par d\u00e9faut) et retourne un tuple contenant l'\u00e9tat actuel et une fonction permettant de le modifier. Attention l'ordre est important<\/strong>.
    \nCi-dessous, la signature de la fonction useState<\/strong>:
    \n<\/p>\n\n
    \n
    (<\/span>initialState<\/span>)<\/span> =><\/span> [<\/span>state<\/span>,<\/span> setState<\/span>]<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
    Par convention, le nom de la fonction permettant de modifier l'\u00e9tat est sous la forme set<StateName><\/code> afin de facilement savoir \u00e0 quoi elle sert et quel \u00e9tat elle modifie.<\/p>\n\n
    \n  \n  \n  Modification d'un \u00e9tat\n<\/h4>\n\n\n\n
    \n
    setCount<\/span>(<\/span>count<\/span> +<\/span> 1<\/span>)<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
    Pour modifier l'\u00e9tat, on appelle la fonction renvoy\u00e9e par useState<\/strong>, dans notre cas setCount<\/em>, en lui passant en param\u00e8tre la nouvelle valeur \u00e0 attribuer \u00e0 l'\u00e9tat.
    \nCi-dessous, la signature de la fonction renvoy\u00e9e par useState<\/strong>:
    \n<\/p>\n\n
    \n
    (<\/span>newState<\/span>)<\/span> =><\/span> void<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
    \n  \n  \n  \u26a0\ufe0f Attention !!! Il ne faut surtout pas modifier l'\u00e9tat comme ceci:\n<\/h5>\n\n\n\n
    \n
    count<\/span> =<\/span> count<\/span> +<\/span> 1<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
    \u26d4\ufe0f\u26d4\ufe0f\u26d4\ufe0f\u26d4\ufe0f Mauvais Mauvais Mauvais et... Mauvais \ud83d\ude45\ud83c\udffe\u200d\u2642\ufe0f<\/p>\n\n
    En mettant \u00e0 jour l'\u00e9tat de cette mani\u00e8re, React ne saura pas que votre \u00e9tat a chang\u00e9. Il n'actualisera donc pas le rendu du composant!<\/strong>.<\/p>\n\n
    Vous pouvez utiliser autant de variable d'\u00e9tat que vous le souhaitez dans un composant.
    \n<\/p>\n\n
    \n
    import<\/span> {<\/span>useState<\/span>}<\/span> from<\/span> '<\/span>react<\/span>'<\/span>\n\nconst<\/span> MyComponent<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\n  const<\/span> [<\/span>count<\/span>,<\/span> setCount<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>\n  const<\/span> [<\/span>age<\/span>,<\/span> setAge<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>30<\/span>)<\/span>\n  const<\/span> [<\/span>city<\/span>,<\/span> setCity<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>'<\/span>Abidjan<\/span>'<\/span>)<\/span>\n  const<\/span> [<\/span>lunch<\/span>,<\/span> setLunch<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>'<\/span>\ud83c\udf54<\/span>'<\/span>)<\/span>\n\n  ...<\/span>\n}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
    \n  \n  \n  \ud83d\udca1 Petite astuce de pro\n<\/h4>\n\n
    La fonction renvoy\u00e9e par useState<\/strong> a une deuxi\u00e8me signature:
    \n<\/p>\n\n
    \n
    ((<\/span>prevState<\/span>)<\/span> =><\/span> newState<\/span> )<\/span> =><\/span> void<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
    Cela signifie qu'au lieu de lui passer directement le nouvel \u00e9tat, vous pouvez lui donner en param\u00e8tre une fonction qui prend elle-m\u00eame en param\u00e8tre l'\u00e9tat actuel et renvoie le nouvel \u00e9tat.<\/p>\n\n
    Hum... pas clair \ud83d\ude43? Un petit exemple s'impose donc.
    \n<\/p>\n\n
    \n
    setCount<\/span>((<\/span>previousState<\/span>)<\/span> =><\/span> previousState<\/span> +<\/span> 1<\/span>)<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
    Ici, notre fonction setCount<\/em> re\u00e7oit en param\u00e8tre la fonction (previousState) => previousState + 1<\/em>. La variable previousState<\/em> repr\u00e9sente dans cette fonction l'\u00e9tat courant. Autrement dit previousState === count<\/em>. Puis, elle renvoie \u00e0 setCount<\/em> l'\u00e9tat courant incr\u00e9ment\u00e9 previousState + 1<\/em>. \ud83d\ude0a<\/p>\n\n
    Cette m\u00e9thode est tr\u00e8s utile lorsque vous avez des \u00e9tats plus complexes comme des objets et que vous souhaitez seulement mettre \u00e0 jour une partie de l'\u00e9tat.
    \n<\/p>\n\n
    \n
    \/\/ D\u00e9claration de l'\u00e9tat<\/span>\nconst<\/span> [<\/span>person<\/span>,<\/span> setPerson<\/span>]<\/span> =<\/span> useState<\/span>({<\/span>firstName<\/span>:<\/span> '<\/span>Martial<\/span>'<\/span>,<\/span> lastName<\/span>:<\/span> '<\/span>Anouman<\/span>'<\/span>,<\/span> age<\/span>:<\/span> '<\/span>\ud83e\udd10<\/span>'<\/span>})<\/span>\n\n...<\/span>\n\/\/ Mise \u00e1 jour en r\u00e9action \u00e0 un \u00e9v\u00e8nement<\/span>\nsetPerson<\/span>((<\/span>previousState<\/span>)<\/span> =><\/span> {...<\/span>previousState<\/span>,<\/span> firstName<\/span>:<\/span> '<\/span>Martial G.<\/span>'<\/span>})<\/span>\n...<\/span>\n\nconsole<\/span>.<\/span>log<\/span>(<\/span>person<\/span>)<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n\n\n
    \n
    {<\/span>age: '\ud83e\udd10'<\/span>, firstName: 'Martial G.'<\/span>, lastName: 'Anouman'<\/span>}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
    Voila, c'est tout pour le hook useState<\/strong> \ud83d\ude0a.<\/p>\n\n
    J'esp\u00e8re que cet article vous a plu et aid\u00e9 dans votre prise en main de ce hook. 
    \nRendez-vous au prochain article de la s\u00e9rie sur le hook useEffect<\/strong>(en cours).<\/p>\n\n
    Happy coding! \ud83e\udd13 <\/p>\n\n","category":["react","hooks","javascript","french"]}}}