Forem: jideabdqudus

How to Build a Basic Chatbot Using TensorFlow and JavaScript

jideabdqudus — Tue, 03 Sep 2024 10:32:02 +0000

We all come across chatbots when visiting various sites, while some of them operate behind real-human interaction, others are powered by AI.

In this article, we'll walk through building a simple AI-powered chatbot using TensorFlow and JavaScript. The chatbot will recognize user commands and respond with predefined answers.

Step-by-Step Guide

Setting Up Our Project
First, we create a new directory for our project and initialize it with npm, ensure you have Node.js installed on your system before starting this step.

mkdir chatbot
cd chatbot
npm init -y

Install necessary packages

We would be using the following npm packages for our simple project:

tensorflow/tfjs: TensorFlow.js library for machine learning.
tensorflow-models/universal-sentence-encoder: Pre-trained Universal Sentence Encoder model for intent recognition.

   npm install @tensorflow/tfjs @tensorflow-models/universal sentence-encoder

Create intents

Create a file named intents.js to store intents/commands, These are categories of user inputs that the chatbot will recognize (e.g., greetings, product inquiries, order status).

// intents.js
const intents = {
  greeting: ["hello", "hi", "hey", "good morning", "good evening", "howdy"],
  goodbye: ["bye", "goodbye", "see you later", "farewell", "catch you later"],
  thanks: ["thank you", "thanks", "much appreciated", "thank you very much"],
  product_inquiry: ["tell me about your products", "what do you sell?", "product information", "what can I buy?", "show me your products"],
  order_status: ["where is my order?", "order status", "track my order", "order tracking", "order update"],
  shipping_info: ["shipping information", "how do you ship?", "shipping methods", "delivery options", "how long does shipping take?"],
  return_policy: ["return policy", "how to return?", "return process", "can I return?", "returns"],
  payment_methods: ["payment options", "how can I pay?", "payment methods", "available payments"],
  support_contact: ["contact support", "how to contact support?", "customer support contact", "support info", "customer service contact"],
  business_hours: ["business hours", "working hours", "when are you open?", "opening hours", "store hours"]
};

module.exports = { intents }

Create responses

Create another file named responses.js to store predefined responses, These are the predefined responses the chatbot will give based on the recognized intent.

// responses.js
const responses = {
  greeting: "Hello! How can I help you today?",
  goodbye: "Goodbye! Have a great day!",
  thanks: "You're welcome! If you have any other questions, feel free to ask.",
  product_inquiry: "We offer a variety of products including electronics, books, clothing, and more. How can I assist you further?",
  order_status: "Please provide your order ID, and I will check the status for you.",
  shipping_info: "We offer various shipping methods including standard, express, and next-day delivery. Shipping times depend on the method chosen and your location.",
  return_policy: "Our return policy allows you to return products within 30 days of purchase. Please visit our returns page for detailed instructions.",
  payment_methods: "We accept multiple payment methods including credit/debit cards, PayPal, and bank transfers. Please choose the method that suits you best at checkout.",
  support_contact: "You can contact our support team via email at support@example.com or call us at 1-800-123-4567.",
  business_hours: "Our business hours are Monday to Friday, 9 AM to 5 PM. We are closed on weekends and public holidays."
};

module.exports = { responses };

Loading TensorFlow and the Sentence Encoder

Create a main script file named chatbot.js and load the necessary libraries and models, we load the universal sentence encoder model asynchronously and start the chatbot once the model is loaded.

// chatbot.js
const tf = require('@tensorflow/tfjs');
const use = require('@tensorflow-models/universal-sentence-encoder');
const { intents } = require('./intents');
const { responses } = require('./responses');
const readline = require('readline');

// Load the Universal Sentence Encoder model
let model;
use.load().then((loadedModel) => {
  model = loadedModel;
  console.log("Model loaded");
  startChatbot();
});

Implementing Intent Recognition

Add a function to recognize the intent of the user's input, we embed the user input into a high-dimensional vector using the universal encoder and then track the highest similarity score based on the intent.

