DEV Community: Catherine Kiiru

Consuming APIs in React (With Code Examples)

Catherine Kiiru — Sun, 29 Oct 2023 16:15:00 +0000

Consuming and rendering data from APIs is akin to knowing how to write "hello world". It's a right of passage for every developer if you plan on building scalable software solutions.

APIs are like the invisible heroes that keep applications connected to one another. Without APIs, applications would be bloated and we would not have an efficient way to borrow information or services from other applications into our own.

A web API is a medium that fetches data from a database and injects it to your application. The most popular API used in web applications is the Representational State Transfer API or commonly known as RESTful API. APIs use HTTPS request methods to interface data into your app. They're like the "key words" or protocol that access the database and return the data from the server. There are 4 common methods used by HTTP requests:

POST - sends or "posts" data to an endpoint
GET - requests or "gets" data from an endpoint
DELETE - deletes data from an endpoint
PUT - updates or "puts" values at an endpoint

Notice how each keyword describes the particular action it performs? - it's a good way to remember which request to use for a particular action.

PS: An endpoint is a unique URL that accepts requests and sends back a response in the form of data. In literal terms, it's the "end" of an API connection/

Enough of the talking let's get to the code!

Using the Fetch API

The fetch() method is a built-in API in JavaScript for handling HTTP requests. It's built-in because you don't have to install libraries to use it so you can simply call when writing code, and it will expose it's functionality. Before ES6+, XMLHttpRequest was the default way for making API requests. The Fetch API came with ES6+ to provide a more efficient and promise-based approach to handling data.

Fetch API Syntax

Fetch () - the API method built into JavaScript
Then () - the fetch method returns a promise called then().
Promise - A promise is a JavaScript object that "promises" to deliver a result from an API call.

Below is a demo on how to use the fetch API with an advice generator app. After fetching from the API, we're chaining promises where we're telling JavaScript to "Store the data we're fetching temporarily in a promise as we fetch the data, then when we get it, you can fulfil the request".

In our case, we're fetching data from the device generator API, then extracting the response to JSON data and storing it in a promise.

import "./App.css";
import Divider from "./assets/images/pattern-divider-desktop.svg";
import button from "./assets/images/icon-dice.svg";

function App() {
  const adviceNumber = document.getElementById("advice-number");
  const adviceText = document.getElementById("advice-text");

  function showAdvice () {
    fetch ("https://api.adviceslip.com/advice")
    .then(response => response.json())
    .then((data) =>data.slip)
    .then((data) => {
      adviceNumber.textContent = data.id;
      adviceText.textContent = data.advice;

    })
    .catch((error) => {
      alert(`Error ${error}`);
    })
  }

  return (
    <>
      <div className="wrapper">
        <h3 id="advice-number">Advice #117</h3>
        <p id="advice-text">
          {`"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua."`}
        </p>
        <img className="divider" src={Divider} alt="" />
      </div>
      <div className="button-container">
        <button onClick={showAdvice} id="button">
          <img className="advice-button" src={button} alt="" />
        </button>
      </div>
    </>
  );
}

export default App;

Using the fetch API and the UseEffect Hook

Another way to perform API calls is by using the Fetch API and the UseEffect hook. We'll still use the same advice generator API project, only this time we're using React's useEffect and useState hooks as well as async/await.

The useEffect allows us to perform a side-effect task of fetching and rendering random advice from an external API without affecting the functionality of our component.

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

function App() {
  const [advice, setAdvice] = useState([])

  const fetchData = async ()  => {
    const res = await fetch("https://api.adviceslip.com/advice")
    const data = await res.json()

    console.log(data)
    setAdvice(data.slip)
  }

  useEffect(() => {
    fetchData
  }, [])

  return (
    <>
      <div className="wrapper">
        <h3 id="advice-number">Advice #{advice.id}</h3>
        <p id="advice-text">
          {advice.advice}
        </p>
        <img className="divider" src={Divider} alt="" />
      </div>
      <div className="button-container">
        <button onClick={fetchData} id="button">
          <img className="advice-button" src={button} alt="" />
        </button>
      </div>
    </>
  );
}

export default App;

Using Axios and useEffect

Axios is a popular library for sending, receiving and posting HTTP requests in web applications. With Axios,the output is not too different from using the fetch API, and the fetch API will still reproduce the same results when you use Axios.

However, there are subtle differences & similarities between the two libraries:

Axios is compatible with older browser versions compared to the fetch API, which mostly works on modern browsers.
Axios and Fetch API use Promises and you can chain actions and error handlers, so you don't have to rely on callbacks too much (AKA going into callback hell)
Axios automatically parses JSON data for you, so you don't have to, compared to how you need to parse JSON responses when you use the fetch API.

