DEV Community: Ismail Adekunle Adegbite

Guide to using React Custom Hooks

Ismail Adekunle Adegbite — Mon, 08 May 2023 00:00:00 +0000

Many a times in your application, you may need to perform an operation in different components. Of course you can write a function for this purpose and then import such function in the respective components to achieve its intended purpose. What if the operation requires to call one or more React hooks, then the function cannot be used to perform such operations as React hooks can only be called in React functions. To solve this, we make use of React custom hooks. In this blog post, we will dive into what React custom hooks are and how to use them to encapsulate any resuable logic that you may need to share across multiple components.

What are React Custom Hooks

React Custom Hooks are JavaScript functions that use React hooks to provide a set of reusable functionality that can be shared among different React components. Custom Hooks are named with the use prefix to signal that they are intended to be used with hooks. As a convention, the file where a custom hook is written is usually named with the use prefix for example useMediaQuery.js. But it is required that the name of a function intended to be used as a React custom hook be started with use.

It is important to note that custom hooks are React hooks we write ourselves and hence their usage must conform to using in-built React hooks. Rules for using React (custom and in-built) hooks are:

Only call hooks at the top level components and before any early returns
Only call hooks from React functions which include React functional components and hooks (custom and in-built)

Why use React Custom Hooks?

React Custom Hooks provide several benefits which include the following:

Encapsulation: Custom Hooks allow you to encapsulate complex logic and state management in a single location which can then be shared among different components in your project. This makes your code more modular and easier to maintain.
Reusability: Custom Hooks can be used in multiple components, making it easier to reuse code and reduce duplication.
Testability: By encapsulating complex logic in Custom Hooks, it becomes easier to write tests for your code, since you can test the logic in isolation from the components that use it.
Code organization and seperation of concerns: Custom Hooks allow you to separate concerns (views from logic) and organize your code into smaller, more manageable pieces.

Examples of React Custom Hooks

Let's dive into two scenarios where React custom hooks can be used.

Our first example will be useMediaQuery. Let's say you have a component in which you want to hide/display some elements or perform any other operation at certain sreen sizes, then you will have to keep track of changes in width of user's device. Here you will need a state variable to get the current screen size as the screen changes and resize event listener to be attached to the window.

The component may be written as shown:

import { useState, useEffect } from "react"

const MyComponent = () => {
    const [screenWidth, setScreenWidth] = useState(0)

    useEffect(() => {
        const getScreenWidth = () => {
            setScreenWidth(window.innerWidth)
        }
        getScreenWidth()
        window.addEventListener('resize', getScreenWidth)
        return () => {
            window.removeEventListener('resize', getScreenWidth)
        }
    }, [])

    return (
        <div className='container'>
            Current screen width: {screenWidth}
            {screenWidth > 768 && <p>Show only on screen greater than 768px</p> }
            <p>Show on all screen size</p>
        </div>
    )
}

The above implementation will work well. What if you have more of such components in your application where you may need to hide or display some content or perform any other opearation depending on the width of the screen at any instance of time.

What do you do? Would you create a function for getting the screen width every time the window is resized? Remember this involves a state value and you can only declare/call useState and any other React hooks such as useEffect, useRef etc at top level in a React functional component or hook (in-built and custom).

We can isolate the logic of getting the current size (width) of screen at any time as the window is resized with a custom hook as shown below:

import { useState, useEffect } from "react"

const useMediaQuery = () => {
    const [screenWidth, setScreenWidth] = useState()

    useEffect(() => {
        const getScreenWidth = () => {
            setScreenWidth(window.innerWidth)
        }
        getScreenWidth()
        window.addEventListener('resize', getScreenWidth)
        return () => {
            window.removeEventListener('resize', getScreenWidth)
        }
    }, [])

    return screenWidth
}

export default useMediaQuery

You can then import this custom hook in as many components as required in your project to get the current screen size at any time.

Then our MyComponent can be refactored as shown below

const MyComponent = () => {
    // make sure you import useMediaQuery as necessary
    const screenWidth = useMediaQuery()

    return (
        <div>
            {screenWidth}
            {screenWidth > 768 && <p>Show only on screen greater than 768px</p> }
            <p>Show on all screen size</p>
        </div>
    )
}

Make sure you import the useMediaQuery as necessary into any components it is required. For example if useMediaQuery is written in a file named useMediaQuery.js inside a folder named /src/hooks and exported as default from the file as shown below:

// /src/hooks/useMediaQuery.js
import { useState, useEffect } from "react"