async function recognizeIntent(userInput) {
  const userInputEmb = await model.embed([userInput]);
  let maxScore = -1;
  let recognizedIntent = null;

  for (const [intent, examples] of Object.entries(intents)) {
    // Embedding the example phrases for each intent & Calculating similarity scores between the user input embedding and the example embeddings
    const examplesEmb = await model.embed(examples);
    const scores = await tf.matMul(userInputEmb, examplesEmb, false, true).data();
    const maxExampleScore = Math.max(...scores);
    if (maxExampleScore > maxScore) {
      maxScore = maxExampleScore;
      recognizedIntent = intent;
    }
  }
  return recognizedIntent;
}

Generating Responses

Add a function to generate responses based on the recognized intent:

async function generateResponse(userInput) {
  const intent = await recognizeIntent(userInput);
  if (intent && responses[intent]) {
    return responses[intent];
  } else {
    return "I'm sorry, I don't understand that. Can you please rephrase?";
  }
}

Implementing Chatbot Interaction

Finally, implement the interaction loop with the chatbot by setting up the interface for reading user input from the command line, prompting the user for input and generating responses accordingly:

function startChatbot() {
  const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
  });

  console.log("Welcome to the customer service chatbot! Type 'quit' to exit.");
  rl.prompt();

  rl.on('line', async (line) => {
    const userInput = line.trim();
    if (userInput.toLowerCase() === 'quit') {
      console.log("Chatbot: Goodbye!");
      rl.close();
      return;
    }

    const response = await generateResponse(userInput);
    console.log(`Chatbot: ${response}`);
    rl.prompt();
  });
}

Here is the completed code for chatbot.js :

// chatbot.js

const tf = require('@tensorflow/tfjs');
const use = require('@tensorflow-models/universal-sentence-encoder');
const { intents } = require('./intents');
const { responses } = require('./responses');
const readline = require('readline');

// Load the Universal Sentence Encoder model
let model;
use.load().then((loadedModel) => {
  model = loadedModel;
  console.log("Model loaded");
  startChatbot();
});

async function recognizeIntent(userInput) {
  const userInputEmb = await model.embed([userInput]);
  let maxScore = -1;
  let recognizedIntent = null;

  for (const [intent, examples] of Object.entries(intents)) {
    const examplesEmb = await model.embed(examples);
    const scores = await tf.matMul(userInputEmb, examplesEmb, false, true).data();
    const maxExampleScore = Math.max(...scores);
    if (maxExampleScore > maxScore) {
      maxScore = maxExampleScore;
      recognizedIntent = intent;
    }
  }

  return recognizedIntent;
}

async function generateResponse(userInput) {
  const intent = await recognizeIntent(userInput);
  if (intent && responses[intent]) {
    return responses[intent];
  } else {
    return "I'm sorry, I don't understand that. Can you please rephrase?";
  }
}

function startChatbot() {
  const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
  });

  console.log("Welcome to the customer service chatbot! Type 'quit' to exit.");
  rl.prompt();

  rl.on('line', async (line) => {
    const userInput = line.trim();
    if (userInput.toLowerCase() === 'quit') {
      console.log("Chatbot: Goodbye!");
      rl.close();
      return;
    }

    const response = await generateResponse(userInput);
    console.log(`Chatbot: ${response}`);
    rl.prompt();
  });
}

To run the chatbot, execute the chatbot.js file:
```
node chatbot.js
```

Voila! Our command output should have the chatbot running:

Conclusion

In this article, we've built a simple customer service chatbot using TensorFlow and JavaScript. While this implementation is basic, it provides a solid foundation for building more sophisticated chatbots. You can expand this project by integrating APIs using AXIOS, adding more intents and responses, or deploying it on a web platform.

Happy coding!

👉🏾 Learn more about me

👉🏾 Connect on LinkedIn

👉🏾 Subscribe to my blog

How to use Debounce in React (Lodash)

jideabdqudus — Fri, 20 May 2022 08:59:23 +0000

As a user typing in an input field or performing a particular action - an efficient method of making requests from the API is to allow for user action to be completed before interacting with the API. This prevents your UI code from needing to process every event and also drastically reduces the number of calls sent to your server.

