DEV Community: mitchel inaju

How To Create Custom Hooks in React / Next JS

mitchel inaju — Tue, 27 Jun 2023 08:14:11 +0000

What are React Hooks?

React Hooks allows developers "hook into" React's lifecycle and state management features from functional components. They provide a more concise and reusable way to manage component logic. Some popular examples are useState and useEffect Hooks.

Prerequisites

Good understanding of react js hooks like useState and useEffect.
You have a react project running that you want to create a custom hook for.

Why should we use custom hooks?

React Hooks helps us to reuse logic across our code base. You've written a piece of Code that you later found out other files that might need that logic, a good practice is to abstract that logic into a custom hook.

For example, you've written a functionality that allows you to communicate with an API, this logic includes, returning errors, returning the success messages, and sending data to the API. It's always a good practice to abstract this logic into a hook so you can reuse it across your codebase so that you don't have to rewrite it in every file you need that logic. This helps to make your code more organized and less bulky with repeated logic. One clean Code principle is DRY ie Do not Repeat Yourself, which means if a code is used multiple times across a file, you turn it into a single code block or into a file and export it from that file to be used across your application.

Here are some rules you need to take note of when creating custom hooks

Never call Hooks inside loops, conditions, or nested functions.
Always use Hooks at the top level of your React component.
Never call Hooks from regular JavaScript functions.
Instead, call Hooks from React functional components or call Hooks from custom Hooks.
Make use of the "use" prefix to name your functions and the filename eg: useEffect, useState, useFetch.

What are we going to do?

We're going to utilize JSON Placeholder Fake Data API to fetch dummy data that we are going to use for our application.

When interacting with an API, we would need a library to interact with that API, for that we are going to use Axios for this.

To install Axios When using NPM, run this command on your terminal.

npm install axios

When using Yarn, run this command on your terminal.

yarn add axios

Create a Home.js file on your react app and paste the code below

// Home.js

import { useState, useEffect } from "react";
import axios from "axios";

