{"id":13568,"date":"2022-07-25T14:31:08","date_gmt":"2022-07-25T14:31:08","guid":{"rendered":"https:\/\/blog.cloudthat.com\/?p=13568"},"modified":"2024-06-25T10:56:51","modified_gmt":"2024-06-25T10:56:51","slug":"reactjs-hooks-implementation-rules-and-uses","status":"publish","type":"blog","link":"https:\/\/www.cloudthat.com\/resources\/blog\/reactjs-hooks-implementation-rules-and-uses","title":{"rendered":"ReactJS Hooks: Implementation, Rules, and Uses"},"content":{"rendered":"\n\n\n\n\n\n\n\n\n\n\n\n\n
\n

TABLE OF CONTENT<\/span><\/strong><\/h2>\n<\/td>\n<\/tr>\n

1. Introduction to ReactJS<\/a><\/td>\n<\/tr>\n
2. React-Hooks<\/a><\/td>\n<\/tr>\n
3. Rules to use Hooks<\/a><\/td>\n<\/tr>\n
4. Types of Hooks in React<\/a><\/td>\n<\/tr>\n
5. Basic Hooks<\/a><\/td>\n<\/tr>\n
6. Additional Hooks<\/a><\/td>\n<\/tr>\n
7. Using Hooks in ReactJS Application<\/a><\/td>\n<\/tr>\n
8. Conclusion<\/a><\/td>\n<\/tr>\n
9. About CloudThat <\/a><\/td>\n<\/tr>\n
10. FAQs<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

Introduction to ReactJS<\/span><\/strong><\/h2>\n

There are many popular libraries in JavaScript, and one of the most popular is React. ReactJS is an open-source library, and frontend JavaScript library used to build UI components for web applications. React is based on a component-based approach, making application development faster and easier. However, react is only the \u201cView\u201d part of the popular Model View Controller (MVC) framework. This library is built and maintained by Facebook. By using React, we can create a single page or mobile application. React follows a component-based approach where we have to create a component once and it can be used anywhere in the application.<\/span><\/p>\n

React-Hooks\u00a0<\/span><\/strong><\/h2>\n

Hooks are the functions that \u201chooks\u201d state and life cycle features with the functional component. Initially, functional components are known as stateless components; mostly class components are only used. But with the introduction of react-Hooks, there is no need to convert functional components into class components for state management. React hooks take care of the state and life cycle management in functional components. Hooks cannot be used in class components<\/span><\/p>\n

Rules to use Hooks<\/span><\/strong><\/h2>\n
    \n
  1. Always use hooks at the top level. It cannot be used within loops, conditions, or functions.<\/span><\/li>\n
  2. Always call hooks from React Components.<\/span><\/li>\n
  3. Hooks can only be called from custom Hooks where the hook name starts with \u201cuse\u201d and they must use useState and useEffect hooks inside them.<\/span><\/li>\n<\/ol>\n

    Types of Hooks in React<\/span><\/strong><\/h2>\n

    There are many Hooks in ReactJS. In this blog, we will look at all basic hooks and a few additional hooks. We will also look at how we can create our own hook i.e., \u201cCustom Hook\u201d.<\/span><\/p>\n

    Basic Hooks<\/span><\/strong><\/h2>\n
      \n
    1. useState<\/span><\/li>\n
    2. useEffect<\/span><\/li>\n
    3. useContext<\/span><\/li>\n<\/ol>\n

      Additional Hooks<\/span><\/strong><\/h2>\n
        \n
      1. useReducer<\/span><\/li>\n
      2. useCallback<\/span><\/li>\n
      3. useMemo<\/span><\/li>\n
      4. useRef<\/span><\/li>\n<\/ol>\n

        Using Hooks in ReactJS Application<\/span><\/strong><\/h2>\n

        Let\u2019s set up a ReactJS Web Application. It can be done in a code editor (I am using VS code) and open its terminal to create a new project by typing-<\/span><\/p>\n

        npx create-react-app Hooks<\/pre>\n
        This will create a ReactJS project.<\/span><\/p>\n
        a. useState()<\/strong><\/span><\/p>\n
        The useState() hook allows the functional component to create its own state. This hook re-renders the UI whenever there is a change in state. useState() is defined as \u2013<\/span><\/p>\n
        const [count, setCount] = \u00a0useState(0)<\/pre>\n
        Here, this function has the state \u201ccount\u201d and setState is a method that is used to set the state of the count. It takes the initial state as an argument inside useState() hook.<\/span><\/p>\n
        To demonstrate the usage open the code editor and create a file \u201cuseStateHook.js\u201d in the \u201csrc\u201d folder and write the below code.<\/span><\/p>\n
        \"react1<\/a><\/p>\n
        On click of click button, the incrementCounter function will be called and the value of the count state will increase.<\/span><\/p>\n
        b. useEffect() <\/strong><\/span><\/p>\n
        useEffect() hook is used as a substitution to class components lifecycle methods. Components use useEffect to execute some logic after rendering the component. We can copy the functionality of lifecycle methods such as componentDidMount, componentDidUpdate, etc. useEffect runs before the first render and after every update because every element requires updated data. We can customize the additional re-rendering by passing some additional arrays.<\/span><\/p>\n
        To demonstrate the usage open the code editor and create a file \u201cuseStateHook.js\u201d in \u201csrc\u201d folder and write the below code.<\/span><\/p>\n
        \"react2<\/a><\/p>\n
        Its output will be<\/span><\/p>\n
        \"react3<\/a><\/p>\n
        After 1 sec<\/span><\/p>\n
        \"react4<\/a><\/p>\n
        However, if you see the console, you will see that \u201cInside useEffect will be triggered twice.\u201d It is not optimal behavior because if you have multiple effects, it may trigger the effect multiple times. It may cause infinite loops and may freeze your app.<\/span><\/p>\n
        \"react5<\/a><\/p>\n
        To optimize this, pass an empty array as a second argument to useEffect hook function. It will trigger useEffect only once.<\/span><\/p>\n
        \"react6<\/a><\/p>\n
        c. useContext()<\/strong><\/span><\/p>\n
        useContext hook is used to pass down data from parent component to child component without using props. We can directly pass the data from the provider to the component and avoid the use of Consumer hence doesn\u2019t require nesting.<\/span><\/p>\n
        Create 2 components in the src folder, Component1, and Component2. In Component1 write code-<\/span><\/p>\n
        \"react7<\/a><\/p>\n
        Here we are creating a UserContext which is like a global state and passing the user state to child components.<\/span><\/p>\n
        In Component2, write code-<\/span><\/p>\n
        \"react8<\/a><\/p>\n
        Here we are using useContext hook to fetch data from the parent component without using props. Our output will be-<\/span><\/p>\n
        \"react9<\/a><\/p>\n
        d. useReducer()<\/strong><\/span><\/p>\n
        useReducer() hook has the same function as that of useState() hook. The main difference between them is that in useReducer(), an action is passed to the reducer function which is responsible for changing the state. It is also used when there are multiple states in our component. useReducer() takes two arguments \u2013 a reducer function which is responsible for changing the state and initial state.<\/span><\/p>\n
        Create UseReducer.js component in src folder and write code-<\/span><\/p>\n
        \"react10<\/a><\/p>\n
        Its output will be \u2013<\/span><\/p>\n
        Initially, the state is 0 and text is visible. With a click of a button, the state of both count and showText is changed. The count is increased to 1 and showText changed to false.<\/span><\/p>\n
        \"react11<\/a><\/p>\n
        e. useMemo()<\/strong><\/span><\/p>\n
        useMemo() hook is used where there are expensive, resource extensive functions being called needlessly and thus causes performance issues in our application. useMemo() will cause the function to run only when it is needed. The first argument is a function that contains logic and the second one is the state, which on change calls the function.<\/span><\/p>\n
        f. useRef()<\/strong><\/span><\/p>\n
        useRef() hook allows us to create a reference to the DOM element in the functional component. The useRef() returns a mutable object\u00a0 which has a property called .current<\/strong><\/span><\/p>\n
        This value is persisted for full time in the component.<\/span>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0<\/span><\/p>\n
        Conclusion<\/span><\/strong><\/h2>\n
        Hooks are used to maintaining states in our functional components without changing them into class components.<\/span><\/p>\n
        In this blog, we have learned to use functional hooks and their lifecycle methods to hook the functional components into states.<\/span><\/p>\n
        Feel free to ask any queries you may have while working on Hooks. I will be more than happy to help you.<\/span><\/p>\n
        About CloudThat<\/span><\/strong><\/h2>\n
        CloudThat<\/strong><\/a>\u00a0is\u00a0the official AWS (Amazon Web Services) Advanced Consulting Partner, Microsoft Gold Partner, Google Cloud Partner, and Training Partner helping people develop knowledge of the cloud and help their businesses aim for higher goals using best-in-industry cloud computing practices and expertise. We are on a mission to build\u00a0a robust\u00a0cloud computing ecosystem by disseminating\u00a0knowledge on technological intricacies within the cloud space.\u00a0Our blogs, webinars,\u00a0case studies, and white papers\u00a0enable all the stakeholders in the cloud computing sphere.<\/span><\/p>\n
        CloudThat<\/strong>\u00a0<\/a>is a\u00a0house\u00a0of\u00a0All-Encompassing\u00a0IT\u00a0Services\u00a0on the cloud offering\u00a0Multi-cloud Security & Compliance, Cloud Enablement Services, Cloud-Native Application Development, and System Integration Services.\u00a0<\/span><\/span>Explore our\u00a0consulting here<\/a>.<\/strong><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n
        If you have any queries about ReactJS or any other file transfer options drop them in the comment section and I will get back to you quickly. Stay tuned for my next blog on a step-by-step guide for streamlining data in real-time.<\/span><\/p>\n
        FAQs:<\/span><\/strong><\/h2>\n
          \n
        1. \n
          Which versions of ReactJS hooks are available?<\/strong><\/span><\/span><\/h4>\n<\/li>\n<\/ol>\n
          Ans: Starting from 16.8.0, ReactJS includes implementations of Hooks.<\/span><\/p>\n
            \n
          1. \n
            What can I do with hooks that I cannot do with classes?<\/span><\/strong><\/span><\/h4>\n<\/li>\n<\/ol>\n
            Ans: You do not need to convert your functional components into class components for using states and life cycle features. They can be done in functional components using hooks.<\/span><\/p>\n","protected":false},"author":286,"featured_media":13634,"parent":0,"comment_status":"open","ping_status":"open","template":"","blog_category":[3606,3607],"user_email":"satyamd@cloudthat.com","published_by":"324","primary-authors":"","secondary-authors":"","acf":[],"_links":{"self":[{"href":"https:\/\/www.cloudthat.com\/resources\/wp-json\/wp\/v2\/blog\/13568"}],"collection":[{"href":"https:\/\/www.cloudthat.com\/resources\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.cloudthat.com\/resources\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.cloudthat.com\/resources\/wp-json\/wp\/v2\/users\/286"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cloudthat.com\/resources\/wp-json\/wp\/v2\/comments?post=13568"}],"version-history":[{"count":1,"href":"https:\/\/www.cloudthat.com\/resources\/wp-json\/wp\/v2\/blog\/13568\/revisions"}],"predecessor-version":[{"id":45700,"href":"https:\/\/www.cloudthat.com\/resources\/wp-json\/wp\/v2\/blog\/13568\/revisions\/45700"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cloudthat.com\/resources\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.cloudthat.com\/resources\/wp-json\/wp\/v2\/media?parent=13568"}],"wp:term":[{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.cloudthat.com\/resources\/wp-json\/wp\/v2\/blog_category?post=13568"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}