One of the solutions to this is to use debounce/throttle, and a Lodash provides us with the debounce function. Lodash’s debounce function delays invoking a function passed into it; It can help performance in some situations.

In this article, we would be taking a look at the right implementation of debounce in a React App.

Our App

Let's take this sample React Application that contains a search input field and each time the user types a request is made that loads the data into the UI.

export default function App() {
  const [users, setUsers] = React.useState([]);

  async function search(value) {
    const res = await fetch(
      // Fake API 
      `https://api.github.com/?search=${value}`
    );
    const body = await res.json();
    return body.results.map((result) => result.name);
  }

  async function handleChange(event) {
    setUsers(await search(event.target.value));
  }

  return (
    <div className="App">
      <input
        type="search"
        placeholder="Enter your search"
        onChange={handleChange}
      />
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.firstname}</li>
        ))}
      </ul>
    </div>
  );
}

With the above code, the search request is made every time the user makes a keystroke in the input element. Ideally, we want the search request to be made only when the user has stopped typing. We can use the debounce function from Lodash to do this. The debounce function delays the processing of the key-up event until the user has stopped typing for a predetermined amount of time.

Implementing Debounce in React

npm install lodash

Create a debounce function, and call it inside of the handlechange, a timer is set to the debounced function that determines the intervals between each call.

import { debounce } from 'lodash';

const handleSearchDebounce = debounce(async (value) => {
    setUser(await search(value));
}, 300);

async function handleChange(event) {
  handleSearchDebounce(event.target.value);
}

Approach 2

With the first method, a new version of the debounced method is created on every render. We can use the useRef hook to store the debounced function across renders instead:

import { debounce } from 'lodash';

const handleSearchDebounce = React.useRef(
  debounce(async (value) => {
    setUsers(await search(value));
  }, 300)
).current;

/* We can use the `useEffect` hook to cancel the debounced function 
so whenever the component unmounts the search stops running, and
the function gets canceled */
React.useEffect(() => {
  return () => {
    handleSearchDebounce.cancel();
  };
}, [handleSearchDebounce]);

Conclusion

In this article, I showed you how to implement a debounce function in React using Lodash. However, you don’t need to use Lodash's implementation of debounce in your projects if you don’t want to. You can decide to write your own debounce function and some other libraries offer this same debounce function.

👉🏾 Learn more about me

👉🏾 Connect on LinkedIn

👉🏾 Subscribe to my blog, let's feast

Image Optimization with NextJS

jideabdqudus — Fri, 06 May 2022 00:14:50 +0000

NextJS is fast becoming my favorite frontend framework because of the endless advantages over a basic React application, one of those said benefits would be the Built-in Image Component.

In this article, we would take a look at the Image component from NextJS and learn how to use it to optimize an image in our web app.

By the end of this article, you should understand the following concepts:

Image Optimization
Using next/image
Image Props
Configuring next.config.js
Usage of the native < img > tag in NextJS

Image Optimization

Ordinarily, if you were going to make use of an image in your website/app you would do this ( assuming the image is in the same directory as the webpage it is accessing ):

<img src="./apple.jpg">

You can go further by adding an alternative text (for screen readers or when the image cannot be loaded) by doing this:

<img src="./apple.jpg" alt="Image of an apple"/>

However, this format doesn't solve image optimization aspects like image size, web formats, and responsiveness with this single usage.

NextJS offers automatic image optimization which solves all of the above as well as common tasks like internalization and routing.

The golden rule for any performance optimization simply put is giving users what they want in the shortest possible time or providing a fall-back if need be.

Hence NextJS provides us with a built-in image optimization API, next/image, a canonical form for native automatic image optimization.

Using `next/image`

The Image component in NextJS is quite similar to the native html <img>, it's an extension of this element and can be used by importing it from next/image and using it like you'd use a component with props.

import Image from 'next/image';

export default function SampleImage({source}) {
    return (
        <div>
            <Image src={source} alt='Image alt text'/>
        </div>
    )
}