const Home = () => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    handleGetData();
  }, []);

  const handleGetData = async () => {
    setIsLoading(true);
    try {
      const getData = await axios.get(
        "https://jsonplaceholder.typicode.com/todos"
      );

      if (getData.status == "200") {
        setData(getData.data);
        setIsLoading(false);
      }
    } catch (error) {
      setError(error);
      throw console.error(error);
    }
  };

  return (
    <>
      {isLoading && <p>Loading...</p>}
      {error && (
        <div>
          There was an Error <button onClick={handleGetData}>Try Again</button>{" "}
        </div>
      )}
      {data &&
        !isLoading &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

export default Home;

you should see this on the web page

This Home.js File does 6 basic things

Fetching the data from JSON Placeholder API.
Set that response data to a state and a loading state
Catches any error on the file and sets it to an error state.
Displays if there was an error getting the data for the user to see.
Shows the loading state for the user to see.
Displays the Data for the user to see

This is the basic functionality for pages that query an API hence the need for us to abstract this logic. On a typical API you would have different endpoints like /createAccount or /getUser and to implement it you'll have to rewrite this logic for all files. So let's abstract this into a reusable logic.

On the JSON Placeholder API, we have access to these routes, so it would make sense for us to allow our custom hook to accept any suffix link

/posts	100 posts
/comments	500 comments
/albums	100 albums
/photos	5000 photos
/todos	200 todos
/users	10 users

Step 1: Identify the Code to be reused.

It's good practice to put files that are performing similar logic into the same folder, you should have a hooks folder to hold all the custom hooks you'll create for your project. So create a hooks folder and a file called useRequest.js

Your directory should look something like this.

-src
--\hooks\useRequest.js

Let's copy the necessary re-useable logic from our index.js file into our useRequest.js file, which should look like this.

// useRequest.js

import { useState } from "react";
import axios from "axios";

const useRequest = () => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(null);
  const [error, setError] = useState(null);


  const handleGetData = async () => {
    setIsLoading(true);
    try {
      const getData = await axios.get(
        "https://jsonplaceholder.typicode.com/todos"
      );

      if (getData.status == "200") {
        setData(getData.data);
        setIsLoading(false);
      }
    } catch (error) {
      setError(error);
      throw console.error(error);
    }
  };

  return { data, isLoading, error, handleGetData };
};

export default useRequest;

Explanation of the code

  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(null);
  const [error, setError] = useState(null);

These are the states that would handle the response from the API, the loading state, and the error state.

  const handleGetData = async () => {
    setIsLoading(true);
    try {
      const getData = await axios.get(
        "https://jsonplaceholder.typicode.com/todos"
      );

      if (getData.status == "200") {
        setData(getData.data);
        setIsLoading(false);
      }
       else{
        setError("There was an error");
      }
    } catch (error) {
      setError(error);
      throw console.error(error);
    }
  };

handleGetData is an async function, here's what it does.

It first sets the loading state to true, because we want to show a loading state while our hook is calling the endpoint.
We're wrapping the main logic in a try/catch block because we want to handle the errors we might get, errors such as network errors, a request timeout or a data not found error.
The next line calls the API with axios, checks if the status is 200(ie, there was a response with data), and sets the data and loading state to false, if the error state is not 200, it means there was an error, so we handle that.

return { data, isLoading, error, handleGetData };

The return statement is important because you might not always want to make all the functions or variables accessible on your hook, so the return allows us to specify what we want to expose. Here we are exposing the response of our API call(data), loading, and error states, and handleGetData function which we explained earlier.

Step 2: How to use it

Since we're done abstracting the reusable functionality into a hook, here's how to use it.

  const { data, isLoading, error, handleGetData } = useRequest();

Just looking at this, you'll see that it's pretty similar to how you'll use the basic react hooks like useState or useEffect.

Here's how our Home.js file now looks

// Home.js

import { useState, useEffect } from "react";
import useRequest from "../../hooks/useRequest";

const Home = () => {

  const { data, isLoading, error, handleGetData } = useRequest();

  useEffect(() => {
    handleGetData();
  }, []);

  return (
    <div>
      {isLoading && <p>Loading...</p>}
      {error && (
        <div>
          There was an Error <button onClick={handleGetData}>Try Again</button>{" "}
        </div>
      )}
      {data &&
        !isLoading &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </div>
  );
};

export default Home;

We can see that we've reduced the code to virtually under 30 lines of code for us, which is a good thing, we've abstracted the logic for calling the API into a custom hook that we are going to make more re-useable now.

If you've read to this point, you already know the basics of creating custom hooks in React, what we are going to do in the next section is to make the hook accept any endpoint and base API link.

Step 3: Make the hook more reusable.

What we are going to do here is to allow our useRequest.js function to accept two arguments, ie. BASE_API and suffix.

Our BASE_API is the most common url we can find on all our endpoints.

The suffix is the different endpoints.

For example BASE_API: www.simpleapi.com, suffix: /posts, so together the full URL would look like www.simpleapi.com/posts.

Here are the changes we would be making to our useRequest.js

In your Home.js file replace const { data, isLoading, error, handleGetData } = useRequest() with const useRequest = (BASE_API, suffix) => { ...... } This just shows the function accepting the BASE_API and suffix.

In your useRequest.js replace const getData = await axios.get("https://jsonplaceholder.typicode.com/todos"); with const getData = await axios.get(BASE_API + suffix);

Implement this for Axios to correctly get the BASE_API and suffix endpoint.

Our final useRequest.js file looks like this.

// useRequest.js

import { useState } from "react";
import axios from "axios";

const useRequest = (BASE_API, suffix) => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(null);
  const [error, setError] = useState(null);

  const handleGetData = async () => {
    setIsLoading(true);
    try {
      const getData = await axios.get(BASE_API + suffix);

      if (getData.status == "200") {

        setData(getData.data);
        setIsLoading(false);

      } else {
        setError("There was an error");
      }
    } catch (error) {

      setError(error);

      throw console.error(error);
    }
  };
  return { data, isLoading, error, handleGetData };
};

export default useRequest;

A good practice is to keep your BASE_API endpoint on your .env file and your suffix on the file you want to use it on.

For example, let's say we want to create a page for comments all we need to do is to create const suffix="/comments" and use it like this

// DisplayComment.js

const BASE_API = "https://jsonplaceholder.typicode.com";
  const suffix = "/comments";

  const { data, isLoading, error, handleGetData } = useRequest(
    BASE_API,
    suffix
  );

Conclusion

In this tutorial, we created a react hook for handling custom interactions with an API, we did this because we wanted to abstract the functionalities into a separate file. This helps us to modularize our code and ensure that we don't repeat the same code in multiple files.

If you found this article helpful please like or leave a comment, share it with your friends/network who might need this, and connect with me on Linkedin, Twitter and hashnode.

How To Add Fonts In A Next 13 App

mitchel inaju — Mon, 24 Apr 2023 02:23:39 +0000

Overview

In this article, I'll show you how Nextjs 13 now allows us to optimize our fonts with the next/font package. There is no need to download the Google fonts locally and no need for CDN links.

Google Fonts

To use Google fonts in your Nextjs app, you should use the recommended next/fonts/google to load Google fonts.

For increased privacy and performance, next/font will automatically optimize your fonts (including custom fonts) and remove external network queries.

For this post, we are going to use the poppings fonts from Google.

Locate your Layout.tsx and add this code snippet, edit it to your use.

import { Poppins } from 'next/font/google';

const poppinsFont = Poppins({
  weight: '700',
  subsets: ['latin'],
  variable: '--font-poppins',
});

Make sure you use the variable configuration prop, which you will use to generate a definition for a CSS --var for each font. This would ensure that we have the best performance and flexibility.

Local Font

With the same library next/font/local you can make use of local fonts stored locally on your repository, so no need to download any extra module.

Make sure that you correctly put in the path to the locally stored font, it's fine to host it in your public directory. Remember to use the variable configuration prop, which you will use to generate a definition for a CSS --var for each font.

Add this file to your layouts.tsx file

import localFont from 'next/font/local';

  const studioPro = localFont({
    src: [
      {
        path: '../../public/font/studio-pro-bold.ttf',
        weight: '500',
        style: 'normal',
      },
      {
        path: '../../public/font/studio-pro-medium.ttf',
        weight: '400',
        style: 'normal',
      },
    ],
    variable: '--font-studio-pro',
  });

Accessing The Font

To access the font through your app, you should pass the generated variables into the wrapper class in Layout.tsx. This would ensure that the variable you passed is accessible to any parent component.

Your Layout.tsx file should look like this


import { Poppins } from 'next/font/google';
import localFont from 'next/font/local';
import React from "react";

export default function RootLayout({ children }: {children: React.ReactNode }) {
  const poppinsFont = Poppins({
    weight: '700',
    subsets: ['latin'],
    variable: '--font-poppins',
  });

  const studioPro = localFont({
    src: [
      {
        path: '../../public/font/studio-pro-bold.ttf',
        weight: '600',
        style: 'normal',
      },
      {
        path: '../../public/font/studio-pro-medium.ttf',
        weight: '400',
        style: 'normal',
      },
    ],
    variable: '--font-studio-pro',
  });

  return (
    <html lang='en'>
      <head />
      <body className={`${poppinsFont.variable} ${studioPro.variable}`}>
            {children}
      </body>
    </html>
  );
}

You should see something like this on your Chrome browser tools

Access the Font on your CSS files

Here's how to access the font in a simple css file, you can use this in your global.css file

html {
  font-family: var(--font-poppins);
}

h1 {
  font-family: var(--font-studio-pro);
}

Access the Font with Tailwind

We have made this font globally accessible, but we need a way to tell Tailwind that these fonts are now accessible.

How To use this font in Tailwind, add this to the extend object inside the theme in your tailwind.config.ts file.

export default {
  theme: {
    extend: {
      fontFamily: {
        "font-poppins": "var(--font-poppins)", 
        "studio-pro": "var(--font-studio-pro)", 
      }
    }
  }

Here's how to use the font in a component.

const SimpleComponent: React.FC = () => (
  <p className="font-poppins">
    This is with the Poppins Font
  </p>
);

export default SimpleComponent;

Final Thoughts

Thanks for reading, We've seen how easy it is to add fonts to a Nextjs app, I'll recommend using this approach to add fonts in your Nextjs app as this is the optimized way recommended by the documentation. It's time to experiment!! Looking forward to the amazing websites you'll build with Nextjs.

Connect With to me

Linkedin : https://www.linkedin.com/in/mitchel-inaju/

Twitter: https://twitter.com/mitchelinaju

dev.to: https://dev.to/inaju

Getting Started With React Hooks

mitchel inaju — Sun, 15 Jan 2023 22:00:21 +0000

What are React Hooks?

In the React 16.8 version, hooks are the new functionality. It permits the use of state and other React features without the need to create a class. In the past, you'll have to write class-based components to perform some of these methods.

Hooks are JavaScript functions that manage the state's behavior and side effects by isolating them from a component. React hooks allow you "hook into" react features and are not permitted when using class-based components.

Does React Hooks give me superpowers?

Short Answer: No

Long Answer: Hooks are not a replacement for understanding React fundamentals. Hooks instead offer a more direct API to the React concepts you are already familiar with, including props, state, context, refs, and lifecycle. Hooks also provide a fresh, potent approach to combining them.

Why should I learn about hooks?

Reuse of Stateful Logic between related or unrelated Components'
Escape the complexity of Lifecycle methods

Here's my Point " Hooks let you use more of Reacts features without classes."

Even though you're having a great feeling about hooks, it also has some rules you have to follow through

These rules are:

1. Only call Hooks at the top level

Hooks must be used at the top level of the React functions. Do not call Hooks inside loops, conditions, or nested functions.

2. Only call Hooks from React functions

You cannot call Hooks from regular JavaScript functions. Instead, you can call Hooks from React functional components and Custom Hooks

Basic React Hooks

UseState

This is the simplest hook, it's a Hook that lets you add React state to functional components without needing to transform it into a class component.

Lets look at the snippet below

import React, { useState } from 'react';  

const TapApp=()=> {  
  // Declare a new state variable, which we'll call "tap"  
  const [tap, setTap] = useState(0);  

  return (  
    <div>  
      <p>You tapped {tap} times</p>  
      <button onClick={() => setTap(tap+ 1)}>  
        Tap me  
      </button>  
    </div>  
  );  
}  
export default TapApp;

Here is the result

Let's tap the button

Maybe you're asking what's the use of the square brackets ?

const [tap, setTap] = useState(0);

The arrays on the left are called state variables, and by variables we mean you can change them to something else for our specific use case. The first state variable is the state name and the second is the function for assigning that state. So in this case tapis the variable name and setTap is the function for setting that variable name.

Other similar use cases can include the following

 const [fruit, setFruit] = useState('banana');
 const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

Another question you might have is the 0 between the parenthesis what's it for? can it be changed as well? Yes it can, it's the default value for that state

So let me explain, if you want to render a component ie. when the component first loads up the first state it would show would be the default state

If you've gotten to this part, please note that you already have a basic understanding of how useState hook works, please note that the next section is to apply what you've learnt

Simple Usecase for useState

Since we now fairly have an understanding of how the useState hook work, now let's build a simple inventory store. For this app, I'll be using tailwind to style the app, please click here to get started with tailwind for react.

    const [item, setItem] = useState();
    const [itemInventory, setItemInventory] = useState([]);

We need to set of state variables, item handles the single item while itemInventory handles an array of items(multiple items)

 const handleChange = (e) => {
    setItem(e.target.value)
  }
  const saveItem = () => {
    if (!item) return;
    if (itemInventory.includes(item)) return;
    setItem('')
    setItemInventory(prevValues => {
      return [...prevValues, item]
    }
    )
  }

handleChange function sets the single item state, it's going to be attached to the input element, while saveItem function checks if that particular item is empty and in the itemInventory array, if it's not in the array then it procedes to add that item

<div>
      <div className='flex flex-col gap-y-3 '>
        <div className='mx-auto space-y-3 mt-4'>

          <label for="fruitInput" className='text-3xl text-center'>Please enter your Items</label>
          <div className='flex space-x-2'>
            <input
              placeholder='water bottle...'
              className='w-80 p-2 px-4 border-2 border-slate-100 rounded-md focus:outline-slate-400 '
              name="fruitInput" value={item} onChange={handleChange} />
            <button onClick={saveItem} className='rounded-md w-fit p-2 bg-slate-100 hover:bg-slate-200 active:text-slate-100 '>+ Add</button>
          </div>
        </div>
        <div className='flex max-w-[1000px] flex-wrap gap-4 mx-auto mt-10'>

          {itemInventory.map((i, v) => (
            <ItemCard item={i} />
          ))}
        </div>
      </div>
    </div>

Here we set the value of the input to item and it's onChange to handleChange, we're also assigning the onClick function to the saveItem function we just created, so that when we click on the button it triggers the saveItems function that adds that particular item to the array.

We are also mapping through the itemInventory state with the ItemCard component

ItemCard.jsx

import React, { useState } from 'react';

function ItemCard({ item }) {

    const [totalNumber, setTotalNumber] = useState(0)

    const handleRemove = () => {
        if (totalNumber > 0) {
            setTotalNumber(totalNumber - 1)
        }
    }
    const handleAdd = () => {
        setTotalNumber(totalNumber + 1)
    }

    return (
        <div className='w-[300px] bg-black/[0.05] hover:bg-slate-100 h-1/3 p-10 '>
            <p className='font-bold text-2xl text-gray-700'>
                {item}
            </p>
  <p className='font-semibold text-lg text-gray-500'>Total:{totalNumber}</p>
            <div className='flex gap-2'>
                <button className='w-fit bg-gray-500 text-white p-1 px-2 rounded-md' onClick={() => handleAdd()}>Add</button>
                <button className='w-fit bg-gray-500 text-white p-1 px-2 rounded-md' onClick={() => handleRemove()}>Remove</button>
            </div>
        </div>
    )
}

export default ItemCard

ItemCard helps us to set the total number present for that particular item, so for example, I add an item called "phone" ItemCard.jsx helps us visualize the item name and also allows us to add and remove the total number present for that item.

So Let's look at the final file

Item.jsx

import React, { useState } from 'react';
import ItemCard from './ItemCard';

const FruitInventory = () => {
  const [item, setItem] = useState();
  const [itemInventory, setItemInventory] = useState([]);
  const handleChange = (e) => {
    setItem(e.target.value)
  }
  const saveItem = () => {
    if (!item) return;
    if (itemInventory.includes(item)) return;
    setItem('')

    setItemInventory(prevValues => {
      return [...prevValues, item]
    }
    )
  }
  return (
    <div>
      <div className='flex flex-col gap-y-3 '>
        <div className='mx-auto space-y-3 mt-4'>

 <label for="fruitInput" className='text-3xl text-center'>Please enter your Items</label>
          <div className='flex space-x-2'>
            <input
              placeholder='water bottle...'
              className='w-80 p-2 px-4 border-2 border-slate-100 rounded-md focus:outline-slate-400 '
              name="fruitInput" value={item} onChange={handleChange} />
            <button onClick={saveItem} className='rounded-md w-fit p-2 bg-slate-100 hover:bg-slate-200 active:text-slate-100 '>+ Add</button>
          </div>
        </div>
        <div className='flex max-w-[1000px] flex-wrap gap-4 mx-auto mt-10'>

          {itemInventory.map((i, v) => (
            <ItemCard item={i} />
          ))}
        </div>
      </div>
    </div>
  );
}
export default FruitInventory;

Result

Default State

Final Result

Final Thoughts

We can see how easy it is to apply what we just learned to a simple inventory app, you can take this knowledge and build out a todo app, or a mini e-commerce application, it's the same principles, although for that you might want to use a more robust solution for handling state.

That's all, if you want to see more details or read about the useState React Hook, please, take a look at the Official Documentation

Reach out to me

Linkedin : https://www.linkedin.com/in/mitchel-inaju/

Twitter: https://twitter.com/mitchelinaju