const useMediaQuery = () => {
    const [screenWidth, setScreenWidth] = useState()

    useEffect(() => {
        const getScreenWidth = () => {
            setScreenWidth(window.innerWidth)
        }
        getScreenWidth()
        window.addEventListener('resize', getScreenWidth)
        return () => {
            window.removeEventListener('resize', getScreenWidth)
        }
    }, [])

    return screenWidth
}

export default useMediaQuery

Then inside /src/components/MyComponent.js it will be imported as used as shown below

// /src/components/MyComponent.js
import useMediaQuery from '../useMediaQuery'

const MyComponent = () => {
    const screenWidth = useMediaQuery()
    return (
        <div className='container'>
            Current screen width: {screenWidth}
            {screenWidth > 768 && <p>Show only on screen greater than 768px</p> }
            <p>Show on all screen size</p>
        </div>
    )
}

Our second custom hook will be the useFetch hook that can be used across multiple components for data fetching. The hook may be written as follows:

// /src/hooks/useFetch.js
import { useState, useEffect } from 'react'

const useFetch = (url) => {
    const [loading, setLoading] = useState(false)
    const [error, setError] = useState(null)
    const [data, setData] = useState(null)
    useEffect(() => {
        // set loading to true to indicate the request is pending
        setLoading(true)
        fetch(url)
        .then(response => {
            // check if the request is successful
            if (!response?.ok) {
                throw new Error('an error occurred')
            }
            return response.json()
        })
        .then(responseData => {
            setData(responseData)
            setLoading(false)
            setError(null)
        })
        .catch(error => {
            setLoading(false)
            setError(error)
        })
    }, [url])
  return {
    loading,
    data,
    error
  }
}

export default useFetch

Here, three state variables and the corresponding functions to update their values are initiated. The useFetch hook receives a parameter, which is the endpoint to fetch the required data. Depending on your use case, any custom hook can be defined to receive any number of paramters to achieve an intended purpose.

loading and setLoading : loading indicates if the request has been commenced and pending. Its initial value is set to false. setLoading is used to update its value as appropriate.
error and setError : error this is to indicate if the request is rejected or failed and setError to update its value as appropriate
data and setData : data is to be updated to the resource returned from the request. The setData is to achieve this purpose.

After initializing the state variables required, the React useEffect is use to implement the logic required for fectching the data and updating the variables values.

The value of loading is first updated to true to indicate the request has been commenced and is pending. Then we made the request to the endpoint, the value of which will be the value of the required url parameter.
The response status is checked if the request is fulfilled, that is succesful. Upon success we update the state variables as shown in the code and also upon failed request.

Note any other external library such as axios can be used instead of the in-built fetch API

Now let's use our custom useFetch hook to fetch blog post from a dummy endpoint.

Let's make a seperate component where, useFetch hook will be called as shown below:

// src/components/Posts.js
import useFetch from '../hooks/useFetch'

const Posts = () => {
    const {
        loading,
        error,
        data
    } = useFetch('https://jsonplaceholder.typicode.com/posts/')
    if (loading) {
        return <p>loading...</p>
    }
    if (error) {
        return <p>Unable to fetch data</p>
    }
    // check if returned data is truthy.
    // You may want to check for other thing depending on the type and structure of the expected data
    if (data) {
        return (
            data.map((post) => {
                return (
                    <article key={post.id}>
                        <h3>{post.title}</h3>
                        <p>{post.body}</p>
                    </article>
                )
            })
        )
    }
}

Here, the useFetch custom is imported and called in the Posts component. The returned object is destrutured to obtain the loading, error and data state values after destructuring.
We check the values of these in order to render appropriate components/elements.

Conclusion