The Image tag has a couple of props available to it for use asides the src and alt prop, we'd take a look at some of them

`width` and `height` prop

The width and height of the image is in pixels , when adding the width and height be sure to add the correct dimension. If a different aspect ratio is added, the image would adjust accordingly. For example if the width and height of a (1400 x 700) image gets changed to (400 x400) as shown below, it could result in a skewed image.

import Image from 'next/image';

export default function SampleImage({source}) {
    return (
        <div>
            <Image 
               src={source} 
               alt='Image alt text'
               height={400}
               width={400}
             />
        </div>
    )
}

`layout` prop

There may be times you do not know the width and height of an image, but still want it to fill the entire space while keeping its aspect ratio. In this situation, you can leave out the width and height prop on the Image component. Instead, add a prop of layout="fill". This will stretch the image to the width and the height of the parent element. When using the layout="fill" prop, it is often best to pair it with objectFit="cover". This will allow the image to maintain its aspect ratio while filling the element’s entire content box.
To achieve this, wrap the Image component as a child of a <div> element. Then add a width and height to the parent <div> element, along with giving it a position="relative".

import Image from 'next/image';

export default function SampleImage({source}) {
    const myStyle = {
       height: '400px',
       width: '400px',
       position: 'relative' 
   }
    return (
        <div style={myStyle}>
            <Image 
               src={source} 
               alt='Image alt text'
               layout='fill'
               objectFit='cover'
             />
        </div>
    )
}

This way, we can see that the image is taking up the 400-pixel square that we wanted, but the aspect ratio of the image is still in place. The parts of the image that do not fit within the parent element are clipped.

Other layout values are intrinsic, fixed, and responsive.

`loader` prop

A loader is a function returning a URL string for the image, given the following parameters (src, width, quality). Setting the loader as a prop on the Image component overrides the default loader defined in the images section of next.config.js.

import Image from 'next/image'

const sampleLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
  return (
    <Image
      loader={sampleLoader}
      src="me.png"
      alt="My Picture"
      width={500}
      height={500}
    />
  )
}

`sizes` prop

You can specify a list of image widths using the images.imageSizes property in your next.config.js file. These widths are concatenated with the array of device sizes to form the full array of sizes used to generate image srcsets.

