{"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