{"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<p class=\"wp-block-paragraph\">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<p class=\"wp-block-paragraph\">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<p class=\"wp-block-paragraph\"><strong>Rules in creating Custom Hooks:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are certain rules to be followed while creating custom hooks. They are:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Hooks must start with &#8216;use&#8217; keyword.<\/li>\n\n\n\n<li>Hooks can be called only at the top level and not inside any loop or conditions.<\/li>\n\n\n\n<li>Hooks can be called only inside functional components.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Other available hooks like useEffect, useState or any other can be used inside custom hooks. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Example:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lets discuss the concept with the following illustration. Here, the component fetches user Data without any custom hook.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-171403.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"763\" height=\"691\" data-id=\"8592\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-171403.png\" alt=\"\" class=\"wp-image-8592\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-171403.png 763w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-171403-300x272.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-171403-331x300.png 331w\" sizes=\"(max-width: 763px) 100vw, 763px\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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<p class=\"wp-block-paragraph\">Create a custom hook as &#8220;useUserData.js&#8221; <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-171851.png\"><img decoding=\"async\" width=\"571\" height=\"459\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-171851.png\" alt=\"\" class=\"wp-image-8593\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-171851.png 571w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-171851-300x241.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-171851-373x300.png 373w\" sizes=\"(max-width: 571px) 100vw, 571px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"> Now use this hook in any component that needs to fetch user Data.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-172202.png\"><img decoding=\"async\" width=\"748\" height=\"420\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-172202.png\" alt=\"\" class=\"wp-image-8594\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-172202.png 748w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-172202-300x168.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/02\/Screenshot-2025-02-21-172202-534x300.png 534w\" sizes=\"(max-width: 748px) 100vw, 748px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hooks are used in React to manage states and other features without class components. It can be used to separate [&hellip;]<\/p>\n","protected":false},"author":503,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_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":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[],"class_list":["post-8590","post","type-post","status-publish","format-standard","hentry","category-web-architecture","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-2ey","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_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}]}}