module.exports = {
  images: {
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
}

Or by defining it in your component like,

<Image
    src={src}
    alt="image-alt-text"
    sizes="320 640 700"
    layout="responsive"
/>

Keep in mind that it is recommended to define sizes only when using a responsive or fill layout.

`quality` prop

The quality of the optimized image, is an integer between 1 and 100 where 100 is the best quality. Defaults to 75.

<Image
    src={src}
    alt="image-alt-text"
    quality={100}
    layout="fill"
/>

`priority` prop

By default, images are not prioritized (because they are lazy-loaded), meaning priority defaults to false. When true, the image is considered high-priority and preloaded.
You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element.
Should only be used when the image is visible above the fold. Defaults to false.

<Image
    src={src}
    alt="image-alt-text"
    width={500}
    height={300}
    priority
/>

`placeholder` prop

This placeholder property is used as a fallback image when an image is loading. Its possible values are blur or empty.
When empty, there will be no placeholder while the image is loading, only empty space. When blur, the blurDataURL property will be used as the placeholder. If src is an object from a static import and the imported image is .jpg, .png, .webp, or .avif, then blurDataURL will be automatically populated.

<Image
    src={src}
    alt="image-alt-text"
    width={500}
    height={300}
    placeholder="blur"
/>

`blurDataURL` prop

The blurDataURL prop is a placeholder image that loads before the src image successfully loads and must be a base64-encoded data URL image that is effectual only when used in combination with placeholder=“blur”.

<Image
  src={src}
  alt="image-alt-text"
  width={600}
  height={450}
  placeholder="blur"
  blurDataURL=”data:image/png;base64,[IMAGE_CODE_FROM_PNG_PIXEL]”
/>

`objectFit` prop

The objectFit prop defines how the image will fit into the container of it's parent, quite similar to the object-fit CSS property. It is used with layout=fill or an image with a set width and height.

<Image 
    src={src}
    alt="image-alt-text"
    layout="fill"
    objectFit="contain"
/>

It has a possible value of: contain, cover, fill, none, and scale-down.

`unoptimized` prop

When true, the source image will be served as-is instead of changing quality, size, or format. Defaults to false.

<Image
    src={src}
    alt="image-alt-text"
    width={700}
    height={450}
    unoptimized
/>

Configuring `next.config.js`

You can configure your NextJS image through the next.config.js file

`domains`

When using an external URL to load images, you must add it to domains in next.config.js

module.exports = {
    images: {
        domains: ['example.com'],
    }
}

`loader`

By default, NextJS handles image optimization but you can hand that responsibility over to a cloud provider such as Cloudinary or imgix that is more dedicated to images than just general optimization.

module.exports = {
    images: {
        loader: 'cloudinary',
        path: 'https://your-site.com/assets/images/'
    }
}

Keep in mind that when loader is set to an external image service, the domains config is ignored.

For more advanced cases of props in NextJS, there are other props that you can add to the Image component as well as configurations. Check out the full documentation here.

Conclusion

Image optimization in Next.js improves the user and developer experience but just like every other thing in programming, the Image component has some limitations one of which is its inability to adjust CSS directly. Unlike the native <img> element whereby you can pass a style prop to override its CSS. The NextJS image component doesn't support the style property at all. Hence to style the source image, name it with a className then target it with your CSS.

<Image
    src={src}
    alt="image-alt-text"
    width={700}
    height={450}
    className="myImage"
/>

P.S: Next.js forces using their component instead of the native <img> tag by including the corresponding linter check to the app build process. So if you're going to make use of the <img> tag in a NextJS application you'd add the following to disable the check

// eslint-disable-next-line @next/next/no-img-element
 <img
     src={src}
     alt='myImg'
     className='myImage'
 />

Or by adding "@next/next/no-img-element": "off" in the .eslintrcconfig file.

I hope you enjoyed reading this as much as I enjoyed writing it and would be building your NextJS app as soon as possible.

Resources used:

👉🏾 Learn more about me

👉🏾 Connect on LinkedIn

👉🏾 Subscribe to my blog, let's feast

Fetching data in React: Quick guide

jideabdqudus — Fri, 01 Oct 2021 01:04:59 +0000

Fetching data from an API either from an external source or from the Backend of your application can be done in many ways.

In this Quick guide, I would show you how to fetch data in a react app by making an HTTP request to a REST API using 4 different patterns.

Before I begin, let’s have a refresher on what REST APIs are:

What is a REST API?

A REST API (also known as RESTful API) is an application programming interface (API or web API) that conforms to the constraints of REST architectural style and allows for interaction with RESTful web services. REST stands for “REpresentational State Transfer”.

In this guide, we would be making use of the Github REST API and its sample response looks like this:

{
"login": "jideabdqudus",
"id": 45945474,
"node_id": "MDQ6VXNlcjQ1OTQ1NDc0",
"avatar_url": "https://avatars.githubusercontent.com/u/45945474?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/jideabdqudus",
"html_url": "https://github.com/jideabdqudus",
"followers_url": "https://api.github.com/users/jideabdqudus/followers",
"following_url": "https://api.github.com/users/jideabdqudus/following{/other_user}",
"gists_url": "https://api.github.com/users/jideabdqudus/gists{/gist_id}",
"starred_url": "https://api.github.com/users/jideabdqudus/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/jideabdqudus/subscriptions",
"organizations_url": "https://api.github.com/users/jideabdqudus/orgs",
"repos_url": "https://api.github.com/users/jideabdqudus/repos",
"events_url": "https://api.github.com/users/jideabdqudus/events{/privacy}",
"received_events_url": "https://api.github.com/users/jideabdqudus/received_events",
"type": "User",
"site_admin": false,
"name": "Jide Abdul-Qudus.",
"company": null,
"blog": "www.abdulqudus.com",
"location": "Lagos, Nigeria.",
"email": null,
"hireable": true,
"bio": "Software Engineer.",
"twitter_username": null,
"public_repos": 57,
"public_gists": 0,
"followers": 12,
"following": 0,
"created_at": "2018-12-17T15:57:35Z",
"updated_at": "2021-04-06T20:48:07Z"
}

Whenever a GET request is made to this (api.github.com/users/jideabdqudus) endpoint it returns this Javascript Object as its response & we can decide to use this data in our application.

Fetching data using the Fetch API

The Fetch API is an inbuilt JavaScript method for getting resources from a server or an API endpoint. It s a tool that’s built into most modern browsers on the window object (window.fetch) and enables us to make HTTP requests very easily using JavaScript promises.

To make a simple GET request with fetch we just need to include the URL endpoint which is a compulsory argument. It returns a promise that points to the response from the request. We want to make this request once our React component has mounted hence we would be making use of a Hook called useEffect for functional-based components or componentDidMount for class-based components.

import React, { useState, useEffect } from "react";
export default function App() {

  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("https://api.github.com/users/jideabdqudus")
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        throw response;
      })
      .then((data) => {
        setData(data);
      })
      .catch((error) => {
        console.error("Error fetching data: ", error);
        setError(error);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  if (loading) return "Loading...";
  if (error) return "Error!";
  return (
    <div style={{ textAlign: "center" }}>
      <img src={data.avatar_url} alt="Avatar" height="100" />
      <p>Name: {data.name}</p>
      <p>Bio: {data.bio}</p>
      <p>Username: {data.login}</p>
      <p>Location: {data.location}</p>
      <p>Public Repos: {data.public_repos}</p>
    </div>
  );
}

In the code above, we have created a very simple functional component that makes a fetch request once the component gets mounted and sends back the response to us in the data state.

Within the useEffect we declare the API endpoint inside of our fetch function, the .then() callback, was used to see if the response was okay (response.ok). We call back a response as JSON data if the response is ok.

If it’s not an okay response, we assume there was an error making the request. Using fetch, for us to handle the errors, we throw response as an error for it to handled by our catch callback.

Here in our example, we are putting our error data in state with setError. If there's an error we return the text "Error!".

The .finally() callback is a function that is called when our promise has resolved successfully or not. In it, we set loading to false, so that we no longer see our loading text.

Instead we see either our data on the page if the request was made successfully, or that there was an error in making the request if not.

How to Fetch Data in React Using Axios

The second pattern is by making use of Axios. Axios is an easy to use promise-based HTTP client for the browser and node.js. With Axios, we get the ability to intercept and cancel request, it also has a built-in feature that provides client-side protection against cross-site request forgery.

Axios is a React/Javascript library, so for us to use it in our app we would need to install it first.

npm install axios or yarn add axios

After which we import it at the top of the component that it would be used in. Making HTTP request with Axios is quite easy, and it’s one of the most popular ways of fetching data in React. We would be converting the previous Fetch example to an axios request.

import React, { useState, useEffect } from "react";
import axios from "axios";
export default function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    axios("https://api.github.com/users/jideabdqudus")
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        console.error("Error fetching data: ", error);
        setError(error);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  if (loading) return "Loading...";
  if (error) return "Error!";
  return (
    <div style={{ textAlign: "center" }}>
      <img src={data.avatar_url} alt="Avatar" height="100" />
      <p>Name: {data.name}</p>
      <p>Bio: {data.bio}</p>
      <p>Username: {data.login}</p>
      <p>Location: {data.location}</p>
      <p>Public Repos: {data.public_repos}</p>
    </div>
  );
}