Now back to our Advice generator app, this is how it looks when we use Axios:

...
import axios from "axios";


 const App = () => {
  const [advice, setAdvice] = useState([]);
  const fetchData = () => {
    axios.get("https://api.adviceslip.com/advice")
    .then((res) => {
      setAdvice(res.data.slip)
    })
  }
  useEffect(() => {
      fetchData
    }, []);

  return (
    <>
      <div className="wrapper">
        <h3 id="advice-number">Advice #{advice.id}</h3>
        <p id="advice-text">
         {advice.advice}
        </p>
        <img className="divider" src={Divider} alt="" />
      </div>
      <div className="button-container">
        <button onClick={fetchData} >
          <img className="advice-button" src={button} alt="" />
        </button>
      </div>
    </>
  );
}

export default App;

Using Tanstack Query (Among other Data Fetching Libraries)

Formerly known as React Query, Tanstack Query allows us to decouple data handling logic from components and provides flexibility for fetching, updating and caching data from various data Interfaces.

The beauty in Tanstack Query lies in it's ability to optimize performance for data heavy applications. With Tanstack Query, you get:

Data caching where data from repeat API calls are cached, reducing the number of API calls to the database, which optimizes performance.
Checks for duplications in API requests, which reduces the amount of redundant requests to the database
Automated garbage collection to free up memory.

Tanstack query is one of the data fetching libraries, you can find plenty more that are suitable for your specific use case.

The basic ingredients in a useQuery hook is a queryKey, query function (queryFn) and an object containing the state of your function (error, loading or success).

Remember the caching benefits we mentioned above? Well, The queryKey is what helps React query & refetch the specific data when you perform an API call. The queryKey acts as the "key" or point of reference to your data in the literal sense.

The query function is the function you'll use to refetch & render the data.

Below is a demo of how to use Tanstack Query in the same advice generator app:


...
import { useQuery } from "@tanstack/react-query";

 const App = () => {
  const [advice, setAdvice] = useState([]);

  const fetchData = () => {
    axios.get("https://api.adviceslip.com/advice")
    .then((res) => {
      setAdvice(res.data.slip)
      const {error, isLoading} = useQuery({
        queryKey: ["advice"],
        queryFn: fetchData,
      });

      if (isLoading) return <p>Loading...</p>
      if(error) return <p>Connection error</p>
    })
  };

  return (
    <>
      <div className="wrapper">
        <h3 id="advice-number">Advice #{advice.id}</h3>
        <p id="advice-text">
         {advice.advice}
        </p>
        <img className="divider" src={Divider} alt="" />
      </div>
      <div className="button-container">
        <button onClick={fetchData} >
          <img className="advice-button" src={button} alt="" />
        </button>
      </div>
    </>
  );
}

export default App;

This article gives you insight into what API handling entails and ways you can handle data in your application. It's a good start to understanding the differences in syntax and functionality, from here you can now manage data across different components with ease. Let me know your thoughts. Till next time!

A comprehensive Guide to Asynchronous JavaScript [With Code Examples]

Catherine Kiiru — Fri, 11 Aug 2023 14:44:02 +0000

Asynchronous programming ensures a long-running task maintains responsiveness to other events even as the task goes on. It's a form of programming that caters to functions requiring time to deliver requests to the end-users. This ensures multiple tasks and functions can run with little downtime or long wait times.

Asynchronous means "not occurring at the same time," and it applies in real life, for example, in remote jobs.

Some jobs state that they work with asynchronous communication, meaning teams don't work simultaneously and can choose different schedules and timelines.

The opposite of Asynchronous programming is synchronous programming. Synchronous means events or activities occurring at the same time. For example, remote classes that occur at the same time, regardless of time zones, or a typical 9-5 work schedule where all employees work at the same time with no flexibility.

*In JavaScript, synchronous programming means that the next line of code cannot run until the first one runs entirely. *

For example, when you console.log the statements below, synchronous JavaScript executes them in the order that you wrote the code:

console.log("i")
console.log("am")
console.log("a")
console.log("Frontend")
console.log("Developer");

The result is:

"i"
"am"
"a"
"Frontend"
"Developer"

Asynchronous JavaScript

In Asynchronous programming, functions are like people working remotely and with flexible schedules. People execute different tasks at different intervals, all while other activities are still going on without affecting the overall goals of a team or the company.

Why is an Asynchronous state necessary? For starters, you cannot control how different users interact with your programs. Your only option is to create an environment where programs can run simultaneously without negatively affecting the functionality and user experience.

