{"id":8590,"date":"2025-02-21T17:27:52","date_gmt":"2025-02-21T11:57:52","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=8590"},"modified":"2025-02-21T17:28:19","modified_gmt":"2025-02-21T11:58:19","slug":"creating-custom-hooks-in-react-js","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/creating-custom-hooks-in-react-js\/","title":{"rendered":"Creating custom hooks in React Js"},"content":{"rendered":"\n

Hooks are used in React to manage states and other features without class components. It can be used to separate the logic from the code to make it simpler and available to reuse across the components.<\/p>\n\n\n\n

Some commonly used React Hooks are useState, useEffect, useContext which serves different purposes. In this way, we can create our own hooks for different use cases and that are called as custom hooks.<\/p>\n\n\n\n

Rules in creating Custom Hooks:<\/strong><\/p>\n\n\n\n

There are certain rules to be followed while creating custom hooks. They are:<\/p>\n\n\n\n

    \n
  1. Hooks must start with ‘use’ keyword.<\/li>\n\n\n\n
  2. Hooks can be called only at the top level and not inside any loop or conditions.<\/li>\n\n\n\n
  3. Hooks can be called only inside functional components.<\/li>\n<\/ol>\n\n\n\n

    Other available hooks like useEffect, useState or any other can be used inside custom hooks. <\/p>\n\n\n\n

    Example:<\/strong><\/p>\n\n\n\n

    Lets discuss the concept with the following illustration. Here, the component fetches user Data without any custom hook.<\/p>\n\n\n\n

    \n
    \"\"<\/a><\/figure>\n<\/figure>\n\n\n\n

    The problem here is, when multiple components need to fetch and use this user Data, this have to be duplicated. So, to avoid redundant code and to separate business logic from UI, we can replace this with custom hooks as given below.<\/p>\n\n\n\n

    Create a custom hook as “useUserData.js” <\/p>\n\n\n\n

    \"\"<\/a><\/figure>\n\n\n\n

    Now use this hook in any component that needs to fetch user Data.<\/p>\n\n\n\n

    \"\"<\/a><\/figure>\n\n\n\n

    Hence, whenever we need to use similar logic like fetching, authentication in multiple components and to make the code simpler or reusable, we can create and use custom hooks.<\/p>\n\n\n\n

    <\/p>\n","protected":false},"excerpt":{"rendered":"

    Hooks are used in React to manage states and other features without class components. It can be used to separate the logic from the code to make it simpler and available to reuse across the components. Some commonly used React Hooks are useState, useEffect, useContext which serves different purposes. In… Continue Reading Creating custom hooks in React Js<\/span><\/i><\/a><\/p>\n","protected":false},"author":503,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-8590","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-uncategorized","7":"h-entry","9":"h-as-article"},"yoast_head":"\nPheonix Solutions - We Empower Your Business Growth<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pheonixsolutions.com\/blog\/creating-custom-hooks-in-react-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pheonix Solutions - We Empower Your Business Growth\" \/>\n<meta property=\"og:description\" content=\"Hooks are used in React to manage states and other features without class components. It can be used to separate the logic from the code to make it simpler and available to reuse across the components. Some commonly used React Hooks are useState, useEffect, useContext which serves different purposes. In… Continue Reading Creating custom hooks in React Js\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pheonixsolutions.com\/blog\/creating-custom-hooks-in-react-js\/\" \/>\n<meta property=\"og:site_name\" content=\"PHEONIXSOLUTIONS\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-21T11:57:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-21T11:58:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-171403.png\" \/>\n\t<meta property=\"og:image:width\" content=\"763\" \/>\n\t<meta property=\"og:image:height\" content=\"691\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Brindha\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:site\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brindha\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/creating-custom-hooks-in-react-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/creating-custom-hooks-in-react-js\\\/\"},\"author\":{\"name\":\"Brindha\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/32dac30adb7fda20718df787cd6572f9\"},\"headline\":\"Creating custom hooks in React Js\",\"datePublished\":\"2025-02-21T11:57:52+00:00\",\"dateModified\":\"2025-02-21T11:58:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/creating-custom-hooks-in-react-js\\\/\"},\"wordCount\":248,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/creating-custom-hooks-in-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/Screenshot-2025-02-21-171403.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/creating-custom-hooks-in-react-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/creating-custom-hooks-in-react-js\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/creating-custom-hooks-in-react-js\\\/\",\"name\":\"Pheonix Solutions - We Empower Your Business Growth\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/creating-custom-hooks-in-react-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/creating-custom-hooks-in-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/Screenshot-2025-02-21-171403.png\",\"datePublished\":\"2025-02-21T11:57:52+00:00\",\"dateModified\":\"2025-02-21T11:58:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/creating-custom-hooks-in-react-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/creating-custom-hooks-in-react-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/creating-custom-hooks-in-react-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/Screenshot-2025-02-21-171403.png\",\"contentUrl\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/Screenshot-2025-02-21-171403.png\",\"width\":763,\"height\":691},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/creating-custom-hooks-in-react-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating custom hooks in React Js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"name\":\"Pheonix Solutions\",\"description\":\"We Empower Your Business Growth\",\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\",\"name\":\"PheonixSolutions\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"width\":454,\"height\":300,\"caption\":\"PheonixSolutions\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/PheonixSolutions-209942982759387\\\/\",\"https:\\\/\\\/x.com\\\/pheonixsolution\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/32dac30adb7fda20718df787cd6572f9\",\"name\":\"Brindha\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f3f7caf582852829d9231b58b1558593887b4e0bb7bbce137b5a469780ebb87?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f3f7caf582852829d9231b58b1558593887b4e0bb7bbce137b5a469780ebb87?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f3f7caf582852829d9231b58b1558593887b4e0bb7bbce137b5a469780ebb87?s=96&r=g\",\"caption\":\"Brindha\"},\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/author\\\/brindha\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pheonix Solutions - We Empower Your Business Growth","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pheonixsolutions.com\/blog\/creating-custom-hooks-in-react-js\/","og_locale":"en_US","og_type":"article","og_title":"Pheonix Solutions - We Empower Your Business Growth","og_description":"Hooks are used in React to manage states and other features without class components. It can be used to separate the logic from the code to make it simpler and available to reuse across the components. Some commonly used React Hooks are useState, useEffect, useContext which serves different purposes. In… Continue Reading Creating custom hooks in React Js","og_url":"https:\/\/pheonixsolutions.com\/blog\/creating-custom-hooks-in-react-js\/","og_site_name":"PHEONIXSOLUTIONS","article_publisher":"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","article_published_time":"2025-02-21T11:57:52+00:00","article_modified_time":"2025-02-21T11:58:19+00:00","og_image":[{"width":763,"height":691,"url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-171403.png","type":"image\/png"}],"author":"Brindha","twitter_card":"summary_large_image","twitter_creator":"@pheonixsolution","twitter_site":"@pheonixsolution","twitter_misc":{"Written by":"Brindha","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/pheonixsolutions.com\/blog\/creating-custom-hooks-in-react-js\/#article","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/creating-custom-hooks-in-react-js\/"},"author":{"name":"Brindha","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/32dac30adb7fda20718df787cd6572f9"},"headline":"Creating custom hooks in React Js","datePublished":"2025-02-21T11:57:52+00:00","dateModified":"2025-02-21T11:58:19+00:00","mainEntityOfPage":{"@id":"https:\/\/pheonixsolutions.com\/blog\/creating-custom-hooks-in-react-js\/"},"wordCount":248,"commentCount":0,"publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/creating-custom-hooks-in-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-171403.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/pheonixsolutions.com\/blog\/creating-custom-hooks-in-react-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/pheonixsolutions.com\/blog\/creating-custom-hooks-in-react-js\/","url":"https:\/\/pheonixsolutions.com\/blog\/creating-custom-hooks-in-react-js\/","name":"Pheonix Solutions - We Empower Your Business Growth","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pheonixsolutions.com\/blog\/creating-custom-hooks-in-react-js\/#primaryimage"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/creating-custom-hooks-in-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-171403.png","datePublished":"2025-02-21T11:57:52+00:00","dateModified":"2025-02-21T11:58:19+00:00","breadcrumb":{"@id":"https:\/\/pheonixsolutions.com\/blog\/creating-custom-hooks-in-react-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pheonixsolutions.com\/blog\/creating-custom-hooks-in-react-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pheonixsolutions.com\/blog\/creating-custom-hooks-in-react-js\/#primaryimage","url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-171403.png","contentUrl":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-171403.png","width":763,"height":691},{"@type":"BreadcrumbList","@id":"https:\/\/pheonixsolutions.com\/blog\/creating-custom-hooks-in-react-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pheonixsolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating custom hooks in React Js"}]},{"@type":"WebSite","@id":"https:\/\/pheonixsolutions.com\/blog\/#website","url":"https:\/\/pheonixsolutions.com\/blog\/","name":"Pheonix Solutions","description":"We Empower Your Business Growth","publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pheonixsolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/pheonixsolutions.com\/blog\/#organization","name":"PheonixSolutions","url":"https:\/\/pheonixsolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","contentUrl":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","width":454,"height":300,"caption":"PheonixSolutions"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","https:\/\/x.com\/pheonixsolution"]},{"@type":"Person","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/32dac30adb7fda20718df787cd6572f9","name":"Brindha","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/6f3f7caf582852829d9231b58b1558593887b4e0bb7bbce137b5a469780ebb87?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6f3f7caf582852829d9231b58b1558593887b4e0bb7bbce137b5a469780ebb87?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6f3f7caf582852829d9231b58b1558593887b4e0bb7bbce137b5a469780ebb87?s=96&r=g","caption":"Brindha"},"url":"https:\/\/pheonixsolutions.com\/blog\/author\/brindha\/"}]}},"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p7F4uM-2ey","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/8590","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/503"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=8590"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/8590\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=8590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=8590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=8590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}