What Axios enables us to do is to use the exact same promise syntax as fetch — but instead of using our first then callback to manually determine whether the response is okay and throw an error, Axios takes care of that for us.

Fetch Data in React Using `async / await` syntax

In ES7, it became possible to resolve promises using the async / await syntax. Async/await is a relatively new way to write asynchronous code in Javascript.

The benefit of this is that it enables us to remove our .then(), .catch(), and .finally() callbacks, promises andsimply get back our asynchronously resolved data as if we were writing synchronous code without promises altogether.

Why async/await ? Well, simply put, async/await allows us to write asynchronous code in a synchronous manner. The one thing you need to know about async functions is that; they always returns a promise.

We have to be aware of the fact that when we use useEffect the effect function (the first argument) cannot be made an async function.

To create an async function all we need to do is add the async keyword before the function definition, we would be converting our previous example to an async/await syntax:

import React, { useState, useEffect } from "react";
import axios from "axios";
export default function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    getData();
  }, []);

  async function getData() {
    await axios("https://api.github.com/users/jideabdqudus")
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        console.error("Error fetching data: ", error);
        setError(error);
      })
      .finally(() => {
        setLoading(false);
      });
  }

  if (loading) return "Loading...";
  if (error) return "Error!";
  return (
    <div style={{ textAlign: "center" }}>
      <img src={data.avatar_url} alt="Avatar" height="100" />
      <p>Name: {data.name}</p>
      <p>Bio: {data.bio}</p>
      <p>Username: {data.login}</p>
      <p>Location: {data.location}</p>
      <p>Public Repos: {data.public_repos}</p>
    </div>
  );
}