Real-life application of Asynchronous JavaScript:

Making requests to servers - it can take some time to get your data requests so Asynchronous JS keeps your program running while you wait to receive a response from the server.

Enhancing application responsiveness– most applications rely on asynchronous because it can be time consuming to run single threads that wait for single tasks to run before running the next ones.

Asynchronous JavaScript allows you to break down large code blocks into smaller tasks that are easier to manipulate.

Let’s use an example of breaking down larger code blocks into smaller ones with the setTimeout function. Asynchronous sets aside the setTimeout function while the system runs the other console.log requests, then it runs the setTimeout after the 5 seconds elapse.

console.log ("i"),
console.log ("am"),
console.log ("a"),

  setTimeout (()=>{
  console.log("Frontend")
}, 5000)

console.log("Developer")

The output:

"i"
"am"
"a"
"Developer"
"Frontend"

There are three core concepts in Asynchronous JavaScript that you need to know:

Callbacks
Async/ Await
Promises

Callbacks

Callbacks "call" or nest a function within another function to be used at a later time. Callbacks are a great way of invoking and connecting multiple functions to complete a task. We'll use an example of cooking food. To do this, you need to lay out a plan and execute each step to serve your meal. A likely step-by-step scenario is:

create the recipe 2. get the ingredients 3. preparation 4. cook the meal 5. serve

Let’s create two functions: the recipe as first function and preparation as second function. Inside the recipe function, we’ll print the message “I created the recipe” and in the preparation function, we’ll print “Ingredients bought, cook and server as per the recipe”.

Next, We’ll use a callback to form a relationship between the two functions.

To do this we need to pass the (get_ingredients) argument into the first function and invoke the argument within the same function as a callback.

Every time you create the recipe, you will get the ingredients (i.e., pass the "get_ingredients" argument) to the procedure which is the . This is what a callback does. Finally, call both functions with by calling both functions. See the demo below:

//Callbacks

let recipe = (get_ingredients) =>{
  console.log("I created the recipe")
  get_ingredients ()
};

let preparation = () => {
  console.log("Ingredients bought, cook and serve as per the recipe")
};

recipe(preparation);

The output:

"I created the recipe"
"Ingredients bought, cook and server as per the recipe"

Async/Await

This is a newer way of writing Asynchronous JavaScript and a simpler way of writing promises. Async syntax uses the async keyword and can be placed before a function like the below:

async function f() { return “hello world”; }

When async is used before a function, the keyword returns a promise and also wraps non-promises.

Await syntax:

let value = await promises

The await keyword ensures JavaScript waits till a promise is settled and returns a result.

Promises

Promise, as the name suggests, represents a future state of operation that's not yet completed. It's also referred to as a proxy for the value realized later. With the food example, we are "promising" to serve a meal. Promises have four states:

Pending 2. fulfilled 3. Settled 4. Rejected

Promises were created to escape a phenomenon called “callback hell” due to the numerous function nesting you’d have to do to functions to get a result.

Async/Await is the default way to write simpler promises, and async is the keyword used. When async is used before a function, the keyword returns a promise and also wraps non-promises. The syntax looks like this:

async function f() {
  return “hello world”;
}

A typical promise function looks like:

function items( ){
   return new Promise( (resolve, reject) =>{
    // write your code here
   } )
};

But with async/await, the function above will look like this:

async function items(){
  //write your code here
};

Another distinction between promises and async/await is that promises use resolve and reject keywords to pass our arguments. However, in async/await, we use the try and catch keywords to catch errors. See the code example:

Await Keyword - the await keyword ensures JavaScript waits till a promise is settled and returns a result. Await syntax:

let value = await promises

Recap

In the article above, you've learned asynchronous JavaScript and the main concepts: callbacks, Async/Await, and promises. You've also learned about callback hell and why JavaScript evolved this concept into promises, which is an easier way to define nested functions.

Learn JavaScript Part 1: Data Types, Variables and Strings

Catherine Kiiru — Fri, 14 Oct 2022 15:53:18 +0000

This is a first of several series where I will dive into JavaScript concepts and create learner-friendly content.

To start us off, I explore the basic level of JavaScript; Data types, variables and strings. I've explained the concepts in a simple manner that's easy to understand, especially for newbies in software development. Read along!

Data Types

In Computing, data is information that represents value to a computer and can be translated in a way that's relevant to the computer. This translation converts information into a binary form that a computer can understand. There are 8 data types in JavaScript:

String - A data type that stores textual characters inside a double or single quote
*Boolean *- A type that represents a true or false value.
Object - An unordered collection of multiple data types or properties known as key value pairs. Note: The key is a string or property name, and value represents anything 4.** Null **- A primitive data type that represents the absence of value. Only has one value i.e. null.
Undefined - Represents a variable with no value assigned to it.
Bigint (Big Integer) - A data type that represents large integers not assigned a specific value.
Number - A Data type that represents integers and floating points (decimal numbers).
Symbol - A data type used to create identifiers for objects.

Seven of these data types (all except Objects) are primitive data types, meaning, they cannot be changed (are immutable) and do not contain methods or properties.

Variables

Variables allow computers to store data which is then used to perform various activities that produce a specific result. You store this data by using a label to point to the data instead of using the data type as it is.

Variables are similar to the mathematical variables x and y, symbols used to store or represent data, like a placeholder of sorts.

Before ES6, you could declare a variable by placing the keyword var in front of a variable, as seen below:

var Catherine; //correct way to declare a variable

Storing Value in JavaScript

By now, you know how to declare a variable. But what about assigning value or a data type to that variable? Storing or assigning value to a variable is what "activates" a variable so you can use it in your function. You cannot use a variable anywhere If it's not assigned value. So how do you go about it?

You assign value or a data type to a variable with the assignment operator (=). So in our variable example above, it will look like below. We assigned the String value of "my name" to Catherine. You can one variable's value to a new variable. See the example below:

var jane; // declare variable
jane = "first name"; // assign value to the variable above
var doe; //declare another variable with no value
doe = jane; // Then assign the new variable the content of the first variable. In our case, the doe variable has the same value as the jane variable.

Another example below looks like this:

var number; // Declare one variable with no value
number = 7; // assign the value 7 to the first variable
var string; // declare a second variable with no value
string = number; // assign the second variable the value from the first variable. The string variable will now have the same value, 7, as the first variable

Initializing Variables

Initializing a variable means you define a variable and its value simultaneously and in the same scope that it's declared. You are essentially specifying a value to assign to the variable before it's used across your program. You're also condensing the lines of code (see the code we wrote in the previous section) into a compact variable. See the example below:

So instead of writing an undefined variable like this:

var myCar;
myCar = "Toyota";

You now write:

var myCar = "toyota";

Note that variables are case-sensitive. The best practice is to write variables in camelCase, meaning that the first word starts in lowercase, the second word begins in uppercase, and every subsequent name you add to the variable starts in uppercase.
For example:

var myCar = "Toyota"
var yourCar = "Audi"
var anotherGoodCar = "BMW"

Uninitialized Variables

In the previous sections, we explained how to initialize a variable. With uninitialized variables, i.e., where you only declare a variable without assigning a value or data type, they automatically have an initial value called "undefined." an uninitialized variable will always return an error when you try to perform an operation on it. For example, If you perform a mathematical operation on an undefined variable, you will get a NaN error (Not a Number). If you concatenate a string with an undefined variable, you'll still get an "undefined" error.

Understanding this concept is crucial in writing clean code and debug faster whenever you encounter errors in your code.

Declaring Variables- The Difference Between Var, Let, and Const

If you've noticed, we've been declaring most variables with the "var" keyword. This was a convention used before ES6 was released. ES6, also known as ECMAScript 2015, was a significant JavaScript update released in 2015. This update marked a significant revision to most JavaScript features, one of them being how we declare variables. Before 2015, we'd declare variables with the var keyword, but with the ES6 update, we got these new keywords; let and const. But why the change? After all, the var keyword seems to be working well in the previous section of this blog.

While it's not criminal to use var, it's best practice to avoid using this keyword because it creates more complexity and bugs as your code base grows.
To understand why the var keyword is problematic, you need to understand a phenomenon called scope. Understanding scope will also help you know the difference between var, let, and const.

The Google dictionary definition for scope is "the extent of the area or subject matter that something deals with." Synonyms for scope include range, extent, width, breadth, area, or horizon.

So in JavaScript, scope is defined as the current context, area, range, or extent that values and expressions are visible to variables for execution.
Scope determines how you access variables across your code base. Scope can also be defined as the availability of variables and functions across various parts of your code: There are three scopes in JavaScript:

Global scope - variables that are declared outside a function. You can access and change global variables outside a function and in any scope.
Local (function) scope - Variables declared within a function cannot be accessed outside of it. Since they cannot be accessed or changed by another function,you can use or invoke the same variable elsewhere in your program. You can use the same variable to create a new function or scope.
*Block scope *- This is another feature introduced in ES6. Block scope restricts a variable to the block it's declared in and cannot be accessed outside the block.
**NOTE: **a block is code bounded within curly braces {}.

