{"id":6664,"date":"2020-12-26T18:08:48","date_gmt":"2020-12-26T18:08:48","guid":{"rendered":"http:\/\/ismiletechnologies.com\/?p=6664"},"modified":"2022-12-09T01:15:44","modified_gmt":"2022-12-08T19:45:44","slug":"react-hooks","status":"publish","type":"post","link":"https:\/\/ismiletechnologies.com\/en_us\/dataops\/react-hooks\/","title":{"rendered":"React Hooks"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

What is HR Automation?<\/b><\/span><\/h4>\nIt is a feature introduced to play with states in functional components as previously it was just being used with class components only.\n\nHooks are the functions which “hook into” React state and life cycle features from function components.\n\nRULES FOR USING HOOKS:\n\n(1)- Only call hooks at top level\n\n(2)- Only call hooks from react function\n\nSYNTAX INVOLVED WITH USING STATE IN HOOKS:\n\n\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\u00a0<\/p>

import React, {useState} from ‘React;<\/p>

  1. import<\/strong>React,\u00a0{\u00a0useState\u00a0}\u00a0from\u00a0‘react’;\u00a0\u00a0<\/li>
  2. \u00a0<\/li>
  3. function\u00a0CountApp()\u00a0{\u00a0\u00a0<\/li>
  4. \/\/\u00a0Declare\u00a0a\u00a0new\u00a0state\u00a0variable,\u00a0which\u00a0we’ll\u00a0call\u00a0“count”\u00a0\u00a0<\/li>
  5. const<\/strong>\u00a0[count,\u00a0setCount]\u00a0=\u00a0useState(0);\u00a0\u00a0<\/li>
  6. \u00a0<\/li>
  7. return<\/strong>\u00a0(\u00a0\u00a0<\/li>
  8. <div>\u00a0\u00a0<\/li>
  9. <p>You\u00a0clicked\u00a0{count}\u00a0times<\/p>\u00a0\u00a0<\/li>
  10. <button\u00a0onClick={()\u00a0=>\u00a0setCount(count\u00a0+\u00a01)}>\u00a0\u00a0<\/li>
  11. Click\u00a0me\u00a0\u00a0<\/li>
  12. <\/button>\u00a0\u00a0<\/li>
  13. <\/div>\u00a0\u00a0<\/li>
  14. );\u00a0\u00a0<\/li>
  15. }\u00a0\u00a0<\/li>
  16. export\u00a0default<\/strong>CountApp;<\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    BASIC HOOKS:<\/p>

    (1)- useState()<\/p>

    (2)- useEffect()<\/p>

    (3)- useContext()<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t\t\t\t
    \n\t\t\t
    <\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t\n\t\t\t
    \n\t\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t

    \n\t\t\t\t\t\t\tSana Eram\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t

    Data Scientist Intern<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

    What is HR Automation? It is a feature introduced to play with states in functional components as previously it was just being used with class components only. Hooks are the functions which “hook into” React state and life cycle features from function components. RULES FOR USING HOOKS: (1)- Only call hooks at top level (2)- […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[249],"tags":[],"class_list":["post-6664","post","type-post","status-publish","format-standard","hentry","category-dataops"],"_links":{"self":[{"href":"https:\/\/ismiletechnologies.com\/en_us\/wp-json\/wp\/v2\/posts\/6664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ismiletechnologies.com\/en_us\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ismiletechnologies.com\/en_us\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ismiletechnologies.com\/en_us\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ismiletechnologies.com\/en_us\/wp-json\/wp\/v2\/comments?post=6664"}],"version-history":[{"count":1,"href":"https:\/\/ismiletechnologies.com\/en_us\/wp-json\/wp\/v2\/posts\/6664\/revisions"}],"predecessor-version":[{"id":36093,"href":"https:\/\/ismiletechnologies.com\/en_us\/wp-json\/wp\/v2\/posts\/6664\/revisions\/36093"}],"wp:attachment":[{"href":"https:\/\/ismiletechnologies.com\/en_us\/wp-json\/wp\/v2\/media?parent=6664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ismiletechnologies.com\/en_us\/wp-json\/wp\/v2\/categories?post=6664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ismiletechnologies.com\/en_us\/wp-json\/wp\/v2\/tags?post=6664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}