{"id":9347,"date":"2025-08-29T19:41:39","date_gmt":"2025-08-29T14:11:39","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=9347"},"modified":"2025-08-29T20:16:10","modified_gmt":"2025-08-29T14:46:10","slug":"beginners-guide-to-react-hooks","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/beginners-guide-to-react-hooks\/","title":{"rendered":"Beginners guide to react hooks"},"content":{"rendered":"\n

When you start learning front-end you\u2019ll hear a lot about JavaScript libraries especially react so What is exactly React?<\/p>\n\n\n\n

React is a JavaScript library created by Facebook by the help of which we can build fast interactive reusable user interfaces<\/p>\n\n\n\n

why is react so popular ?<\/p>\n\n\n\n

    \n
  1. we can reuse components<\/li>\n\n\n\n
  2. its fast<\/li>\n\n\n\n
  3. good community support<\/li>\n\n\n\n
  4. largerly used in many companies<\/li>\n<\/ol>\n\n\n\n

    today lets talk about react components<\/p>\n\n\n\n

    1.useState \u2013 managing state
    2.useEffect \u2013 side effects (API calls, timers, etc.)
    3.useRef \u2013 referencing DOM elements
    4.useContext \u2013 global state sharing
    Custom hooks (reusable logic)<\/p>\n\n\n\n

      \n
    1. useState:<\/strong> It allows you to add state (data that changes) inside a function<\/li>\n<\/ol>\n\n\n\n

      import React, { useState } from “react”;<\/p>\n\n\n\n

      function Counter() {
      const [count, setCount] = useState(0); \/\/ initial value = 0<\/p>\n\n\n\n

      return (<\/p>\n\n\n\n

      Count: {count}<\/p>\n\n\n\n

      setCount(count + 1)}>Increment
      );
      }<\/p>\n\n\n\n

      export default Counter;<\/p>\n\n\n\n

      2. useEffect<\/strong> \u2013 Handle Side Effects<\/p>\n\n\n\n

      Think of this as code that should run when something happens (like fetching data, updating the DOM, or running on mount).<\/p>\n\n\n\n

      import React, { useState, useEffect } from “react”;<\/p>\n\n\n\n

      function Timer() {
      const [seconds, setSeconds] = useState(0);<\/p>\n\n\n\n

      useEffect(() => {
      const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
      }, 1000);<\/p>\n\n\n\n

      }, []);<\/p>\n\n\n\n

      return () => clearInterval(interval); \/\/ cleanup<\/p>\n\n\n\n

      return<\/p>\n\n\n\n

      Time: {seconds}s<\/h5>\n\n\n\n

      ;
      }<\/p>\n\n\n\n

      export default Timer;<\/p>\n\n\n\n

      3.useContext<\/strong> \u2013 Share Data Easily<\/p>\n\n\n\n

      Passing props through multiple levels of components can be messy. With useContext<\/code>, you can share global state<\/strong> across your app without prop drilling.<\/p>\n\n\n\n

      Example use case: Sharing a theme (dark\/light) or user authentication status<\/p>\n\n\n\n

        \n
      1. useRef <\/strong>\u2013 Store Values Without Re-rendering<\/li>\n<\/ol>\n\n\n\n

        The useRef<\/code> hook is used to:<\/p>\n\n\n\n

          \n
        • Directly access DOM elements<\/li>\n\n\n\n
        • Store values between renders without causing re-renders<\/li>\n<\/ul>\n\n\n\n

          Example: focusing an input field automatically.<\/p>\n\n\n\n

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

          When you start learning front-end you\u2019ll hear a lot about JavaScript libraries especially react so What is exactly React? React […]<\/p>\n","protected":false},"author":527,"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_feature_clip_id":0,"_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-9347","post","type-post","status-publish","format-standard","hentry","category-web-architecture","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-2qL","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/9347","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\/527"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=9347"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/9347\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=9347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=9347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=9347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}