Variables using the var keyword can be accessed at a global or local scope. You can declare the same variable elsewhere or accidentally use it in a different scope and redefine the original function that used the same var keyword.

And because JavaScript does not throw an error when you declare the same variable more than once with the var keyword, it is difficult to identify and fix bugs in your program, which will show up when you compile your code. Do you now see why the var keyword is problematic?

So what is the next best solution? Well, ES6 introduced block scope that's facilitated by the let and const keywords - to solve the issue with the var keyword.

The const keyword, derived from the word constant, defines constant values that cannot change. Any value defined by the const keyword cannot be re-declared or updated and stays the same within the global, local, and block scope.

On the other hand, the let keyword defines variables that cannot be re-declared within a block scope BUT can be updated within its block scope.

From the definitions above, you can now see why the ES6 update to keywords was necessary because now, with the let and const keywords, you're able to bind code to their blocks without the risk of mixing up variables and creating errors in your program.

Let's use a practical example by declaring the same variable twice with the var and const keywords:

var myLocation = "Nairobi";
var myLocation = "Kisumu";
console.log (myLocation);

Result: You'll get Kisumu because both variables can still be accessed, despite declaring them twice. So JavaScript will not throw an error but will still create bugs in your code.

JavaScript
let myLocation = "Nairobi";
let myLocation = "Kisumu";
console.log (myLocation);

//You will get this error "Cannot re-declare block-scoped variable 'myLocation'". The let and const keywords protect your code from unnecessary bugs.


## Strings
In the code example above, we declared and initialized a string variable. This means that we enclosed the value or data type in double or single quotes ('' or ""). So "my name" is a string literal, a sequence of zero or more characters enclosed in single or double quotes. 

Apart from string literals, we also have template literals that are encapsulated with backticks (``) instead of single or double quotes. The ES6 update introduced template literals to replace escape characters. Though you can still use escape characters, template literals help write cleaner code and enable you to work with multiline strings.

JavaScript
var welcome = 'Hello, \'my name\' is Catherine' // Example with escape characters
var welcome = "Hello, my first name is Catherine" //example with template literals``

Here's an example of a multiline string with template literals:

`JavaScript var welcome = `This is my name. I live in Kenya and I love to code`; `

String Interpolation

Suppose you had enclosed the multiline string above with single or double quotes. In that case, you'd have gotten an "Invalid or unexpected token" error hence why we use template literals for multiline strings. Template literals also came with the ES6 update.

Interpolate is a verb that means to insert, add, embed, or introduce something. So string interpolation means to add or insert an expression, variable or different data type into a string. You're essentially adding other things into a string, without changing the essence of that string.

Template literals help you increase the functionality of a string. You can insert variables, expressions, or values into a string. The syntax for string interpolation looks like this:

A template literal (``) followed the string, a dollar sign ($), and curly brackets
with the expression in it.

String ${expression, variable or value}

Here's a practical example:

const name = "Catherine";
const country = "Kenya";
let role = "software developer";
let location = "Nairobi";

console.log (`Hello, I am ${name}, a ${role} in ${country}. I reside in ${location}.`)
// Hello, I am Catherine, a software developer in Kenya. I reside in Nairobi.

Adding Quotes within a String

There are scenarios where you'll need to add a string within another string whenever you need to fulfill specific criteria, like in a Find method and SQL strings.

Add the forward slash to escape and isolate a string, followed by the quote marks encapsulating the string you want to isolate.

const myTasks = "John went to the market \"and bought shoes\""
console.log (myTasks)
// John went to the market "and bought shoes"

Escaping characters in Strings

We use escape sequences to manipulate strings and extend string functionality without throwing errors. This is achieved by turning special characters into strings by using a backslash, followed by the symbol representing the operation you want to execute.

Types of Escape Sequences (With Examples):

\'\' - adds single quotes to a section of a string. This also works the same way with double quotes.

const myString = "Mary went to the shop.\'I bought bread and milk\', she said."
console.log (myString);
// Mary went to the shop.'I bought bread and milk', she said.

\n - This creates a new line in a string.

const myString = "Mary went to the shop.\nShe came back with bread and milk"
console.log (myString);
`Mary went to the shop.
She came back with bread and milk`

\r - This terminates a section of a string that comes before the escape sequence

const myString = "Mary went to the shop.\rShe bought bread and milk"
console.log (myString);
//She bought bread and milk

\t - adds indentation or spacing in a string

const myString = "Mary went to the shop.\tShe bought bread and milk"
console.log (myString);
// Mary went to the shop.  She bought bread and milk

In the next article, I will continue with part 2 on JavaScript concepts you need to learn in order to build you foundation before moving to more complex areas of JavaScript.