We have looked into how React Custom Hooks can make our code conforms to DRY (Don't Repeat Yourself) principle by enabling our code to be modular and reusable. You thoughts and comments are highly welcomed. Thank you!!!

How to make a modal with ReactJs

Ismail Adekunle Adegbite — Thu, 06 Apr 2023 00:00:00 +0000

Modals come in handy when you want to notify the user of an important action that was performed successfully or not or when your quickly want to pass an information to your user as soon as they open your app. For example in an ecommerce app, when the user has hitted the complete order or checkout button, you may want to confirm the user's intention to proceed with the order by simply showing a modal requiring the user to either click the continue or cancel button. After completing the order, it is a common practice to also display a form of notification box to inform the user that the order was successfully placed.

There are other many use cases of modal, in fact there are cases that a login form in a modal is pop out for the user to login with.

In this tutorial, we will be making a modal with React useState and css.
The main purpose of this tutorial is to demonstrate to the reader how a modal can be made using the techniques stated above.
Understanding of the content of this article will enable the reader to be able to deploy the techniques in any way that suits his/her need.

In case you are starting from scratch, run any of the commands below to create react app or any equivalent command depending on your device and tool your are using.
Run the command in the folder you want to create the app.

yarn create react-app name_of_your_app

npx create-react-app name_of_your_app

In the src folder of the created app, I will a create folder called components. Then inside this folder I will make a
file and name it ModalPage.js. This file will contain two React components as follows

The first component is the Modal. This component will accept two props as defined below:

isModalOpen: This is a react state that signifies if the modal is opened or not. It is of Boolean type that is, it is either true or false. When it is true, it implies the modal is opened while being false implies the modal is closed.
closeModal: This is a function to close the modal. Hence this function will set the isModalOpen state value to false.

const Modal = ({isModalOpen, closeModal}) => {
  return (
    <div className={`${isModalOpen? 'modal open' : 'modal'}`}>
        <div className='modal-content'>
            <p>Modal opened click the close button below to close modal</p>
            <button className='btn close-modal' onClick={closeModal}>close modal</button>
        </div>
    </div>
  )
}

Note, that the className of the Modal component is conditionally set to be either modal or modal open depending on the value of isModalOpen using a ternary operator. When the value of isModalOpen is false the className of the Modal component will be modal while when its value is true the className of the Modal component will be modal open indicating the Modal is opened as explained above.
Also, there is a button inside the Modal which when clicked sets the the value of isModalOpen to false thereby closing the Modal. This is achieved by attaching an onClick event listener to button such that when it is clicked, the function closeModal is called and hence the value of the isModalOpen is set to false thereby closing the Modal.

The second component is the ModalPage described below.

In this component we define a state variable isModalOpen and corresponding function, setIsModalOpen to toggle its value using the React useState hook. isModalOpen is passed as prop to the Modal component.

Two functions are defined:

closeModal: This function is used to set the value of isModalOpen to false, thereby closing the Modal. This function is passed as prop value to the Modal component.
openModal: This function is used to set the value of isModalOpen to true thereby opening the Modal. The function is attached to a button in this component through onClick event. Hence, whenever the button is clicked, the value of isModalOpen is set to true and thereby opening the Modal

const ModalPage = () => {
    const [isModalOpen, setIsModalOpen] = useState(false)
    const closeModal = () => {
        setIsModalOpen(false)
    }
    const openModal = () => {
        setIsModalOpen(true)
    }
    return (
        <>
            <Modal closeModal={closeModal} isModalOpen={isModalOpen} />
            <main>
                <section className='page-element'>
                    <h1>Page content</h1>
                    <button className='btn open-modal' onClick={openModal}>open modal</button>
                </section>
            </main>
        </>
    )
}

export default ModalPage

Note: In case your Modal and ModalPage components are not in the same file, ensure you import the Modal component into the file containing the ModalPage component. Also, you can name your components whatever you like as long as they conform to React components naming convention.

Then write the following css inside your index.css located in the source folder of your react app.

.btn {
  cursor: pointer;
  border: none;
  padding: .5rem;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  min-height: 100vh;
  width: 100vw;
  display: none;
}

.modal.open {
  display: grid;
  place-items: center;
  background-color: rgba(0, 0, 0, .5);
}
.modal-content {
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 300px;
  padding: 1rem;
  background-color: #ffffff;
}

.close-modal {
  background-color: #d11a2a;
  color: #ffffff;
}

And in the App.js located in src folder of the created app, import the ModalPage component.

import ModalPage from './components/ModalPage';
function App() {
  return (
    <div>
      <ModalPage />
    </div>
  );
}

export default App;

Now, let's relate our css with our Modal component. Note the Modal can have its class to be either modal when the value of isModalOpen is false or modal open when the value of isModalOpen is true. This is where the logic lies. In the css file, element with class modal is given display property of none, that is not to display while element with class modal open is given display property of grid. Hence as the value of isModalOpen toggles between false and true, the Modal is removed and added back to the DOM appropriately.

Then render your App in the index.js located in the src folder of the created app

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Note, there are things you can change here, such as the styling of your modal content, where your declare the variables and function used and also the background color of the Modal. The most important information is understanding the technique used here.

Yes that is it with creating modal in ReactJS. Kindly put your questions or observations in the comment box below, I will be really grateful if I can use your insights to improve my work.

If you love my work and want to support me, you can buy me a coffee here. No amount is small. Thank you and watch out for my coming articles