In summary, async/await is a cleaner syntax to write asynchronous Javascript code. It enhances readability and flow of your code.

Things to keep in mind while using async/await:

Async functions return a promise.
Await can only be used inside an async block.
Await waits until the function(“promise”) resolves or rejects.

How to Fetch Data in React Using a Custom React Hook (useFetch)

Over time, you may realize that it gets a bit tedious and time-consuming to keep writing the useEffect hook with all of its boilerplate within every component in which you want to fetch data.

To cut down on our reused code, we can use a custom hook as a special abstraction, which we can write ourselves from a third party library (like we are here, using the library react-fetch-hook).

useFetch is an isomorphic fetch hook. That means it works with SSR (server side rendering).

A custom hook that makes our HTTP request allows us to make our components much more concise. All we have to do is call our hook at the top of our component.

import React from "react";
import useFetch from "react-fetch-hook"

export default function App() {
  const { isLoading, error, data } = useFetch("https://api.github.com/users/jideabdqudus");
  if (isLoading) return "Loading...";
  if (error) return "Error!";

  return (
    <div style={{ textAlign: "center" }}>
      <img src={data.avatar_url} alt="Avatar" height="100" />
      <p>Name: {data.name}</p>
      <p>Bio: {data.bio}</p>
      <p>Username: {data.login}</p>
      <p>Location: {data.location}</p>
      <p>Public Repos: {data.public_repos}</p>
    </div>
  );
}

Conclusion

The 4 different patterns shown above are great ways of consuming APIs but fetch is mainly used when building relatively small applications and Axios/useFetch when building large applications for scalability reasons.

I hope you enjoyed reading this guide, I’ll be happy to answer any comment or questions you leave down below!

Check out more articles on my website: blog.abdulqudus.com

Forem: jideabdqudus

How to Build a Basic Chatbot Using TensorFlow and JavaScript

Step-by-Step Guide

Conclusion

How to use Debounce in React (Lodash)

Our App

Implementing Debounce in React

Approach 2

Conclusion

Image Optimization with NextJS

Image Optimization

Using next/image

width and height prop

layout prop

loader prop

sizes prop

quality prop

priority prop

placeholder prop

blurDataURL prop

objectFit prop

unoptimized prop

Configuring next.config.js

domains

loader

Conclusion

Fetching data in React: Quick guide

Fetching data using the Fetch API

How to Fetch Data in React Using Axios

Fetch Data in React Using async / await syntax

How to Fetch Data in React Using a Custom React Hook (useFetch)

Conclusion

Using `next/image`

`width` and `height` prop

`layout` prop

`loader` prop

`sizes` prop

`quality` prop

`priority` prop

`placeholder` prop

`blurDataURL` prop

`objectFit` prop

`unoptimized` prop

Configuring `next.config.js`

`domains`

`loader`

Fetch Data in React Using `async / await` syntax