{"id":611,"date":"2024-06-13T02:12:30","date_gmt":"2024-06-13T02:12:30","guid":{"rendered":"https:\/\/wp.techrity.org\/WordPress\/?p=611"},"modified":"2024-07-04T03:29:41","modified_gmt":"2024-07-04T03:29:41","slug":"creating-custom-react-hooks","status":"publish","type":"post","link":"https:\/\/wp.techrity.org\/WordPress\/2024\/06\/13\/creating-custom-react-hooks\/","title":{"rendered":"Creating Custom React Hooks – Oyinkansola Odunsi"},"content":{"rendered":"\n

If you\u2019re not new to React, you probably know about or have used hooks like useState and useEffect before. However, do you know that you can create your own hook? Yes, you heard that right! And this is what this article is about. <\/p>\n\n\n\n

Also, if you\u2019re a newbie to JavaScript library, I\u2019ve got you covered! I\u2019ll bring you up to speed on the existing React hooks, and help you understand how to create yours. Let\u2019s dive right in.<\/p>\n\n\n\n

WHAT ARE REACT HOOKS?<\/h2>\n\n\n\n

The React library is commonly used because it\u2019s easy to handle. One of this library\u2019s excellent functionalities is React hooks. In simple terms, React hooks are JavaScript functions that allow you to access state and other React features without writing a class. <\/p>\n\n\n\n

These functions can also used to isolate the reusable parts of functional components. Additionally, they are identified by the word use<\/strong>, followed by the superpowers they possess like DebugValue<\/strong>, Effect<\/strong>, Callback<\/strong>, and LayoutEffect<\/strong>. <\/p>\n\n\n\n

THE EXISTING REACT HOOKS<\/h2>\n\n\n\n

The latest React version (version 18) has 15 built-in hooks that you can use. The most commonly used hooks are useState, useEffect, and useContext. Here is a list and a summary of all the existing React hooks:<\/p>\n\n\n\n

  1. useCallback<\/strong>: Returns a memoized (stored to avoid repeated computation) callback function so that the child component that depends on the function will not re-render unnecessarily. The function will only be recreated if one of its dependencies changes.  <\/li>
  2. useContext<\/strong>: After creating a context, useContext allows you to use a value in the context further down in your functional components. So, you don\u2019t have to manually pass props down your component tree. <\/li>
  3. useDebugValue<\/strong>: Helps you label the output of your custom hooks so you can easily understand their state and monitor their behaviour in React DevTools.<\/li>
  4. useDeferredValue<\/strong>: Useful for prioritizing the responsiveness of your user interface by deferring long-running operations that might affect the performance of your application.<\/li>
  5. useEffect<\/strong>: This hook handles side effects in your functional components. Side effects include fetching data, setting up event listeners, and DOM manipulation. <\/li>
  6. useId<\/strong>: Helps you generate unique IDs across your React application.<\/li>
  7. useImperativeHandle<\/strong>: Allows you to specify the properties of a component that should be exposed when using refs.<\/li>
  8. useInsertionEffect<\/strong>: This makes it easy for you to execute a function after a component has been added to the DOM.<\/li>
  9. useLayoutEffec<\/strong>t: It works similarly to useEffect, but it\u2019s synchronous. You can use it to make changes on your DOM immediately when it’s updated, and before the browser displays content on a user\u2019s screen. <\/li>
  10. useMemo<\/strong>: It is used to memoize the result of expensive computations to avoid unnecessary recalculations.<\/li>
  11. useReducer<\/strong>: Instead of using useState you can use useReducer to handle more complex state logic within a functional component.<\/li>
  12. useRef<\/strong>: Helps you create mutable references that you can access across multiple renders of a functional component. <\/li>
  13. useState<\/strong>: Allows you to manage the state within a functional component.<\/li>
  14. useSyncExternalStore<\/strong>: This hook allows you to read and subscribe to an external data store.<\/li>
  15. useTransition<\/strong>: Helps you manage asynchronous updates to a React application\u2019s UI.<\/li><\/ol>\n\n\n\n

    WHY DO WE NEED CUSTOM HOOKS?<\/h2>\n\n\n\n

    Don\u2019t get me wrong, this article is not to say that the in-build React hooks are not sufficient. React has all these powerful hooks that will serve you well. Nonetheless, I can\u2019t deny the reality that custom hooks can greatly improve the readability and overall quality of your code.<\/p>\n\n\n\n

    Let\u2019s open up this fact a little bit by highlighting why you might need a custom hook:<\/p>\n\n\n\n

    • It makes logic reusable.<\/li>
    • It allows you to use other hooks provided by React.<\/li>
    • You can easily separate your logic from your UI.<\/li>
    • You can break down complex stateful logic into simple chunks of code that are easy to maintain.<\/li>
    • You can test specific parts of your stateful logic because custom hooks can be debugged in isolation.<\/li><\/ul>\n\n\n\n

      TIPS FOR CREATING CUSTOM REACT HOOKS<\/h2>\n\n\n\n

      Here are some tips to keep in mind to ensure your custom hooks are flexible, reusable, and easy to understand.<\/p>\n\n\n\n

      • Follow the naming convention by starting with use<\/strong>.<\/li>
      • Repeated\/reusable logic within your components should be your custom hooks candidates.<\/li>
      • Feel free to use the built-in React hooks where necessary.<\/li>
      • Make sure a hook is focused on one responsibility instead of multiple functions.<\/li>
      • Your hooks should have value or functions that components can use.<\/li>
      • Ensure your hooks can accept parameters so you can easily customize their behaviour.<\/li>
      • Test your hooks in different scenarios to ensure they are performing as expected. You can use tools like Jest and\/or the React Testing Library.<\/li>
      • Document your hook and succinctly explain its function.<\/li><\/ul>\n\n\n\n

        CREATING YOUR FIRST CUSTOM HOOK<\/h2>\n\n\n\n

        Step 1: Define Your Hook<\/strong><\/p>\n\n\n\n

        Let\u2019s create a custom React hook that would allow our application toggle between light and dark mode (our reusable logic). To begin, we create a JavaScript file to define our hook.<\/p>\n\n\n\n

        import { useState, useEffect } from 'react';\nfunction useDarkMode() {\n  const [isDarkMode, setIsDarkMode] = useState(false);\n  useEffect(() => {\n    const body = document.body;\n    if (isDarkMode) {\n      body.classList.add('dark-mode');\n    } else {\n      body.classList.remove('dark-mode');\n    }\n  }, [isDarkMode]);\nconst toggleDarkMode = () => {\n    setIsDarkMode(prevMode => !prevMode);\n  };\n  return [isDarkMode, toggleDarkMode]:\n}\nexport default useDarkMode;\n<\/code><\/pre>\n\n\n\n
        Step 2: Use Your Custom Hook<\/strong><\/p>\n\n\n\n
        Now, we can use our custom hook in our React component.<\/p>\n\n\n\n
        import React from 'react';\nimport useDarkMode from '.\/useDarkMode';\nfunction App() {\n  const [isDarkMode, toggleDarkMode] = useDarkMode();\n  return (\n    <div className=\"App\">\n      <button onClick={toggleDarkMode}>\n        Toggle Dark Mode\n      <\/button>\n      <div className={isDarkMode ? 'dark-mode' : 'light-mode'}>\n        {isDarkMode ? 'Dark Mode' : 'Light Mode'}\n      <\/div>\n    <\/div>\n  );\n}\nexport default App;\n<\/code><\/pre>\n\n\n\n
        Step 3: Test Your Hoo<\/strong>k<\/p>\n\n\n\n
        To carry out the test, you\u2019ll have to install the Jest and the React Testing Library using:<\/p>\n\n\n\n
        npm install --save-dev @testing-library\/react @testing-library\/jest-dom jest\n<\/code><\/pre>\n\n\n\n
        Then, we\u2019ll create a test file for our custom hook. Let\u2019s call it useDarkMode.test.js<\/strong>.<\/p>\n\n\n\n
        We\u2019ll proceed to use the renderHook<\/strong> and act<\/strong> utilities in our React Testing Library to test our hook.<\/p>\n\n\n\n
        import { renderHook, act } from '@testing-library\/react-hooks';\nimport useDarkMode from '.\/useDarkMode';\n\n\ndescribe('useDarkMode', () => {\n  test('should toggle dark mode correctly', () => {\n    const { result } = renderHook(() => useDarkMode());\n    \/\/ Initial state should be light mode (isDarkMode: false)\n    expect(result.current[0]).toBe(false);\n    expect(document.body.classList.contains('dark-mode')).toBe(false);\n    \/\/ Toggle to dark mode\n    act(() => {\n      result.current[1](); \/\/ toggleDarkMode\n    });\n    expect(result.current[0]).toBe(true);\n    expect(document.body.classList.contains('dark-mode')).toBe(true);\n    \/\/ Toggle back to light mode\n    act(() => {\n      result.current[1](); \/\/ toggleDarkMode\n    });\n    expect(result.current[0]).toBe(false);\n    expect(document.body.classList.contains('dark-mode')).toBe(false);\n  });\n});\n<\/code><\/pre>\n\n\n\n
        Next, add Jest to your package.json<\/strong> file as follows, then run npm test to confirm that the useDarkMode hook is running as expected:<\/p>\n\n\n\n
        \"scripts\": {\n  \"test\": \"jest\"\n}\n<\/code><\/pre>\n\n\n\n
        Step 4: Document Your Custom Hook<\/strong><\/p>\n\n\n\n
        Document how your custom hook works and include details like its parameters and return values.<\/p>\n\n\n\n
        CREATING A DATA FETCHING CUSTOM HOOK<\/h2>\n\n\n\n
        Now that you have an idea of how to create a custom React hook, let\u2019s build another common custom hook (a data fetching hook) to further reinforce our knowledge. Shall we?<\/p>\n\n\n\n
        Step 1<\/strong>: Create the hook.<\/strong> <\/p>\n\n\n\n
        We\u2019ll call it useFetch.js<\/strong>. This custom hook is commonly used to allow several components to fetch data from an API.<\/p>\n\n\n\n
        import { useState, useEffect } from 'react';\n\n\nfunction useFetch(url) {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n\n\n  useEffect(() => {\n    const fetchData = async () => {\n      setLoading(true);\n      try {\n        const response = await fetch(url);\n        if (!response.ok) {\n          throw new Error('Network response was not ok');\n        }\n        const data = await response.json();\n        setData(data);\n      } catch (error) {\n        setError(error);\n  } finally {\n        setLoading(false);\n      }\n    };\n    fetchData();\n  }, [url]);\n\n\n  return { data, loading, error };\n}\nexport default useFetch;\n<\/code><\/pre>\n\n\n\n
        Step 2<\/strong>: Use your new hook in a component.<\/strong><\/p>\n\n\n\n
        import React from 'react';\nimport useFetch from '.\/useFetch';\nfunction App() {\n  const { data, loading, error } = useFetch('https:\/\/api.google.com\/data');\n  if (loading) return <div>Loading...<\/div>;\n  if (error) return <div>Error: {error.message}<\/div>;\n  return (\n    <div>\n      <h1>Data:<\/h1>\n      <pre>{JSON.stringify(data, null, 2)}<\/pre>\n    <\/div>\n  );\n}\nexport default App;\n<\/code><\/pre>\n\n\n\n
        Step 3<\/strong>: Test and document your custom hook.<\/strong><\/p>\n\n\n\n
        import { renderHook } from '@testing-library\/react-hooks';\nimport useFetch from '.\/useFetch';\n\/\/ Mock the fetch function\nglobal.fetch = jest.fn(() =>\n  Promise.resolve({\n    ok: true,\n    json: () => Promise.resolve({ data: 'mocked data' }),\n  })\n);\ndescribe('useFetch', () => {\n  afterEach(() => {\n    fetch.mockClear();\n  });\n  it('should return data after fetch', async () => {\n    const { result, waitForNextUpdate } = renderHook(() => useFetch('https:\/\/api.example.com\/data'));\n    expect(result.current.loading).toBe(true);\n    await waitForNextUpdate();\n    expect(result.current.loading).toBe(false);\n    expect(result.current.data).toEqual({ data: 'mocked data' });\n    expect(result.current.error).toBe(null);\n  });\n  it('should return an error if fetch fails', async () => {\n    fetch.mockImplementationOnce(() =>\n      Promise.reject(new Error('Fetch failed'))\n    );\n    const { result, waitForNextUpdate } = renderHook(() => useFetch('https:\/\/api.example.com\/data'));\n    await waitForNextUpdate();\n    expect(result.current.loading).toBe(false);\n    expect(result.current.error).toBe('Fetch failed');\n    expect(result.current.data).toBe(null);\n  });\n});\n<\/code><\/pre>\n\n\n\n
        GET STARTED TODAY<\/h2>\n\n\n\n
        By leveraging the power of custom hooks, you\u2019ll be able to write simple,  maintainable and readable codes. And trust me, once you get started, you are locked in by the ease these functions bring to your programming journey.<\/p>\n","protected":false},"excerpt":{"rendered":"
        If you\u2019re not new to React, you probably know about or have used hooks like useState and useEffect before. However, do you know that you can create your own hook? Yes, you heard that right! And this is what this article is about.  Also, if you\u2019re a newbie to JavaScript library, I\u2019ve got you covered! […]<\/p>\n","protected":false},"author":1,"featured_media":612,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,78,21,19],"tags":[50],"ppma_author":[124],"class_list":["post-611","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","category-how-tos","category-software","category-tech","tag-tech"],"authors":[{"term_id":124,"user_id":1,"is_guest":0,"slug":"rity_admin","display_name":"Owanate Amachree","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/2310c3b487ccb4ab80e12e38ea6bf6c0f4d8dba8aed074f7de39bda1e44be671?s=96&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/wp.techrity.org\/WordPress\/wp-json\/wp\/v2\/posts\/611","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.techrity.org\/WordPress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.techrity.org\/WordPress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.techrity.org\/WordPress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.techrity.org\/WordPress\/wp-json\/wp\/v2\/comments?post=611"}],"version-history":[{"count":3,"href":"https:\/\/wp.techrity.org\/WordPress\/wp-json\/wp\/v2\/posts\/611\/revisions"}],"predecessor-version":[{"id":616,"href":"https:\/\/wp.techrity.org\/WordPress\/wp-json\/wp\/v2\/posts\/611\/revisions\/616"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wp.techrity.org\/WordPress\/wp-json\/wp\/v2\/media\/612"}],"wp:attachment":[{"href":"https:\/\/wp.techrity.org\/WordPress\/wp-json\/wp\/v2\/media?parent=611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.techrity.org\/WordPress\/wp-json\/wp\/v2\/categories?post=611"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.techrity.org\/WordPress\/wp-json\/wp\/v2\/tags?post=611"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/wp.techrity.org\/WordPress\/wp-json\/wp\/v2\/ppma_author?post=611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}