DEV Community: Bolaji Bolajoko

RAG Implementation with LangChain

Bolaji Bolajoko — Sat, 07 Dec 2024 06:22:10 +0000

Retrieval Augmented Generation (RAG) is a process where we augment the knowledge of Large Language Model (LLM). A regular LLMs are trained on a specific datasets and the knowledge of this LLMs are cut-off at some point in time.

RAG enables the introduction of additional knowledge-based information into an LLM to provide more accurate, current, or specific information.

How RAG Works

RAG works by retrieving relevant information from a database using a query generated by the LLM. This information is then added to the LLM's input, helping it produce more accurate and context-aware responses.

The retrieval process typically relies on a semantic search engine, which uses embeddings stored in vector databases along with advanced ranking and query rewriting to ensure the results align with the query and address the user's needs.

Concepts

Indexing

Indexing is the process of collecting and loading data from a source and processing it for further use.

Here are the steps used for Indexing data

Load / Extract data: We need to load the data from an external source such as database, local files, webpages, API etc. LangChain uses Document Loader for this process.
Split: We splits data into smaller chunks using Text Splitters. This stage is necessary to enable LLM retrieve and process data more effectively. For example OpenAI GPT model has a limit number of token they can process in a single input (e.g 4000 to 1600 tokens). Splitting documents ensures that the chunks remain within these token limits, enabling efficient processing without truncation or errors.
Store: After chunking the document, the splits are stored and indexed for searching. This is accomplished using a vector store and an embedding model. LangChain provides VectorStore functionality and integration with various text [Embedding models.]

Image Courtesy LangChain website

Retrieval and Generation

Retrieval: The system uses the user's input to search for and retrieve related records/splits from the store.
Generation: An LLM combines the user's input with the retrieved information, integrating external data with its training data.

Image Courtesy LangChain website

Quick Overview

RAG (Retrieval-Augmented Generation) implementation involves loading documents from external sources, which are then refined through processes like splitting or chunking. Each chunk is embedded and stored in a vector database to enable efficient search and retrieval.

During the retrieval and generation stage, relevant records are fetched from the vector database. These retrieved chunks are combined with the user's prompt and processed by the language model. The LLM generates an output that integrates the user's query, the augmented data, and its pre-trained knowledge.

Personal Profile Chatbot

In this writing we are going to build a personal Q&A personal chatbot, where we feed LLM with our resume and we can ask questions based on the resume we’ve provided it with.

Pre-requisite:

Knowledge of Expressjs
Express.js server setup

Installation:

Here are LangChain packages we need for our project

npm i langchain @langchain/core @langchain/community

Picking a LLM model

This implementation uses "llama3-8b-8192" model from Meta via the Groq.

Groq is a company that offers fast AI inference, powered by LPU™ AI inference technology which delivers fast, affordable, and energy efficient AI. You can sign up ****to obtain your API key. You can choose any model you desire in the playground.

LangChain provides a consistent interface for working with chat models from different providers while offering additional features for monitoring, debugging, and optimizing the performance of applications that use LLMs.

With the right LLM choice out of the way, the next step is to install the chat model interface, which in our case ChatGroq

npm i @langchain/groq

Add your API key to the environment variable

GROQ_API_KEY="my_groq_api_key"

Create a new file model.js

import { ChatGroq } from "@langchain/groq";

// Now we can instantiate our model object and generate chat completions:
const model = new ChatGroq({
  apiKey: process.env.GROQ_API_KEY,
  model: "llama3-8b-8192",
  temperature: 0.9
});

export default model;

Personal information details:

To train the LLM on our personal information, we need some data we can feed to the LLM, so we can perform some inferences based on the data. In my own case I used my resume PDF file I downloaded from LinkedIn. Create a new folder called public and add the PDF document into the assets dir.

In the src dir. you can create a chat.controller.js in the controller dir.

├── src
│   ├── controller
│   │   ├── chat.controller.js
│── public
│   ├── assets
│   │   ├── my_profle.pdf

chat.controller.js

import { WebPDFLoader } from "@langchain/community/document_loaders/web/pdf";
import fs from "fs/promises";
import path from "path";

import { RecursiveCharacterTextSplitter } from "langchain/text_splitter";
import { MemoryVectorStore } from "langchain/vectorstores/memory";
import embeddings from "../lib/embeddingModel.js";
import { ChatPromptTemplate } from "@langchain/core/prompts";
import { createStuffDocumentsChain } from "langchain/chains/combine_documents";
import model from "../lib/model.js";

export default async function myProfile(req, res) {
  const profilePdfPath = path.join(
    process.cwd(),
    "public",
    "assets",
    "profile.pdf"
  );

  const buffer = await fs.readFile(profilePdfPath);
  const profileBlob = new Blob([buffer], { type: "application/pdf" });

  const loader = new WebPDFLoader(profileBlob, {
    parsedItemSeparator: "" // handle extra white-space in the document
  });
  const textSplitter = new RecursiveCharacterTextSplitter({
    chunkSize: 1000,
    chunkOverlap: 200
  });

  try {
    const docs = await loader.load();
    const splits = await textSplitter.splitDocuments(docs);

    const vectorStore = await MemoryVectorStore.fromDocuments(
      splits,
      embeddings
    );
    const retriever = vectorStore.asRetriever();

    const prompt = ChatPromptTemplate.fromTemplate(
      `You are an assistant for question-answering tasks related to Bolaji Bolajoko profile information. Use the following pieces of retrieved context to answer the question. 
        If you don't know the answer, just say that you don't know. Use three sentences maximum and keep the answer concise.

        Question: {question}
        Context: {context}`
    );
    const llm = model;
    const ragChain = await createStuffDocumentsChain({
      llm,
      prompt
    });
    const retrievedDocs = await retriever.invoke("What are his experience?");
    const message = await ragChain.invoke({
      question: "Who's Bolaji Bolajoko?",
      context: retrievedDocs,
    });
    return res.status(200).json({ success: true, message: message });
  } catch (error) {
    res.status(500).json({ success: false, message: "internal server error" });
  }
}

Detailed Walkthrough

Now, let’s go through each step and how the code above works for better understanding.

1. Indexing: Load

We need a way to load our documents which will be use to train the LLM. In the code above we used DocumentLoaders which is an object that help us to load contents from a source. They return a list of Document, that contains some pageContents (string) and metadata (Record<string, any>).

In our code we used WebPDFLoader which is one of the DocumentLoaders provided by LangChain.

WebPDFLoader accepts the PDF file as a blob, which was created via the node.js Blob API by passing the buffer version of the file, reading the entire contents using fs module.

We can view the contents and Metadata of the documents

const docs = await loader.load();

// page content
console.log(docs[0].pageContent) // Bolaji Bolajoko full-stack software developer...
console.log(docs[0].metadata)

/**page metadata
pdf: {
    version: '1.10.100',
    info: {
      PDFFormatVersion: '1.4',
      IsAcroFormPresent: false,
      IsXFAPresent: false,
      Title: 'Resume',
      Author: 'LinkedIn'
  **/
  // number of chracters
  console.log(docs[0].pageContent.length) // 1612

2. Indexing: Split

Splitting texts into smaller chunks in an important step in RAG implementation. Text splitting comes with a lots of advantages such easy context retrieval, managing token limits, scalability and more.

To handle this we splits our Document into chunks, so we can embed and store the embedded vectors in a VectorStore.

In our code we used the RecursiveCharacterTextSplitter to splits the Document into 1000 character long and and overlapping of 200. A TextSplitter is an object that splits Document into smaller chunks

const textSplitter = new RecursiveCharacterTextSplitter({
    chunkSize: 1000,
    chunkOverlap: 200
})

The chunkSize specifies the number of characters each text chunk will contain, in this case, 1000 characters per chunk. The chunkOverlap defines the number of characters from the previous chunk to include at the beginning of the next chunk, ensuring context continuity.

const splits = await textSplitter.splitsDocument(docs) // returns Document<Record<string, any>>[]
console.log(splits.length) // 3
console.log(splits[0].pageContent.length) // 966

3. Indexing Store

After splitting our documents into chunks we need a way to index and store the chunks so that we can search and retrieve the relevant data. For us to store each content of the document split, we need to embed chunked texts and store it in a vector store or vector database. (Embedding is the splitting of text document into vector). *Check my blog post on Embedding.*

When we want to search for a similar text in a vector database, we take our prompt query, embed it and perform a similarity search on the embedded vectors in the vector database. We used a cosine similarity search to measure the angle between the vectors to get similar vector in the vector database.

We can embed and store the vectors using Memory vector store and GoogleGenerativeAIEmbeddings model.

embedding.js

import { GoogleGenerativeAIEmbeddings } from "@langchain/google-genai";
import { TaskType } from "@google/generative-ai";

export const embeddings = new GoogleGenerativeAIEmbeddings({
  model: "text-embedding-004", // 768 dimensions
  taskType: TaskType.RETRIEVAL_DOCUMENT,
  title: "Document title",
  apiKey: process.env.GOOGLE_KEY
});

import embeddings from "../lib/embeddingModel.js";

const vectorStore = await MemoryVectorStore.fromDocuments(
    splits,
    embeddings
)

Vector stores

Vector stores are specialized data stores that enables indexing and retrieving information based on vector representation. This vectors are called embeddings, they capture the semantic meaning of data that has been embedded.

LangChain provides some standard interface of working with vector stores, allowing users to switch between different vector store implementations. The interface consists of basic methods of writing, deleting and searching of documents in a vector store.

In our own case we used the MemoryVectorStore an in-memory vector store provided by LangChain, that stores embeddings in-memory and does an exact linear search for the most similar embeddings.

MemoryVectorStore accepts an embedding model and the method fromDocuments helps to embed the documents with an embedding model and add it to the store.

Moving Forward

With the indexing pipeline out of the way, the next approach is to query for similar embedding by doing a similarity search on our query against the embeddings we have in the store, to generate some response using LLM.

4. Retrieval and Generation

a. Retriever

For us to retrieve a similar semantic relationship between the embeddings we need to take the user’s question or query, perform a similarity search on the embeddings we have in the store, then we take user’s initial prompt and combine it with our search result to provide more context with the LLM

In addition to the VectorStore capabilities, it also provides us a Retrieval system which performs a similarity search on the embeddings in the VectorStore. A VectorStore and can easily be turned into a retriever system by VectorStore.asRetriever().

const retriever = vectorStore.asRetriever({
  k: 2, // number of document to retrieve per search query: default is 4
  searchType: "similarity", // search approach "similarity" | "mmr": default is "similarity" 
});
const retrievedDocument = await retriever.invoke("Past experience?");

console.log(retrivedDocument.length) // 2
console.log(retrievedDocument[0].pageContent) // Bolaji Bolajoko is a full-stack web developer with expertise in...

b. Generate

Before we move any further, let’s pick our chat model that we will be using to generate the response.

In our example, we are using the the Groq as our model. Install this Groq package:

npm i @langchain/groq

Obtain your API key by sign up with Groq

llmModel.js

import { ChatGroq } from "@langchain/groq";

const llmModel = new ChatGroq({
  apiKey: process.env.GROQ_API_KEY,
  model: "llama3-8b-8192",
  temperature: 0.9,
});

export default llmModel;

Now, let’s create our prompt template using ChatPromptTemplate.

const prompt = ChatPromptTemplate.fromTemplate(
  `You are an assistant for question-answering tasks related to Bolaji Bolajoko profile information. Use the following pieces of retrieved context to answer the question. 
        If you don't know the answer, just say that you don't know. Use three sentences maximum and keep the answer concise.

        Question: {question}
        Context: {context}`
);

ChatPromptTemplate: This is a class that helps you define and manage the structure of a prompt for a chat model. It makes it easier to fill in dynamic parts of the prompt with actual data when sending it to the model.
fromTemplate Method: The fromTemplate method allows you to create a prompt template from a string. The string can have placeholders (e.g., {question}, {context}) that will be replaced with actual values at runtime.

import model from "../lib/model.js";

const llmModel = model;
const ragChain = await createStuffDocumentsChain({
      llmModel,
      prompt
});

The purpose of the code above is to generate answers by combining the retrieved context with the question.

const retrievedDocs = await retriever.invoke(query);

    // generate message from the prompts
const message = await ragChain.invoke({
      question: query, // "What's are his past experience?",
      context: retrievedDocs,
});
return res.status(200).json({ success: true, message: message });

We generate the answers by passing our question query (e.g What are his past experiences)

retrievedDocs is the relevant chunk of data obtained from the VectorStore via similarity search.

Then we return the message has response to the client.

Conclusion

RAG implementation with LangChain provides a powerful way to enhance LLM capabilities by incorporating external knowledge sources. This implementation demonstrates how to:

Create an effective indexing pipeline for document processing
Implement efficient vector storage and retrieval systems
Generate contextually relevant responses using LLMs

The combination of document loading, text splitting, vector storage, and retrieval systems enables the creation of sophisticated applications that can understand and respond to queries with both general knowledge and specific context-aware information.

Key benefits of this approach include:

Enhanced accuracy through contextual awareness
Ability to incorporate current or domain-specific information
Scalable architecture for handling various document types
Flexible implementation that can be adapted for different use cases

For production implementations, consider:

Implementing proper error handling
Adding caching mechanisms for frequently accessed data
Monitoring system performance and response times
Regular updates to the knowledge base

This implementation serves as a foundation that can be extended and customized based on specific application requirements and use cases.

Getting Started with AI Development: My Journey with Embeddings and Vector Databases

Bolaji Bolajoko — Mon, 16 Sep 2024 16:06:09 +0000

As a web developer, I’ve always been intrigued by AI development. I had wanted to explore it for quite a while but never gave myself the chance to dive in. Part of me was curious and eager to learn, but another part of me was lazy, and I kept procrastinating. Last weekend, I finally decided to give it a try. I added it to my weekend to-do list because if it’s not on the list, I know it won’t get done.

I started by doing a simple Google search on "How to get started with AI development," but I wasn’t satisfied with the results and articles I came across. However, I remembered hearing terms like "embeddings" and "vector databases" from Per Bogen, the co-founder of Scrimba, during a podcast interview. These concepts stood out in my mind as something I should explore further.

Before my Google search, Scrimba was the first resource that came to mind. I browsed their AI Engineering Path, which includes lots of interesting topics and projects. If you're interested in learning about AI Engineering, I strongly recommend checking it out. However, I didn’t take the course myself because I couldn’t afford the subscription.

It All Started with Embeddings and Vector Databases

Embeddings

Embeddings are a technique in machine learning (ML) where data is transformed into vector representations. A vector, in this context, is a mathematical object that represents data as a list of numbers.

Embeddings allow high-dimensional data such as images, videos, or text to be encoded in a lower-dimensional space. In this space, similar items are represented by vectors that are close to each other.

Let’s take an example of using a simplified word embedding model with 5 dimensions to represent words. Here's how different words might be represented:

"cat": [0.2, 0.5, -0.3, 0.1, 0.4]
"dog": [0.3, 0.4, -0.2, 0.2, 0.3]
"fish": [-0.1, 0.2, 0.5, -0.3, 0.1]
"car": [-0.4, -0.2, 0.1, 0.5, -0.3]

Notice how the vectors for "cat" and "dog" are similar, with only slight differences, compared to "cat" and "car." There are various methods for calculating the distance between vectors using machine learning embedding models, which we’ll explore further, including creating our own metrics from scratch.

As discussed, embeddings can be performed on various types of data—images, video, text, and user data. For this article, I will focus on text data, using examples to demonstrate how it works.

Why Do We Need Embeddings?

Consider a food app that helps users learn how to prepare different dishes. Embeddings can filter out irrelevant queries like “Top 5 movies of all time,” ensuring that the app stays focused on its purpose—food-related content.

How Embeddings Help with Query Filtering

When a user enters a query, embeddings can represent the meaning of that query as a vector in high-dimensional space. A machine learning model then compares this vector with vectors of known food-related queries (e.g., recipes or cooking instructions). If the similarity score between the user’s query and the food-related records is low, the system can flag it as irrelevant and provide a response like, “Please ask food-related questions.”

Vector Databases

To provide accurate responses to user queries, we need pre-defined related data stored somewhere. This is where vector databases come into play. A vector database is a specialized database used to store and retrieve high-dimensional vectors. Some of the core benefits include fast similarity searches, clustering, and retrieval based on distance metrics like cosine similarity, Euclidean distance, or dot product. Some popular vector databases include:

Pinecone
FAISS (Facebook AI Similarity Search)
Milvus
Vespa
Weaviate

How Embeddings and Vector Databases Work Together

When you generate embeddings (vectors) from an ML model, these vectors can be stored in a vector database. The vector database then allows you to:

Search for similar embeddings: You can search for vectors that are close to a given query vector. For example, if a user inputs a food-related query, you can retrieve the closest vectors representing recipes or cooking instructions from the database.
Semantic search: Instead of exact keyword matching, embeddings allow you to search for semantically similar content. For example, if the query contains “How do I grill a steak?”, the search may return results related to grilling or cooking, even if the exact words aren’t used.
Clustering and classification: You can group similar data points together. For example, food-related vectors can be grouped in one cluster, while movie-related vectors can be grouped separately.

The vector with the highest similarity score can also be sent to a Large Language Model (LLM) API (like OpenAI or Gemini) for an even more robust response.

To use any of the vector databases mentioned above, you can visit their official websites and follow their setup documentation. In this example, I’ll be using an array to store our data, allowing us to see how things work, especially with our metric. If you’re using a vector database service, the metric calculation options are usually provided on the dashboard.

Project: The Chef

In this project, we’ll build a Node.js app that filters a given query based on predefined vectors from a list.

Project setup:

//set up node.js app
npm init
// install tensorflow and embedding model USE (universal-sentence-encoder)
npm install @tensorflow/tfjs @tensorflow-models/universal-sentence-encoder

Read more on (https://www.tensorflow.org/hub/tutorials/semantic_similarity_with_tf_hub_universal_encoder)

Here is how our workflow is going to look like:

Generate embedding
Store setup (Insert embedding)
Cosine similarity (metric measurement)
Query Embedding

We will be using USE to generate embeddings for our text data

generateEmbedding.js


import use from "@tensorflow-models/universal-sentence-encoder";
import '@tensorflow/tfjs-backend-cpu'

// description function to generate embedding for a given text
export async function generateEmbedding(text){
   const model = await use.load(); // load the model
   const embeddings = await model.embed([text]); // generate embedding for the input text
   return embeddings.arraySync()[0] // returns the first embedding in array format
}

storeSetup.js

import { generateEmbedding } from "./generateEmbeddings.js";

const embeddingStore = [];

// add embeddings to the store
export function addEmbedding(id, text, embedding) {
  embeddingStore.push({ id, embedding, text });
}

// get all embedding from the store
export function getEmbeddings() {
  return embeddingStore;
}

// insert embedding
export async function insertEmbedding(id, text) {
  const embedding = await generateEmbedding(text); // generate embeddings with the input text
  addEmbedding(id, text, embedding); // store the embedding along with associated text
  console.log(`Insert embedding for: "${text}"`);
}

metric.js
We will use cosine similarity to compare the query embedding with the stored embeddings to find the closest matches. Cosine similarity is a common method for comparing vectors.

export function cosineSimilarity(vecA, vecB){
    const dotProduct = vecA.reduce((sum, a, i) => sum + a * vecB[i], 0)
    const normA = Math.sqrt(vecA.reduce((sum, a) => sum + a * a, 0))
    const normB = Math.sqrt(vecB.reduce((sum, b) => sum + b * b, 0));

    return dotProduct / (normA * normB)
}

cosine_similarity(A,B)=A.B/∥A∥∥B∥

If you’re interested on how cosine similarity work kindly drop a comment will do my best to explain much better in the comment section.

queryEmbedding.js

import { generateEmbedding } from "./generateEmbeddings.js";
import { getEmbeddings } from "./storeSetup.js";
import { cosineSimilarity } from "./utils/metrics.js";

// function to query for the most similar embedding to a given user query
export async function queryEmbedding(userQuery){
    const queryEmbedding = await generateEmbedding(userQuery); // generate embedding for user query
    const embeddings = getEmbeddings(); // retrieve all stored embedding

        // calculate similarity score for each embedding
    const results = embeddings.map(entry => ({
        id: entry.id,
        text: entry.text,
        similarity: cosineSimilarity(queryEmbedding, entry.embedding)
    }));

        // sort similarity with the highest vector first
    results.sort((a, b) => b.similarity - a.similarity);

        // return top 5 similar result
    return results.slice(0, 5)
}

index.js

import { queryEmbedding } from "./lib/queryEmbedding.js";
import { insertEmbedding } from "./lib/storeSetup.js";

(async () => {
  await insertEmbedding("1", "How to make pizza?");
  await insertEmbedding("2", "How to bake a cake?");
  await insertEmbedding("3", "What do I need to bake a cake?");
  await insertEmbedding("4", "How to bake a cookie");

    // query for similar question
  const userQuery = "What are cake ingredients?";
  const results = await queryEmbedding(userQuery);

  console.log(`Query: "${userQuery}"`);
  console.log("Most similar results:");
  results.forEach((result) => {
    console.log(`-[${result.similarity.toFixed(4)}] ${result.text}`);
  });

  console.log("The highest score: ");
  // you can get the text with the highest vector similarity and send to a LLM API
  // for more robust response.
  console.log(`${results[0].similarity.toFixed(4)} - ${results[0].text}`);
})();
// if your device is running on cpu this might take a while to process

output

Insert embedding for: "How to make pizza?"
Insert embedding for: "How to bake a cake?"
Insert embedding for: "What do I need to bake a cake?"
Insert embedding for: "How to bake a cookie"
Query: "What are cake ingredients?"
Most similar results:
-[0.7664] What do I need to bake a cake?
-[0.7153] How to bake a cake?
-[0.5386] How to make pizza?
-[0.4366] How to bake a cookie
The highest score:
0.7664 - What do I need to bake a cake?

Conclusion

Embeddings and vector databases offer powerful ways to process and search high-dimensional data, enabling AI applications to perform tasks like semantic search and query filtering with impressive accuracy. By understanding these concepts and applying them in simple projects, you can unlock a wide range of possibilities in AI development. This is just the beginning—there’s much more to explore as you continue your journey into the world of machine learning and artificial intelligence.

React useOptimistic: Harnessing the power of snappy UIs!

Bolaji Bolajoko — Tue, 13 Aug 2024 06:14:42 +0000

Am I the only one who finds useOptimistic both fascinating and amazing? If you're curious and want to dive deep into how to use this hook, you're in the right place.

💡 useOptimistic hook, is someone who always starts a band, forever hopeful that the next hit will be a success.

The useOptimistic hook is a React hook that lets you show a different state when an asynchronous action is processing. If the action fails, the state can be reverted to its previous state. I like to think of it as a client that knows more than the server. Instead of waiting for a response from the server, we can use the optimistic state to update the UI while the asynchronous action is underway. This makes the app feel faster and more responsive to the user.

useOptimistic is only available on React 19. The example in this writing make use of Nextjs 14.

Scenario Example: Imagine a comment section where you can optimistically update the comment list to show the latest comment. We can immediately display the new comment instead of waiting for the roundtrip to the server. If the server request fails, the previous state is restored, and possibly an indicator is shown to the user that the comment update has failed.

Always implement a rollback mechanism and provide user feedback if the asynchronous operation fails. This enhances the user experience.

`useOptimistic(state, updateFn)`

The useOptimistic takes in two parameters state, updateFn.

Parameters:

initialState: This is the initial state.
updateFn: A function used to apply the optimistic update to the state.

Returns:

optimisticState: The optimistic state returned by updateFn.
addOptimistic: A function used to update the optimistic state.

More Insights on Parameters and Returned Values:

To understand how to use useOptimistic, we need to explore how the parameters and return values fit together.

Parameters:

initialState
- Type: It can be of any type (string, number, array, boolean, etc.).
- Purpose: This is the initial state that your component starts with. It is the baseline before any optimistic update is applied.
- Example: If you're managing a list of comments, initialState can be an array fetched from your database.

const commentList = [{ id: 1, comment: "This is a comment" }, {id: 2, comment: "This is another comment" }]

updateFn
Type: (currentState: StateType, newOptimisticValue: any) => StateType
Purpose: This function defines how the state should update. It receives the current state and the value you want to optimistically update (e.g., a new comment) and returns the updated state.

const updateFn = (currentState, newValues) => [...currentState, newValues]

This function should be pure, meaning it should not cause any side effects and should return the same state based on the input.

Return Values:

optimisticState
- Type: Same as initialState.
- Purpose: This represents the current state of the component after the optimistic update has been applied. As you apply an optimistic update using the addOptimistic function, optimisticState reflects the changes made.
- Example

const [optimisticState, addOptimistic] = useOptimistic(commentList, (currentState, newComment) => [...currentState, newComment])

return (
  <ul>
    {optimisticState.map((comment) => (
      <li key={comment.id}>{comment.text}</li>
    ))}
  </ul>
);

addOptimistic

Type: (newOptimisticValue: any) => void
Purpose: This function is used to apply an optimistic update to the state. When you call this function, it triggers updateFn with the current state and the new optimistic value, returning the new state.
Example

const newComment = { id: 3, comment: "Add new comment" }
addOptimistic(newComment);

That was a long overview, but I hope you learned something about how the pieces fit together. If not, feel free to go over it again. Having a solid foundation will provide a blueprint for how to use this hook effectively.

Optimistic Shopping List

We'll create a shopping list that adds items to the cart optimistically. We'll use JavaScript Promises and setTimeout to simulate a network request and a custom function to rollback the previous data if the request fails.

// here is our initial data and type
type Item = {
  id: number;
  name: string;
};
const initialState: Item[] = [
  { id: 1, name: "Apple" },
  { id: 2, name: "Orange" },
  { id: 3, name: "Cherry" },
  { id: 4, name: "Pineapple" },
  { id: 5, name: "Grape" },
];

Since we don’t have a server setup, we’ll simulate a server response using JavaScript Promise and setTimeout.


// Server simulation function
// NOTE: Do not put this function into a component
// to avoid re-creation on each render

async function simulateServer(cartItem: Item[], item: Item) {
  return new Promise<Item[]>((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.3) {
        resolve([...cartItem, item]);
      } else {
        {
          reject(new Error("Failed"));
        }
      }
    }, 3000);
  });
}

In our simulation, if the Math.random() value is greater than 0.3, the function simulates an OK response and adds new items to the cart. Otherwise, the response fails by calling the reject function.

// here is the shoppingList component
export default function ShoppingList() {
  const [cartItem, setCartItem] = useState<Item[]>([]);
  const [error, setError] = useState<string>("");
  const [optimisticState, addOptimistic] = useOptimistic<Item[], Item>(
    cartItem,
    (currentState, newValue) => [...currentState, newValue]
  );

  async function addNewItem(item: Item) {
    startTransition(() => { // `startTransition` for non-urgent updates that shouldn't block the user interface.
      addOptimistic(item);
    });

    try {
      const newItem = await simulateServer(optimisticState, item);
      setCartItem(newItem);
    } catch (error) {
      setError(`Failed to add item ${item.name}`);
      rollbackOptimisticUpdate(item.id);
    }
  }

  useEffect(() => {
    if (error) {
      const timer = setTimeout(() => setError(""), 3000);
      return () => clearTimeout(timer);
    }
  }, [error]);

    // rollback the previous data if request failed
  function rollbackOptimisticUpdate(tempId: number) {
    startTransition(() => {
      const revertItem = cartItem.filter((item) => item.id !== tempId)
      setCartItem(revertItem);

      revertItem.forEach(item => addOptimistic(item))
    });
  }

  return (
    <>
      <div className="flex gap-20 justify-between">
        <ul>
          {initialState.map((item: Item) => {
            return (
              <li
                key={item.id}
                className="flex gap-4 justify-between  font-semibold p-4 border border-slate-100 "
              >
                {item.name}
                <button
                  onClick={() => addNewItem(item)}
                  className="px-3 py-2 rounded-md hover:bg-slate-400 bg-slate-100 text-black"
                >
                  Add
                </button>
              </li>
            );
          })}
        </ul>
        <div className="relative">
          <FaCartShopping size={100} />
          <div className="absolute top-4 inset-0 ">
            <p className="text-3xl text-slate-800 text-center font-bold">
              {optimisticState.length}
            </p>
          </div>
        </div>
        <p className=" text-red-300 font-semibold">{error}</p>
      </div>
    </>
  );
}

addNewItem function handles the addition of items to the cart.
- It triggers an optimistic update using addOptimistic, adding the new item to optimisticState without waiting for a server response.
- It then attempts to upadte the server by calling simulateServer. If the server responds successfully, the cartItem state is updated with the confirmed data.
- If the server request fails, the error is captured, and the rollbackOptimisticUpdate function is called to remove the optimistic update.
The rollbackOptimisticUpdate function uses addOptimistic to filter the item that failed to update, effectively rolling back the optimistic state to what it was before the failed operation.

Conclusion

Optimistic way of rendering data, coupled with rollback mechanism, ensures that users get a responsive feel like interaction and quick feedback if any error occurs, while maintaining a smooth interaction flow. Leveraging useOptimistic can significantly enhance the perceived performance of your React application.

How I built a custom image file uploader

Bolaji Bolajoko — Mon, 22 Jul 2024 00:02:48 +0000

The whole problem started with some issues I was facing when trying to use Cloudinary file Uploader. After spending a few hours trying to get the setup working, which I did not, I decided to build my own custom image file uploader for the project I am working on.

At first, I had no idea how to implement this, but I knew I would figure it out somehow. (Isn't that what most developers do? 😀)

This project is a React project using Next.js with TypeScript. You might want to spin up a Next.js project to follow along, with a couple of libraries from npm to get the ball rolling⚾.

npm i react-dropzone

Let's create a React component called UploadImageFiles (Oops, I'm not good at naming stuff, so bear with me 😋). Here is the barebones of the component with some state we will be needing:

export default function UploadImageFiles() {
  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
  const [fileList, setFileList] = useState<FileUpload[]>([]);
  const [fileError, setFileError] = useState<string | null>(null);

return (
 <>
    <main>
       {/* some UIish 😄 JSX*/}
    </main>
 </>
)
}

Just to move this further, I like to break down my thought process of the implementation into a list. You can call it a pseudocode. 🤷

Handle user file selection
Validate the file
Display the file list (I call this staging 🎬)

Let’s handle the file selection with the help of TypeScript so that we won’t go broke. 😄

 function handleFileChange(e: ChangeEvent<HTMLInputElement>) {
    const inputFiles = Array.from(e.target.files || []);

    const validatedFiles: File[] = [];

    files.forEach((file) => {
      if (!file.type.startsWith("image/")) { // check for valid image file
        setFileError("File should be an image"); 
      } else if (file.size > 1024 * 1024 * 25) { // check for image size
        setFileError("File max size is 24MB");
      } else {
        validatedFiles.push(file);
      }
    });
    if (validatedFiles.length > 0) {
      setSelectedFiles(validatedFiles);
      setFileError(null);
    }
  }

The handleFileChange() function helps with file selection and validates the files for valid file type and the image file size we are expecting. If not, the fileError state will be set. If our checks all pass, then we push the file into the validatedFiles array. The last part of the code sets the selectedFiles state using the setSelectedFiles action with the validatedFiles list.

🚫🚫🚫 Where is FileUpload?

Here you go:

interface FileUpload {
  url: string;
  name: string;
  size: number;
}

With the file selection and validation out of the way, let’s do some staging…🎬

To add new files to the staging area, our staging function is going to be in a useEffect so that new files are added when selected.

useEffect(() => {
    function stagingFiles() {
      if (selectedFiles.length) {
        const imageFile = selectedFiles.map((file: File) => {
          return {
            url: URL.createObjectURL(file),
            name: file.name,
            size: file.size,
          };
        });
        setFileList((curState) => {
          const newImageFile = imageFile.filter((file) => !curState.some((item) => item.name === file.name))
          return [...curState, ...newImageFile];
        });
      }
    }
    stagingFiles();
  }, [selectedFiles]);

In the staging area, we need the image URL, name, and size. We use the URL to display the image. Since our selectedFiles is just a list of images, we map through it and return the properties we need (as mentioned above) from it as an object. URL.createObjectURL() helps to create the image URL. createObjectURL().

setFileList((curState) => {
          const newImageFile = imageFile.filter((file) => !curState.some((item) => item.name === file.name))
          return [...curState, ...newImageFile];
        });

The second part of the staging function is setting a distinct image, ensuring no duplicate image file is added to the staging area.

Do not forget to add the selectedFiles to the useEffect dependency array.

We might need to remove some files from the staging area. The method is quick and short:

function removeFromList(item: number) {
    setFileList((curState) => {
      return curState.filter((_, index) => index !== item);
    });
  }

You might be wondering, where is our drag ‘n drop logic. Just a moment…

const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop: (files: File[]) => {
      processFiles(files);
    },
    multiple: true,
    noClick: true, // avoid duplicate opening of file selection ui
  });

React dropzone provides us with the useDropzone hook to perform our drag-and-drop feature. From the hook, we destructure the properties we need. You can check out their official documentation for more info: react-dropzone.

We will be making some updates to our handleFileChange function by moving part of it into a processFiles function:

 function processFiles(files: File[]) {
    const validatedFiles: File[] = [];

    files.forEach((file) => {
      if (!file.type.startsWith("image/")) {
        setFileError("File should be an image");
      } else if (file.size > 1024 * 1024 * 25) {
        setFileError("File max size is 24MB");
      } else {
        validatedFiles.push(file);
      }
    });
    if (validatedFiles.length > 0) {
      setSelectedFiles(validatedFiles);
      setFileError(null);
    }
  }

One last couple of changes before closing. Add getRootProps and getInputProps to the root element and input element respectively:

  return (
    <div>
      <div {...getRootProps()}>
        <input {...getInputProps()} onChange={handleFileChange} />
        {isDragActive ? <p>Drop the files here ...</p> : <p>Drag 'n' drop some files here, or click to select files</p>}
      </div>
      {fileError && <p>{fileError}</p>}
      <ul>
        {fileList.map((file, index) => (
          <li key={index}>
            <img src={file.url} alt={file.name} width={50} />
            <button onClick={() => removeFromList(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );

Here is my current version of the implementation.

Hope you had much fun as I do. Feel free to implement your own features.

Optimizing Performance in Next.js Using Dynamic Imports

Bolaji Bolajoko — Mon, 13 May 2024 00:12:36 +0000

As developers, we are constantly seeking ways to enhance the performance of our applications to provide the best user experience possible.

In traditional web applications, all the JavaScript, components, and libraries required are bundled together and sent to the client simultaneously. However, this can lead to increased bundle sizes, resulting in slower loading times, especially on slower connections and less powerful devices.

To address this, one effective technique is to defer the loading of certain components, sending them in small, manageable chunks asynchronously and upon user interaction or demand. For instance, data visualization components can be loaded when a specific part of the application is interacted with.

Dynamic Import: A Key Performance Technique

Dynamic import is a method used to lazy load resources by deferring the amount of JavaScript bundle sent to the client. By deferring the loading of components and libraries, it decreases bundle size, facilitating faster route or page load times.

Next.js Dynamic Import

In Next.js, dynamic imports enable developers to load components incrementally, allowing for the loading of certain components at specific times and conditions. This approach eliminates the need to load all components upfront, speeding up page loading times significantly. Moreover, it reduces the initial bundle size of the application.

Addressing Increasing Resource Sizes

The evolution of the web has resulted in significant increases in the number and size of assets sent to users over the years. From 2011 to 2019, the median resource weight increased from ~100KB to ~400KB for desktop and ~50KB to ~350KB for mobile, according to MDN. Similarly, image sizes have surged from ~250KB to ~900KB on desktop and ~100KB to ~850KB on mobile.

Lazy Loading as a Solution

To mitigate the impact of these increasing resource sizes, one effective strategy is to minimize the steps required for browsers to render HTML, CSS, and JavaScript. This can be achieved by lazy loading resources that are not critical for the initial render, thereby shortening the time it takes for a pixel to appear on the screen.

By implementing dynamic imports and lazy loading techniques, developers can optimize the performance of their Next.js applications, ensuring faster load times and improved user experiences.

Talk is cheap, so let's dive into some methods used to lazy load components in our Next.js applications.

Lazy loading involves deferring the loading of certain components until they are needed, improving performance by reducing initial bundle sizes. Dynamic imports, a key technique for lazy loading, allow components to be loaded asynchronously based on user interaction or demand.

Implementing Lazy Loading in Next.js

There are two primary ways to implement lazy loading in Next.js applications:

Using Dynamic Imports with next/dynamic
Using React.lazy() with Suspense

In this discussion, we will focus on next/dynamic, which combines the functionality of React.lazy() and Suspense.



"use client";

import Button from "@/components/ui/button";
import dynamic from "next/dynamic";
import { useState } from "react";


const ComponentA = dynamic(() => import('../components/ComponentA'));
const ComponentB = dynamic(() => import('../components/ComponentB'));

const ComponentC = dynamic(() => import('../components/ComponentC'), { ssr: false,
    loading: () => <p>Loading ComponentC...</p>
 });

export default function Page() {
    const [show, setShow] = useState(false);

    function handleShow(){
        setShow(!show);
    }

  return (
    <>
      <main>
        <div>

         <div>
           {show && <ComponentA />}
            <ComponentB />
            <ComponentC />

        </div> 

        <Button onClick={handleShow}>
            Toggle ComponentA
        </Button>
        </div>
      </main>
    </>
  );
}

By using next/dynamic, we can fine-tune lazy loading behavior. For instance, in ComponentC, we disable pre-rendering for the client component by including the ssr option in the dynamic import.



const ComponentC = dynamic(() => import('../components/ComponentC'), { 
    ssr: false,
    loading: () => <p>Loading ComponentC...</p>
});

Additionally, it's good practice to inform users about component loading. This can be achieved by displaying a loading message alongside the dynamic import, as shown above.

Handling Named Exports

Next.js provides a convenient way to import modules with multiple named exports. To dynamically import named exports, we can return them from a Promise of an import() function.



// ../components/ComponentXYZ.tsx

export function ComponentX(){
    return (
        <>
            <div>
                ComponentX
            </div>
        </>
    )
}

export function ComponentY(){
    return (
        <>
            <div>
                ComponentY
            </div>
        </>
    )
}



// page.tsx
const ComponentX = dynamic(() => import('../components/ComponentXYZ').then((mod) => mod.ComponentX));

const ComponentY = dynamic(() => import('../components/ComponentXYZ').then((mod) => mod.ComponentY));

Loading External Libraries

As developer we might want to integrate other libraries into our app. Loading some libraries with the initial bundle size might increase resource size and slow down load time. In this section we will explore how we can integrate external libraries into our Nextjs app.

In the example below we will be working with Markdown library.



// MarkdownPreview.tsx

import { Remarkable } from 'remarkable'

const remarkable = new Remarkable();
export default function MarkdownPreview({ markdown }: { markdown: string }){

    return(
        <>
            <div
                dangerouslySetInnerHTML={{__html: remarkable.render(markdown)}}>
            </div>
        </>
    )
}



// page.tsx
"use client";
import dynamic from "next/dynamic";
import { ChangeEvent, useState } from "react";

const MarkdownPreview = dynamic(
  () => import("../components/MarkdownPreview"));

export default function Page() {
  const [textValue, setTextValue] = useState("");

  function handleChange(e: ChangeEvent<HTMLTextAreaElement>) {
    setTextValue(e.target.value);
  }

  return (
    <>
      <main>
        <textarea
          value={textValue}
          onChange={handleChange}
          name="textValue"
        />

        <MarkdownPreview markdown={textValue} />
      </main>
    </>
  );
}

Now, let’s check how our app bundle size is doing, by checking the amount of JavaScript sent to the client via our Network tab in the devtools.

With MarkdownPreview component pre-rendered at the initial load, the total amount of resources is ~7.3 (this value might be different from your end). You can locate and hover on the MarkdownPreview component to show the amount of resources sent to the client.

Let load in MarkdownPreview when the textarea receives some input. We will be making some changes to the page.tsx file.



{textValue.length > 0 && <MarkdownPreview markdown={textValue} />}

In the first render the MarkdownPreview component is not bundled with the resources, which reduces the bundle size by ~0.3, with this we get faster load time. With this changes, the MarkdownPreview component will only load when the condition is met.

Conclusion

Dynamic imports with next/dynamic offer a powerful tool for optimizing Next.js applications by reducing initial bundle sizes and improving load times. By leveraging lazy loading techniques, developers can enhance user experiences while efficiently managing resources.

Demystifying JavaScript Arrays: A Comprehensive Guide for Beginners and Intermediates

Bolaji Bolajoko — Mon, 21 Aug 2023 17:07:11 +0000

Introduction

JavaScript arrays are variable which can hold more than one value or items of different data types under a single variable name. An array can contain a mixture of numbers, strings and any other JavaScript data types like objects, booleans and even null. You can think of JavaScript array as a big container that helps us to hold different household items.

Much like how you can organize, manipulate, and transform household items, JavaScript arrays allow you to manage data items efficiently. You can easily access, modify, and rearrange the items stored within an array. This ability to work with arrays empowers JavaScript developers to handle data in a structured and dynamic manner, making arrays a fundamental tool in JavaScript programming.

Understanding Arrays

When we have list of items, let's say a list of fruits, storing the items in a regular (scalar) variable will look something like this:

const fruit1 = "Orange";
const fruit2 = "Banana";
const fruit3 = "Apple";

Here comes the problem: if the list of fruits we are having is in hundreds, managing the list of fruit will become daunting and complicated. Storing items in a regular variable does not give us the ability to store different data types as well, thereby limiting the types of items that can be stored in it.

Arrays give us the privilege to store the list of fruit under a single variable name, making it easy for us to to access and manipulate the items. Storing the fruit items will look something like this:

const fruit = ["Orange", "Banana", "Apple"]; // storing list of fruits

Arrays also give us the ability to store different data-types (including arrays themselves) under a single variable name.

const mixedData = [23, "Bob", { key: "value"}, [], false]; // storing mutiple data-types

Creating Arrays

There are two methods used to create an array:

Constructor method
Array Literals

The syntax is:

const newArray = new Array(); // constructor method
const newArray = [ ]; // literal method

Most of the time, the second method and syntax are used. Throughout this article, we will be making use of the second syntax.

An array that doesn't have any items in it is said to be an empty array. In the code sample above, we've only created an empty array, because we have not supplied any item into the square brackets and the constructor method. We can add items to the array by entering a list of items we want between the square brackets separated by a commas.

const planet = ["Mercury", "Mars", "Pluto", "Jupiter"]

You can supply a trailing comma after the last item in the list.

Array indexing and Accessing Elements

When we create an array the element positions start from index of zero. We count the array items from zero up to the last item in the list.

const fruits = ["Orange", "Banana", "Apple"]

// 0 position element -> Orange
// 1 position element -> Banana
// 2 position element -> Apple

The position number is often referred to as the index number.

We can access each element in the array using the [ ] notation along with the index number. This is achieved by inserting the index number within the square brackets.

Syntax:

// accessing element in an array
myArray[indexPosition]

const fruits = ["Orange", "Banana", "Apple"]

console.log(fruits[0]) // Orange
console.log(fruits[1]) // Banana
console.log(fruits[2]) // Apple

The square brackets and the index number can also be used to change an element in the array. Similarly, they can be used to add a new element to the array.

const fruits = ["Orange", "Banana", "Apple"]


// changing element in the array
fruits[1] = "Cherry"; // changing the element at position index 1
console.log(fruits) // new version of fruits: ["Orange", "Cherry", "Apple"]


fruits[3] = "Mango"; // adding new element to the array at position 3
console.log(fruits); // new version of fruits: ["Orange", "Cherry", "Apple", "Mango"]

In example above, we access the second element in the array with the index number [1] and we assign a new element the position.

In the second part of the code, we try to access the fourth element in the array which was not there, then immediately we assign an element to it. The position index [3] is created by JavaScript, and the element Mango is inserted into the list, taking up the fourth position.

Accessing an index that is not in the array will return undefined.

Array Length and Manipulation

To get the length of an array, we can can use the length property on the array variable. This property returns an integer number signifying the length of the array (the number of elements in the array).

const person = ["Alice", "Bob", "John", "Jack"];
let total = person.length;
console.log("Total number of element in Person array is " + total);
// Output: Total number of element in Person array is 4

Accessing the last element in the array: We can obtain the last index element in the using the length property

let lastItem = person[person.length - 1]; // Jack

The length properties is equally writable; we can increase and decrease it by assigning a new value to it. If we increase the length, an empty items will be created. Accessing this empty items will return undefined. Conversely, if we decrease the length, the array will be truncated. The process is irreversible.

const evenNum = [2, 4, 6, 8, 10];
evenNum.length = 6; // increasing the length

console.log(eveNum); // [ 2, 4, 6, 8, 10, <1 empty-items> ]

const evenNum = [2, 4, 6, 8, 10];
evenNum.length = 3; // decrease the array length
console.log(evenNum); // [ 2, 4, 6];

JavaScript provides different ways to manipulate array elements:

Using array methods such as pop, push, shift, unshift among others.
Updating elements by directly assigning new values. (as discussed in the previous section).

In the subsequent section, we will be discussing the various array methods provided by JavaScript.

Looping through Arrays

There are situations where we need to iterate through all the items in an array. Attempting to access all the items in an array using direct index numbers can be tedious and time-consuming. JavaScript provides us with ways to go through all the items in an array, which includes: for loop and the for...of loop

For Loop

You can use for loop to iterate over the elements of an array. It allows you to perform operations on each element in the array. Here is a basic example of how you can use a for loop to iterate over the elements of an array:

const fruits = ["apple", "banana", "orange", "grape", "mango"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// output
/* apple
   banana
   orange
   grape
   mango
 */

In this example, the loop iterates through each element in the array. The loop control count variable i is used as an index to access each item in the array using fruits[i].

The loop terminates when i equals to the length of the array ensuring all the items are iterated over.

For...of Loop

for...of loop is a modern approach to iterates over the element in an array. It is concise and readable, making it more preferable than the traditional for loop.

const fruits = ["apple", "banana", "orange", "grape", "mango"];

for(let fruit of fruits){
    console.log(fruit);
}

// output
/*
    apple
    banana
    orange
    grape
    mango

*/

In the example, the for...of loop iterates over each element in the fruits array. During each iteration, the value of the current element is assigned to the loop variable fruit, and the loop body is executed. The loop automatically handles the index and provides direct access to the element

The for...of loop abstracts away the need for maintaining an index and provides a clean and straightforward way to work with iterable objects like arrays, strings and more. It is especially useful when you're more interested in the values themselves rather than the index for your operations.

Array Methods

JavaScript provides us with various predefined actions that can be performed on arrays. In this this section, we will be looking at most important arrays methods.

push() :

Adds one or more elements to the end of an array.
Returns the new length of the array.

const numbers = [1, 2, 3];
numbers.push(4, 5);
console.log(numbers) // [1, 2, 3, 4, 5]

pop() :

Removes the last element from the end of an array.
Returns the removed element.

const fruits = ["apple", "mango", "orange"];
const removedFruit = fruits.pop();

console.log(fruits) // Output: ["apple", "mango"]
console.log(removedFruit); // Output: orange

unshift() :

Adds one or more elements to the beginning of an array.
Returns the new length of the array.

const colors = ["yellow", "green", "blue"];
colors.unshift("red");


console.log(colors) // Output: ["red", "yellow", "green", "blue"]

shift() :

Remove element from the beginning of an array.
Returns the removed element.

const animals = ["lion", "tiger", "elephant"];
const removedAnimal = animals.shift();


console.log(animals) // ["tiger", "elephant"]
console.log(removedAnimal) // "lion"

splice() :

Allows you to add, remove, or replace elements in an array at a specific index.
Modifies the original array and returns an array containing the removed elements (if any).

const color = ["red", "green", "blue"];
colors.splice(1, 1, "yellow"); // remove 1 element at index 1 and insert yellow into it
console.log(colors); // ["red", "yellow", "blue"]

You can read more on splice() MDN

concat() :

Creates a new array by combining the elements of one or more arrays.
Does not modify the original arrays

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const joinedArray = array1.concat(array2);

console.log(joinedArray); // [1, 2, 3, 4, 5, 6];

slice() :

The slice() method is used to extract a portion of an array and return a new array containing the selected elements.
Does not modify the original array

const numbers = [1, 2, 3, 4, 5];
const sliceArray = numbers.slice(1, 4);
console.log(sliceArray); // [2, 3, 4]

Read more on slice() MDN

Iteration Method

Iteration methods help us to perform repeated specific action or operation on sequence of elements. This methods allow us to perform some certain actions until a condition is met.

We will be discussing some of the most important iteration methods provided by JavaScript.

forEach() :

The forEach method executes a provided function once for each array element. It does not create a new array.

const numbers = [1, 2, 3];
numbers.forEach((number) =>{
    console.log(number);
});

forEach() returns undefined

map() :

The map() method creates a new array with the results of calling a provided function on every element in the array.

const numbers = [1, 2, 3];
const squareNumbers = numbers.map((number) =>{
    return number * number;
})
console.log(squareNumbers) // [1, 4, 9]

filter() :

The filter() method creates a new array with all elements that pass a provided test function.

const words = ["lawyer", "expensive", "freedom", "awesome"];
const filteredWord = words.filter((word) => {
    return word.length <= 7; // return words whose length is less than or equals 7
});

console.log(filteredWord); // ["lawyer", "freedom", "awesome"]

reduce() :

The reduce() method applies a function against an accumulator and each element in the array to reduce it to single value.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) =>{
    return accumulator + currentValue;
}, 0);
console.log(sum); // Output: 15

some() and every() :

some() tests whether at least one element in the array passes the test. Returns a boolean value.
every() tests whether all elements in the array pass the test. Returns a boolean value.

const number = [1, 2, 3, 4, 5];
const hasEven = numbers.some((number) =>{
    return number % 2 === 0;
});
console.log(hasEven); // Output: true

const allEven = numbers.every((number) =>{
    return number % 2 === 0;
});
console.log(allEven); // Output: false

All the iteration methods discussed above help you to achieve tasks more elegantly with less boilerplate code. The are also more functional in nature, which aligns with modern programming paradigms.

Multidimensional Array

JavaScript support multidimensional array such as 2D and 3D arrays. Multidimensional array is an array that contains another arrays within it. Multidimensional arrays forms a grid-like structure (matrix) which can be used for data representation. Here is a representation of 2D and 3D array

// 2D Array
const twoDArray = [
    [a, b, c],
    [l, m, n],
    [x, y, z],
];

// 3D Array
consy threeDArray = [
    [
        [u, v, w],
        [i, j, k],
        [e, f, g]
    ],
    [
        [a, b, c],
        [p, q, r],
        [x, y, z]
    ],
]

const multiArray = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
]; // 2D Array

// Accessing elements in the 2D Array
console.log(multiArray[1, 1]) // 5 (second row, second column)
console.log(multiArray[2, 2]) // 9 (third row, third column)
console.log(multiArray[0, 1]) // 2 (first row, second column)

// Looping through a multidimensional array
for (let i = 0; i < multiArray.length; i++){
    for (let j = 0; j < multiArray[i].length; j++){
       console.log(multiArray[i][j]);
    } // 2D array looping through it twice
} 

/* 
    Output:
    1 2 3 4 5 6 7 8 9
*/

It's important to note that excessively deep nesting can lead to code that is difficult to understand and maintain. It can also have performance implications, as accessing deeply nested elements might become inefficient. In most cases, if you find yourself needing very deep nesting, it might be worth considering alternative data structures or rethinking your data organization to keep your code manageable. For practical purposes, most use case involve array with 2 or 3 level of nesting (2D or 3D arrays).

Using Spread Operator with Arrays

The JavaScript spread operator ... is a versatile syntax introduced in ES6 (ECMAScript 2015) that allows you to expand an iterable into individual elements.

Iterables are objects you can iterates over using the for...of loop syntax

How the spread operator works with Array

Copying Array:

You can use the spread operator to create a shallow copy of an existing array, without modifying the original one.

  const originalArray = [1, 2, 3];
  const copyArray = [...originalArray];
  console.log(copyArray); // [1, 2, 3]

Merging Arrays:

The spread operator can be use to merge multiple arrays into single array.

  const array1 = [1, 2, 3];
  const array2 = [4, 5, 6];
  const mergeArray = [...array1, ...array2];
  console.log(mergeArray) // [1, 2, 3, 4, 5]

Passing Function Arguments:

The spread operator can be use to pass elements into a function an individual arguments. Each element in the array is represented an argument in the function.

  function sum(a, b, c){
      return a + b + c;
  }
  const numbers = [1, 2, 3];
  const result = sum(...numbers) // equivalent to sum(1, 2, 3)
  console.log(result) // 6

Adding Element to an Array:

You can add elements to anywhere in an existing array, without modifying the existing array.

  const firstArray = [1, 2, 3];
  const secondArray = [4, 5, 6];
  const addedArray = [...secondArray, ...firstArray]
  console.log(addedArray) // [4, 5, 6, 1, 2, 3]

Summary

In this article we discussed what JavaScript arrays are and how they can be useful. We compared them with regular variable declarations and how they can hold values of different data types.

We covered how array can be created and using both the literal and constructor methods, providing code samples for each method. We discussed how we can access array elements using index numbers and how we can assign new values to array elements using index numbers, with code samples. We also took some time to look into one of the most important array property length, and how it can be used to manipulate arrays and retrieve the length of an array.

We touched on some of the most important JavaScript array methods, such as push, pop, shift, unshift, map . We dig into , among others, with code examples on each method. Later in the article, we delved into how to iterate over array element and how we can perform actions on each array element using the iteration functions. We explored how multidimensional arrays can be useful for data storage, by having arrays inside other arrays.

Lastly, we discuss on how the spread operator can be incredibly useful when working with arrays.

Conclusion

JavaScript developers use JavaScript arrays almost every day in their development process. So understanding the applications and how they can be used can help you in your development work. When working with arrays, it's important to avoid common pitfalls such as accessing elements with wrong index, avoiding infinite loops, and using array methods appropriately for the task at hand.

You can also continue your learning by exploring other array methods that weren't covered in this article or by checking out the MDN documentation for more in-depth information on arrays.

React useState Simplified

Bolaji Bolajoko — Thu, 13 Jul 2023 00:16:21 +0000

Introduction

Understanding React useState can be a little daunting especially for beginners learning React. I'm happy to tell you that I've been there before, and in fact, most React developers couldn't grasp the concept the first time they were introduced to it.

If you are here and you're feeling rusty or if the concept of useState is going over your head, don't worry. The aim of this article is to guide you out of the useState confusion 😢 into a useState state of clarity.😊

Why `useState`?

To clear the air about what useState is, we should ask ourselves why we need to make use of the concept in the first place.

React useState help us to track "state" changes that might occur in dynamic or functional components. The useState hook is also used to store and update state within a component.

Consider a simple scenario where you want to build a toggle button that changes the theme of a website from light mode to dark mode when clicked. You can use the useState hook to manage the state of the button.

If your component state need to change over time or through an event, React useState can come into play to help you manage the state of the component.

We have been mentioning the term state through out this section and will continue to do so in this article. It's high time you understand what state is.

State

A state contains some element of data that can change over time within a component (a component can be as simple as a text, button or input element on a webpage). When the state of a component changes React re-render the the component to reflect the updated state.

Let revisit our toggle button theme switcher scenario. The button can store data that assists in switching between different website themes. Initially, when the button is clicked, the inner data is set to true, which activates the dark mode theme. Subsequently, when the toggle button is clicked again, the inner data is set to false, reverting the website theme back to light mode.

The state holds the information necessary to determine which theme should be applied to the website. By updating the state when the button is clicked, React re-renders the component, causing the website's appearance to reflect the updated state and switch between the light and dark themes.

Putting it together: useState is like a black-box that stores and updates the state data of a component.

`useState` in Action

Since we have the basic understanding of what useState is, let's see how we can make use of the concept. Put on your coding cap and let's hit the ground running.

To have access and make use of useState we need to import the useState hook from React library.

import { useState } from "react"

Before we proceed any further, Let's assign it to a variable print it out to the console.

const mHook = useState();
console.log(mHook);

Output:

By convention useState hook will return an array of two items: the current state of the component and a function that help us to update its state. The first item in the array returns undefined because there is no value passed into the useState() as an argument.

The useState hook can accept any type of value as its argument. This includes primitive data type like number, string, Boolean and any other complex data types like array, function and object.

// number
const mHook = useState(10)
console.log(mHook); //  [10, function]

// string
const mHook = useState("React");
console.log(mHook); // [React, function]

The useState() can only accepts one value as its argument. It will ignore other arguments passed into it.

Since the useState hook returns an array of two items, as mentioned earlier, we can easily unpack the items using JavaScript Destructuring. By using destructuring assignment it allows you to assign names to the array items directly within the declaration.

// using Javascript destructuring to extract our item from the array
const [item1, item2] = useState(true);
console.log(item1) // Output: true
console.log(item2) // Output: function

In React the first item in the array returned by the useState() is called the state , and the second item which is the function, is called the setState. The argument passed into the useState() is called the initialValue.

Syntax

Here is the syntax on how to use React useState()

const [state, setState] = useState(initialValue);

state - This represent the current state value of your component.

setState - Function that can be used to update the state of your component.

initialState - The value you want your component to begin with.

Assigning an initial value to a useState will set the current state of the component to that value.

const [state, setState] = useState("React");
console.log(state) // Output: React

useState hook should only be declared inside a functional component.

Let implement a counter app that allows us to increase and decrease a number using the useState hook.

// Counter.jsx file

import { useState } from "react"

export default function Counter(){
    const [count, setCount] = useState(0);

    function increment(){
        setCount(count + 1);
    }
    function decrease(){
        setCount(count - 1);
    }
    return (
        <>
            <button onClick={increment}>+</button>
            <h1>{count}</h1>
            <button onClick={decrease}>-</button>
        </>
    )
}

In the example above, after defining a component, we declare are useState() by destructuring the array elements. Here, we can refer to our state as count, and the function that allows us to change the state as setCount. We pass in our initialValue, which automatically set the count to that value.

We declare our increment and decrease functions, which help us to update the count (state) each time an event occurs, using the setCount() function. Finally, we return our JSX as usual, which contains a button to increase the count, a text that displays the count each time it is updated, and a button that decrease the the count

Let's create a mental model around the previous example so that you can better understand what's going on.

Analogy: Imagine a piece of clay shaped that represent a numeric value. The clay can be shaped, molded, or reshaped using tools to represent different numbers. The piece of clay shape represents our state (count in the example), and the setState(setCount in the example) acts as the tool that allows you to modify the clay's shape, transforming it into different numeric values.

Alternatively you can pass a function to setState that receives the current state as an argument and returns the new state value. This approach is useful when the new state depends on the previous state. For example using our counter app.

// our function will change to this 
function increment(){
    setCount((curState) => { // curState represent our current state
        return curState + 1;
    })
}
function decrease(){
    setCount((curState) => {
       return curState - 1    
    })
}

In this approach, the setCount() the function receives a curState as an argument, which represent the current state value. You can use the curState state to perform calculation or modifications and return the new state value based on that. The function approach is generally recommended if you need to update your state based on the previous state.

Creating a theme switcher using useState

import { useState } from "react"

export default function ThemeComponent(){
    const [theme, setTheme] = useState(true);

   function themeEvent(){
        if (theme){
            document.body.style.backgroundColor = "#222222";
        }
        else{
            document.body.style.backgroundColor = "white";
        }
        setTheme((curState) => {
            return !curState;
        });
    }

    return(
        <>
            <button onClick={themeEvent}>{theme ? "Dark" : "Light"}</button>  
        </>
    );
}

Inside the ThemeComponent a state variable named theme and a setTheme function is declared using the useState hook:

const [theme, setTheme] = useState(true);

The theme variable is initially set to true by passing it as the initialValue argument to useState(). The setTheme function is used to update the value of theme.

The themeEvent function is defined within the ThemeComponent. It is responsible for changing the background color of the document body and toggling the value of theme.

Here's the breakdown of what it does:

a. if the theme is true, It sets the background color of the body to dark:

// theme = true
document.body.style.backgroundColor = "#222222";

b. if the theme is false, It sets the background color of the body to white:

// theme = false
document.body.style.backgroundColor = "white";

c. Finally, it updates the value of theme by calling setTheme with the current state (curState) negated:

setTheme((curState) => !curState);

This will toggle the value of theme from true to false or vice versa.

The return statement defines the JSX markup that will be rendered by the ThemeComponent. In this case, it consists of a button element:

return (
    <>
        <button onClick={themeEvent}>{theme ? "Dark" : "Light"}</button>
    </>
);

The button has an onClick event handler that triggers the themeEvent function when the button is clicked.

The text content of the button is conditionally rendered based on the value of theme. If the theme is true, the button will display "Dark"; otherwise, it will display "Light".

When to use `useState`:

1. Managing User Input:

If you have a form or an input field where the user can enter data, you'll likely need to store that data in a state. For example, if you have a text input field and you want to capture and use the value entered by the user, you can use useState to create a state variable that holds the input value. You can then update this state variable whenever the user types or modifies the input.

2. Toggling UI Elements:

When you have UI elements that can be toggled on and off, such as collapsible panels, modals, or tabs you can use useState to manage the visibility state of these elements. By storing a boolean value in state, you can control the visibility of these elements and update it based on user interactions or application logic.

3. Handling Component Interactions:

If you have a component that interacts with other components or triggers certain actions, you might need to use state to keep track of the state of those interactions. For example, you might have a button component that needs to change its appearance or behavior based on certain conditions. By using useState, you can manage the state of the button and update it accordingly.

4. Dynamic Content and UI Updates:

If you have parts of your UI that need to update dynamically based on user actions, such as a list grows as the user adds items, you can utilize useState to manage the state of the dynamic content. By updating the state, React, will automatically re-render the component and reflect the changes in the UI.

5. Fetching and Handling Data:

When you need to fetch data from an API or perform asynchronous tasks, you can use useState to store and manage the data you receive. The state can hold the initial loading state, the fetched data, and any error message that occur during the process. Updating the state based on the API response or error allows you to trigger re-renders and display the appropriate UI components.

Conclusion

When deciding whether to use useState, it is important to determine which components require updates. Identifying the components that need to change is the initial step in selecting the appropriate approach and implementing it. If a component is static and will never change over time, it is recommended to utilize regular props to render the component.

JavaScript Promises

Bolaji Bolajoko — Tue, 04 Jul 2023 00:44:51 +0000

Introduction

There are various ways asynchronous operation can be handled or managed, major ones include the use of Callbacks, Promises and Async/Await. In this article, I will be discussing on how you can use JavaScript Promises to handle an asynchronous operations.

JavaScript Promises are an important feature in JavaScript that is used to handle asynchronous operations or tasks that will take some time to complete, such as network requests, database queries or file operations.

JavaScript Promise is one of the best approaches used to handle asynchronous operations in modern JavaScript development because it improves error handling, flow control and readability.

What is JavaScript Promise

Analogy: Let's say your friend has promised to take you out for dinner on a weekend for the way he spoke to you at work. He arranged the venue and time for meetup. There are two things that might happen for the dinner to hold: either your friend makes it to the venue by alerting you, or your friend sends you a message that he couldn't make it with reasons. JavaScript Promise is similar to this scenario.

JavaScript Promise is an object that represents the completion or settlement of an asynchronous task.

Creating Promise

To create a promise object, you can use the constructor syntax.

const myPromise = new Promise((resolve, reject){
    // some operation
});

The callback function passed into the constructor is called an executor, which is typically used to perform the asynchronous operation. The executor function has two callback functions as the argument: the resolve() and reject() callback functions, which are provided by JavaScript.

The resolve and reject are built-in functions provided by JavaScript when creating a Promise.

If an asynchronous operation runs successfully, the executor will call the resolve method and return a value.

In case the asynchronous task encounters an issue (error), the executor function will call the reject method and return an error with a reason.

The Promise object returned by the constructor has two internal properties, state and result.

When a new promise is created, its state is pending with a result of undefined. When the asynchronous operation is successful, the state is changed to fulfilled with a result of value, and when an error is encountered, the state is changed to rejected with a result of error.

A promise can only move from a pending state to either being fulfilled or rejected. Once a promise is fulfilled or rejected, it cannot go back to another state.

If a promise reaches a fulfilled or rejected state, the asynchronous operation is said to be resolved.

Let's look at a simple example to show the state and result properties of a Promise object.

const counter = true;

const myPromise = new Promise((resolve, reject) => {
// using setTimeout as an async operation
    setTimeout(() => {
        if (counter){
            resolve("Counting...");
        }
        else {
            reject(new Error("Can't Count"));
        }
    }, 3000);  
});
console.log(myPromise);

Output

This loads after three seconds:

// Changing the counter value to false
const counter = false;

Output:

Promise Methods

Most of the time you won't be using the resolve() and reject() methods to handle asynchronous task. JavaScript provides some Promise methods you can use to handle the resolving and rejection of operations.

We will be taking a look at some of the most important fundamental Promise methods JavaScript provides in the subsequent section of this article, such as then(), catch(), and finally()

then()

then() method is one of the core methods of Promise object. It specify what should be done when an asynchronous task succeeds (fulfilled) or fails (rejected).

The main purpose of then() is to attach the rejection, and fulfilment handlers to a Promise. Its takes two callback methods, one for fulfilment and the other one for rejection.

Syntax

promise.then(onFulfilled, onRejected);

onFulfilled - this is a function that runs when the promise is resolved and returns a result.

onRejected - this is a function that runs when the promise is rejected and returns a reason for the rejection.

then() will call the onFulfilled() if the Promise is resolved successfully or the then() will call the onRejected() if the Promise is rejected.

// Resolving Promise
const pResolved = new Promise((resolve, reject) =>{
    setTimeout(() => resolve("Successful!"), 1000);
})
pResolved.then(result => console.log(result),
                error => console.log(error));
// Output: Successful!

//Rejecting Promise
const pRejected = new Promise((resolve, reject) =>{
    setTimeout(() => reject("Error"), 1000);
});
pRejected.then(result => console.log(result),
                error => console.log(error));
// Output: Error

In the example above, the resolve() in the setTimeout() signifies that the Promise is resolved and will call the necessary argument in the then(), which is onFulfiled(), the first argument in the then() method.

In the second part of the code, the reject() method in the setTimeout() method signifies that the promise is rejected, thereby calling the second argument in the then() method, which is onRejected()

The then() method can accepts either the onFulfiled() or onRejected(). Its depend on which promise state we are more interested in.

Putting it together:

Now, let's put what we've been discussing into practice by writing some code. You will be building an even numbers generator system. The system will raise an error when encountering an odd number.

function getEven(){
    const myPromise = new Promise((resolve, reject) =>{
       setTimeout(()=>{
         const rand = Math.floor(Math.random() * 10);
         if (rand % 2 == 0){
            resolve("Even Number - " + rand);
         }
         else {
            reject(new Error("Invalid " + rand))
         }
       }, 1000);
   });
   myPromise.then(result => console.log(result),
                  error => console.log(error));
}
setInterval(getEven, 2000);

Output:

The code example demonstrates the creation of a getEven function that generates random even numbers asynchronously. It utilizes Promises, setTimeout to simulate the asynchronous behavior. The Math.random in the code is used to generate numbers. The then() method handles the resolving or rejection of the Promise, allowing for the logging of valid even numbers or error messages. The function is executed every two seconds using setInterval().

Key takeaway from using the then method, the then() help us to resolve or reject an asynchronous task.

catch()

Handling Promise rejection can be done in different ways. One approach is to use the then() method's second argument onRejected() to handle errors. Another option is to use the catch() method, which can be chained to the Promise object. The catch() method accepts a callback function to handle the error.

Syntax

promise.catch(callback(error))

const run = false;

const myPromise = new Promise((resolve, reject) => {
    setTimeout(()=>{
     if (run){
         resolve("Running...")   
     } 
     else{
         reject(new Error("Error"));
     }  
    }, 1000)
});
myPromise.catch(error => console.log(error)); // Output: Error

In the example the else statement is executed, thereby executing the catch() method handler on the Promise object, the Promise failed and the reason for it failure is stated.

If the run variable value is changed to true the if statement will be executed and the promise will be resolve which will make the catch() handler not to be executed.

The catch() handler will only be executed if the Promise is rejected or failed.

finally()

Yes! finally, but that's not the end of this article 😃, we still have to clean up our code mess and discuss some few concepts. Let's do some cleanup using finally() method.

We might want to execute some functions whether the Promise gets resolved or not. This is where finally() method comes into play. The finally() method of a Promise object assigns a function to be called when a Promise is settled (either fulfilled or rejected).

The finally() method is primarily used to ensure the execution of code that should always run, regardless of the result.

Syntax

promise.finally(doSomething());

If a finally() handler return something, it will be ignored.

const counter = true;
const myPromise = new Promise((resolve, reject) =>{
    setTimeout(() =>{
       if (counter){
          resolve("Completed!")      
       }
       else {
         reject("Failed")
       }
    }, 1000);
});
myPromise.then(result => console.log(result))
          .finally(() =>{
              console.log("Do Something!")
           });
// Output: Completed!
// Output: Do Something!

In the example above, the Promise is resolved and the finally() handler is attached to then() handler, and the finally() gets executed. The process of attaching a Promise handler with another handler is called PROMISE CHAINING.

Promise Chaining

We might be in a situation where we need a result of an asynchronous operation in other another one. With the Promise API, we can pass down return result from one handler to another. This method is called PROMISE CHAINING.

When passing down the return result the next handler pick up the result first before moving forward.

Syntax:

myPromise.then()
           .then()
            .then();

const myPromise = new Promise((resolve, reject) =>{
    setTimeout( resolve(1), 1000)
})
myPromise.then(result => {
    console.log(result); // 1
    return result;
})
.then((result) =>{
    return result * 2
})
.then((result) =>{
    console.log(result); // 2
    return result * 2;
})
.then((result) =>{
    console.log(result); // 4
    return result * 4;
})
.then((result) =>{
    console.log(result); // 16
});

In the example above the return result trickles down the chain and gets used by the next handler in the chain.

Error Handling in a Promise Chain

When using Promise Chaining a good practice is to handle errors that might occur during promise execution. The most prominent method used for handling chained promise errors is to attach a catch() handler to the end the Promise chain.

const myPromise = new Promise((resolve, reject) => {
   setTimeout(() => {
        resolve(2)
   });

});

myPpromise.then((result) => {
    console.log(result);    // 2
    return result * 2;
})
.then((result) => {
    console.log(result);    // 4
    return result * 4;     
})
.then((result) => {
    console.log(result);    // 16
    return result * 5;
})
.then((result) => {
    console.log(result);    // 80
})
.catch((error) => {
    console.log(error);    // This handles any error in the chain
}

In the example above, if an error is encountered in the promise chain the catch block will get implemented, thereby raising an error with a reason. For instance if an error is encountered in the second then() block, the error will be caught by the catch() and the rest of the then() will not be executed.

We might want to handle an error in a specific block and still maintain the results of a Promise chain. The effective approach is to wrap the specific instruction in a try-catch block. By doing so, we handle the error locally without breaking the flow of the Promise chain.

const myPromise = new Promise((resolve, reject) =>{
        setTimeout(() => {
            resolve(2);
        })
});

myPromise.then((result) => {
    console.log(result); // 2
    return result * 2;
})
.then((result) => {
    console.log(result); // 4
    try {
         if (result === 4){
            throw new Error("Oops! Something went wrong here")
        }
    }
    catch(error){
        console.log(error); // Oops! Something went wrong here
    }

    return result * 2;
})
.then((result) => {
    console.log(result); // 8
    return result * 2;
})
.then((result) => {
    console.log(result); // 16
})
.catch((error) => {
    throw new Error(error);
})

In the example above a try-catch block is used to handle the error that might occur in the second code block and we can still maintain the flow control of the returned result down the chain.

Putting it together

In this section we will be implementing what we've learned so far. We will be fetching weather data from a weather API and we will be using Promise to handle the asynchronous operation.

On this task, we are going to be making use of a weather API to request for the current weather details of a specific city. You can check their official website Weather API and sign-up to obtain your API key.

function getData(city){
    const api_key = "your api key";
    const url = `https://api.weatherapi.com/v1/
                    current.json?key=${api_key}&q=${city}`;

    fetch(url)
        .then(response => {
        if (!response.ok){
               throw new Error("Error: " + response.status);
        }
        return response.json();
        });
        .then(data => {
              console.log(data);  
        });
        .catch(error => console.log(error));
}

getData("New York");

Output:

In the code sample above, the getData function takes a city parameter input, then we construct the API URL by combining the Weather API endpoint with an API key and a specified city. The fetch function is used to send an HTTP GET request to the constructed URL, the fetch function returns a Promise, which is chained with .then() to handle the response. In the first then() method we check if the response is successful using the response.ok property. If the response is not successful, it throws an error with a status code. The response proceeds with the result to the next then() if the response is successful. In the second then() block, it parses the response using response.json to obtain the weather data, then it logs the retrieved weather data to the console. If any errors occur during the fetch() method request or data processing, they are caught and logged in the catch() callback. To use the getData function and fetch the data for a specific city, you call the getData and passing in the name of a city.

Promises best practices and tips

Handle both resolved and rejected states: Always handle both the resolved onfulfilled and rejected onRejected states of a Promise. Use the then() method to handle the resolved and catch() method to handle the rejected state.
Cleanup using finally(): You might want to perform some cleanup operation such as closing connections, or releasing some resources regardless of whether the Promise is fulfilled or rejected. You can use finally() method regardless of what the the outcome might be. finally() method should not a return a statement.
Avoid using Promise constructor unnecessarily: In most cases it is recommended to use Promise-based API's (e.g., fetch, setTimeout), Instead of manually constructing a Promise using new Promise constructor. This helps to simplify code and reduces the risk of introducing complexity and mistakes.
Handle error with catch(): To handle error in asynchronous operation, use the catch() to handle any rejected Promises. This allows you to centralize error handling logic in a single location and avoid repetitive error handling code.
Remember to return Promises: When creating a custom function that performs an asynchronous operation that returns a Promise, make sure to return the Promise so that the callers of the function can chain then() and catch() as needed.

Conclusion

By understanding Promises and their various methods, developers can write more efficient and maintainable code when working with asynchronous tasks.

JavaScript Class Inheritance

Bolaji Bolajoko — Wed, 31 May 2023 12:50:43 +0000

Prerequisite:

A good understanding of how JavaScript classes work and how to use it. Check out my blog post on Introduction to JavaScript class example and usage, if you're not familiar with how to use JavaScript classes.

Introduction

One of the most powerful features of JavaScript is its ability to support inheritance, which is one of the fundamental principle of Object-Oriented Programming (OOP).

The main concept of inheritance is the ability of a class to derive attributes and functionalities from another class, enabling the extension of class's capabilities.

Prior to ES6 Implementing a proper inheritance require multiple steps. One of the strategies used was PROTOTYPE INHERITANCE.

Class inheritance involves two part:

Parent Class (Super Class): A class whose attributes and functionalities are inherited from.
Child Class (Sub Class): A class that derives attributes and functionalities from another class.

The parent class properties and functionalities are inherited by the child class.

Why Class Inheritance?

Inheritance gives developer the ability to write less code, which saves cost and time.

Inheritance helps to extend the functionalities of a class and support code reusability.

"Any piece of useful software will sooner or later change, not necessarily because it is erroneous, but rather because it is desirable to enhance its functionalities" - Mezini, Mira.

The `extends` Keyword

The extends keyword provides a class with the ability to acquire properties and methods from another class. When used to declare or define a class, it automatically turns the class into a child class. extends helps to establish a relationship between classes.

Syntax

class ClassName extends ParentClass {
    /* ... */
}

class - the keyword for defining a class

ClassName - the name child class

extends - JavaScript keyword used to extend the functionality of the parent class

ParentClass - super class whose functionality are derived from

Using the extends keyword on a class is the starting point for implementing inheritance.

// Parent Class
class Vehicle {
    constructor(name, model){
        this.name = name;
        this.model = model;
    }
    details(){
        console.log(`${this.name}, model ${this.model}`);
    }
}

// Child Class
class Car extends Vehicle {
    topSpeed(){
       this.speed = '168mph';
       console.log(`${this.name} ${this.model} maxes out at ${this.speed}`);
    }
}

const suv = new Car('Tesla', 'X Plaid'); // Creating Car Object
suv.details() // Tesla, model X Plaid

suv.topSpeed(); // Tesla model X Plaid maxes out at 168mph

In the example above we, created a Vehicle class with some class members in the class body. Then we created a Car class that extends the parent class. We defined a method where we create and initialize the top speed of the car, and then we log out the details.

In the example, the extends keyword shows how powerful it is to extend the functionality of the super class. When used on the child class, the extends keyword gives us the privilege to access the parent class's properties and methods, including the constructor, thereby making it become part of the child class.

Overriding

Overriding is an OOP term where a particular method in the subclass has the same name as the method in the parent class. When an instance of the subclass gets called on the method, the subclass method get implemented instead of the super class method.

Method Overriding

When we use the extends keyword on the child class, we inherit all the methods declared on the parent class by default. Method overriding allows us to replace the code of the parent class with the child class method, given that they share the same name.

However, we don't want to actually replace the method of the parent class, but to build upon it by extending its functionality, since that's what the concept of inheritance is all about.

JavaScript provides a way to extend method functionality without completely replacing the parent class method with the use of super keyword and super().

The super keyword can be used as an object or as a function look up

Overriding method using the `super`

The super keyword allows us to access an overridden method of a parent class in a subclass. By using the super keyword in a subclass method, we can extend the functionalities of the parent class method. This usage of super treats it an object.

Syntax

super.methodName()

class Animal {
    makeSound(){
        console.log('Make Sound')    
    }
}
class Dog extends Animal {
    makeSound(){
        super.makeSound();
        console.log('Woof! Woof!!');
    }
}
const dog = new Dog();
dog.makeSound(); // Make Sound Woof! Woof!!

In the example above, we created an Animal class which has makeSound method. We then extend the 'Dog' class and override the makeSound method. We call the parent class method using super and then we log out the sound made by the dog.

Overriding constructor using `super()`

By default, every subclass will inherits the constructor of the parent class. When we define or declare a constructor in the subclass, we have successfully overridden the parent class constructor.

Overriding a constructor provides the subclass with its own code logic and attributes.

Using super in constructor is a slightly different. Here, the super is used as a function call in the subclass constructor. When overriding a constructor in the subclass, the super constructor must be called first before using this.

A ReferenceError is raised if this keyword is used before calling the super constructor super().

class Vehicle {
    constructor(brand){
    this.brand = brand;
    }

    displayBrand(){
        console.log(`Brand: ${this.brand}`);    
    }

}
class Car extends Vehicle{
    constructor(brand, model, color){
        super(brand);
        this.model = model;
        this.color = color;
    }
    displayDetails(){
       console.log(`Details: ${this.model} ${this.color}`);
    }
}
const car1 = new Car('Tesla', 'Model X', 'Cherry')
car1.displayBrand(); // Tesla
car1.displayDetails(); // Details: Model X Cherry

In the example above, the Vehicle class is defined with a constructor that accepts a brand parameter and initializes the brand property. The displayBrand method is defined which prints out the brand property.

The Car class is defined and extends the Vehicle class. The class defines its own constructor property, and the super(brand) is used to invoke the super class constructor, with a parameter of brand is passed in. The Car class also has the displayDetails method which prints out the model and color.

Later, an instance of the Car is created, arguments are passed into the constructor of the Car class, then we call displayBrand and displayDetails on the object instance.

The super keyword is used to access the properties and methods of parent class while the super() is used within the constructor of a subclass as a function call to access the public field of a parent class before accessing this.

Property accessor getters and setters

JavaScript accessor properties allow us to access (get) and modify (set) class or object properties. The accessor properties are functions that execute on setting or getting a value. They are usually denoted using the get and set keywords.

Accessor Terms

Setter - A setter is a function that is used to assign a value to class properties. The set keyword is used to define the setter function, and it must accept exactly one parameter or value that represents the new value to assign to the property. By defining a function as a setter, it means that you can only write to the class property by assigning a new value.
Getters - A getter is a function that helps us to get a class property value after it has been set. The get keyword is used to define the getter function. You can only read the property value of a getter function.

class Person {
    constructor(){
        this._name = ''; 
    }

    set name(value){
        return this._name = value;  
    }

    get name(){
        return this._name;
    }
}

class Student extends Person {
    constructor(){
        super();
        this._college = '';
        this._noOfCourse = '';
    }

    set college(value){
       return this._college = value;
    }

    get college(){
       return this._college;
    }

     set noOfCourse(value){
        return this._noOfCourse = value;
   }

    get noOfCourse(){
        return this._noOfCourse;
    }
}
const student = new Student();
console.log(student.name) // ''
student.name = 'John';
console.log(student.name); //John
student.college = 'Standford';
console.log(student.college); // Standford
student.noOfCourse = 12;
console.log(student.noOfCourse) //12

In the Person class, the setter and getter are defined, which help to set and get the name property. The set method has a value parameter that is used to set the name property, and the get method which only return the set name.

In the derived class Student, we call the parent constructor using super, then we declare some properties that are unique to the class. We define get and set methods of the class properties, which help us to set and retrieve basic information such as the college and the noOfCourse.

We created an instance of our class student, then we set and get the class properties using the class instance.

Note how we call our get method; there are no parentheses after the method name. A TypeError is raised if parentheses are included.

Summary

JavaScript Inheritance gives us the privilege to extend the functionality of a class. The extends keyword enables a subclass to derive properties and functions from the parent class. The super keyword allows us to call and invoke the parent class's methods and properties, while the super() is used within a subclass constructor as a function look-up to call the parent class constructor's public fields before accessing this. Accessor properties, including setters and getters can be used to modify and access class properties using the set and get functions.

Conclusion

In JavaScript, inheritance gives developer the ability to write modular and concise JavaScript codes and helps to extend the functionality of a class by building on top of the existing class.

Introduction to JavaScript classes: basics, syntax and example usage

Bolaji Bolajoko — Thu, 20 Apr 2023 23:12:07 +0000

Introduction

JavaScript classes gives JavaScript developers the power to organize and structure code in an object-oriented manner. Classes help to create reusable, modular code that is easier to understand and maintain. In this blog post, I'm going to walk you through how to create and use classes in JavaScript.

What is JavaScript Classes?

JavaScript classes are special type of function that serves as a template for creating an object. In short, JavaScript classes are nothing but another way of writing a function. We can think of a class as the sketch or plan of a house which contains how various sections of the house can be built.

Syntax

JavaScript class can be declared and expressed just like a function.

// using declared class
class MyClass {
    constructor(){/*...*/}
    method_1(){/*...*/}
    method_2(){/*...*/}
}


// using expressed class
const MyClass = class {
   constructor(){/*...*/}
    method_1(){/*...*/}
    method_2(){/*...*/}
}

You can read more about class declaration and class expression. For the sake of brevity, we will be sticking to the declared type throughout this post.

class - keyword use to create a class

MyClass - the name of a class

How to create a class

A class can be created using the class keyword followed by a given class name, then an opening and closing curly braces { }.

For best practices, the first letter of a class must begin with an uppercase.

Class Body

The body of a class is where all operations are carried out. It is the part that is in between the curly braces { }. This is where class properties, constructor and methods are defined. All these are called class members. which are defined between the braces { }.

class Person { // creates a new class named 'Person'
    constructor(name, age){ // class member (constructor)
        this.name = name; // class member (property)
        this.age = age; // class member (property)
    }
    getAge(){ // class member (method)
        return this.age; 
    }
    setName(name){ // class member (method)
        return this.name = name; 
    }
} // end of class body

In the next section, we are going to take a deep look at all the class members and how they work. But before that, let's verify that JavaScript classes are just special functions, from the previous code sample.

console.log(typeof Person) // function

Constructor

Constructors are special methods defined within a class, they are used for creating and initializing object instances of that class. Constructors are just methods given the name constructor . The constructor method is used to initialize or hold object properties of that class.

There can only be one constructor method within a class. If there is more than one constructor, a syntax error is thrown. The constructor method is called automatically when a new instance of a class is created using the new keyword.

Syntax

constructor(){/*...*/} // constructor with no parameter
constructor(){args1, args2} // constructor with two parameter
constructor(){args1, args2, /*...*/ argsN} // constructor with parameter up to N

class Person{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    sayHello(){
        console.log(`My name is ${this.name}, am ${this.age} years old`)
    }
}
const person1 = new Person('John', 21);
console.log(person1.sayHello()); // My name is John, am 21 years old

In the example above, the Person class has a constructor which holds the person name and age properties. A person object (person1) is created with the new keyword which help us to call the class constructor automatically, passing in the required argument, then we call the "sayHello" method which help us to print out the message to the console.

Creating JavaScript Object Properties Using `this` Keyword

In JavaScript class this keyword can be used to access and modify the properties and methods of the current class instance. When we use this in a class we are essentially referring to the current instance of a class, rather than creating a new variable.

In a way, we could say that this in JavaScript class is like declaring a variable for that instance of a class. However, it's important to understand that this is not exactly the same as a variable declaration.

When we use this in a JavaScript class, you are not explicitly declaring a new variable. Instead, you are referring to the current instance of the class and accessing or modifying its properties and method.

For example, when we declare a property in the constructor of a class using this, we are not creating a variable in the global scope. Instead, we are setting a property on the current instance of the class, which can be accessed and modified using this.

class Rectangle{
    constructor(width, height){
        this.width = width;
        this.height = height;
    }

    area(){
        return this.width * this.height;
    }

    rectInfo(){
        console.log(`Rectangle is ${this.width}x${this.height} dimension with ${this.area()} area`);
    }
}
const rect1 = new Rectangle(10, 6);

console.log(rect1.area()); // 60
rect1.rectInfo() // Rectangle is 10x6 dimension with 60 area

In the example above we create a "Rectangle" class with a constructor that sets the "height" and "width" properties for each instance class using this. We also create the "area" method that uses this to access the "height" and "width" properties of the current instance and return the area of the rectangle. Additionally, we define a "rectInfo" method that displays some information of the rectangle by using this to access the "height" and "width" object properties with the "area" method.

Later on, we create a new instance of "Rectangle" class using the new keyword. Then we pass in the "height" and "width" values. We call the "area" method using the class instance "rect1".

Next, we call the "rectInfo" method using the class instance "rect1", which prints the rectangle "width" and "height".

Field

JavaScript class fields are new feature in ECMAScript 2022, which allows you to define object properties directly within a class body, without the need to define them within the constructor method. This can make your code cleaner and easier to read and can also reduce the amount of code you need to write. Fields are nothing but variables that hold information that is specific to a class. A field can be private or public.

Private field can only be accessed within its class definition. Accessing a private field outside its class definition will raise a syntax error. A private field is declared with # (hash tag) followed by the field name (pronounced hash names).

Public fields, on the other hand, can be access outside it class definition. By default, a field is public in nature.

A field will return undefined without an initializer

class Employee {
    name = "Jane";
    #id = 1123;

    details(){
        console.log(`${this.name} with ${this.#id} ID works here`);
    }
}
const jane = new Employee()
jane.details() // Jane with 1123 ID works here

console.log(jane.#id) // SyntaxError: Private field '#id' must be declared in an enclosing class

In the example above, we declared a public field of "name" and initialize it with with a string "Jane". We also declared a private field "#id" and we initialize it with some numbers "1123". We defined a "details" method which prints out the details of the employee.

We create a class object "jane", then will call the details method. Later, we tried to call the private field object property "#id", which throw a "SyntaxError".

JavaScript Class Method

JavaScript class method is a function that is defined as a property of a class. It is used to define behavior that is specific to the class. Class methods help you to perform specific actions that are related to the class. In JavaScript, a function within a class is called a method.

JavaScript classes make use of method definitions, which are a shorter syntax for function property in an object initializer.

Syntax:

class MyClass{
    method_1(){/*...*/}
    method_2(){/*...*/}
}

class Calculator{
    addition(a, b){ // addition method
        return a + b
    }
    subtraction(a, b){ // subtraction method
        return a - b
    }
    multiply(a, b){ // multiply method
        return a * b
    }
    division(a, b){ // division method
        return a / b
    }
}
const calc = new Calculator();

const add = calc.addition(10, 2);
console.log(add); // 12

const sub = calc.subtraction(100, 20);
console.log(sub); // 80

const mul = calc.multiply(10, 2);
console.log(mul); // 20

const div = calc.division(10, 2);
console.log(div); // 5

In this example, our "Calculator" class has four methods that perform different actions. We created an instance of the class "calc", which we use to access all the various methods in the class.

Creating Class Instances

After we must have drawn the sketch and plan (template) of our building, the next step we need to take is to start building our house based on the plan that we have. With this plan at hand, we can build hundreds of houses.

An instance of a class is an individual object created from a class template. When a class instance is created, it inherits all the properties and methods defined in the class. However, each instance that we create is a separate object with its own unique state. so any changes made to one instance will not affect other instances of the same class.

Syntax:

const objName = new ClassName()

Let revisit one of our previous examples:

class Rectangle{
    constructor(width, height){
        this.width = width;
        this.height = height;
    }
    area(){
        return this.width * this.height;
    }
    rectInfo(){
        console.log(`Rectangle is ${this.width}x${this.height} with ${this.area()} area`);

    }
}
const rect1 = new Rectangle(10, 6); // class instance 'rect1'
const rect2 = new Rectangle(20, 10); // class instance 'rect2'
const rect3 = new Rectangle(8, 3); // class instance 'rect3'

console.log(rect1.area()); // 60
rect1.rectInfo() // Rectangle is 10x6 with 60 area

console.log(rect2.area()); // 200
rect2.rectInfo(); // Rectangle is 20x10 with 200 area

console.log(rect3.area()); // 24
rect3.rectInfo(); // Rectangle is 8x3 with 24 area

In this example we created three different rectangles based on the template (class) we have. We created the instances of the class "rect1", "rect2" and "rect3" using the new keyword followed by the class name "Rectangle". Then, we passed in our constructor values, which are also the class properties. When the instances are created using the new keyword, they inherit the "width", "height" properties and the "area", "rectInfo" method. Then we called the class methods "area()" and "rectInfo()" using the created class instances.

Summary

In this blog post, we discussed what classes are and how they can be created. Then we delved into class members such as constructors, how to use this keyword, and explained what fields and methods are. Lastly, we demonstrated how object instances can be created.

Conclusion

JavaScript classes are essential concept for building complex web applications. They provide a way to create reusable objects with predefined properties and methods enabling encapsulation, and making the code easier to maintain.

JavaScript reduce() method: absolute beginner's guide

Bolaji Bolajoko — Mon, 06 Mar 2023 17:29:28 +0000

Introduction:

In this gentle beginner's guide to JavaScript reduce() method, we are going to explore how to get started with reduce() method. This is just a guide to put you in the right direction so as to get yourself familiar with the functionality and help you to start implementing this function in your projects. This article is aim at absolute beginner. So, with no further ado let jump right into it.

What is JavaScript `reduce()` method?

reduce() is a JavaScript array method which was introduced into the language as one of the features of ECMAScript5 (ES5). Just as the name implies, reduce() method reduces an array to a single value. This reduction of array elements to single value is carried out by an helper callback function (reducer), this operation is carried out from left to right, while the result is been stored in an accumulator.

NOTE: reduce() method does not change the original state of the array, but only return a single value.

How to use `reduce()` method

Syntax
The syntax of reduce() method is written:

arr.reduce(callback(accumulator, currentValue), initialValue)

where arr is the array

reduce() array method
callback() - a function to execute on each array element often called reducer (required)
accumulator - accumulated return value
currentValue - current array element been use
initialValue - a value pass to the function as the initial value (optional)

Return value: reduce() return a single value

Since we have some basic understanding of this concepts, let us get our hand dirty by writing some code.

Example 1: Let get the sum of element in an array

//without initialValue
const arr = [1, 2, 3, 4, 5];
const reduceArr = arr.reduce((acc, cur) =>{
    return acc + cur; 
}); // 1 + 2 + 3 + 4 + 5
console.log(reduceArr); // output: 15


//initialValue argument is pass into the reduce method
const arr = [1, 2, 3, 4, 5];
const reduceArr = arr.reduce((acc, cur) =>{
    return acc + cur;
}, 2); // 2 + 1 + 2 + 3 + 4 + 5
console.log(reduceArr); // output: 17

The reducer walks through the array, element by element adding the current array element to the previous result, If the initial value is not stated the addition starts from array (acc = arr[0]) index 0 and the current value at index 1.

If the initial value is provided, the addition starts from the initial value (acc = initialValue) and the current value starts at index 0. The reducer does this until there are no element left in the array.

Example 2: Find minimum number in an array

const arrMin = [10, 12, 30, 4, 15];
const findMin = arrMin.reduce((acc, cur) =>{
    return Math.min(acc, cur);
});
console.log(findMin); // 4

Reducing an empty array with no initial value will throw a TypeError, so it's a good practice to provide the initial value before reducing.

Example 3: Filter non numeric array element

const arr = [10, 'a', 'b', 'c', 20, 30, 40, 'c'];  
const filterArr = arr.reduce((acc, cur) =>{  
    if (typeof cur === 'number'){  
        acc.push(cur);  
    }  
    return acc;  
}, []);  
console.log(filterArr);  // [10, 20, 30, 40]

In this example the initial value is set to an empty array, then our current value start at index 0, the reducer (callback) iterate over the array element one by one checking if the current value type is numeric, if the current value of the array element is a number, the value get push into the empty array.

Example 4: Let's calculate the total amount of product in a shopping cart

const shoppingCart = [
    {
        product: 'monitor',
        quantity: 2,
        amount: 400,
    },
    {
        product: 'keyboard',
        quantity: 4,
        amount: 250,
    },
    {
        product: 'mouse',
        quantity: 3,
        amount: 150,
    }
];

const totalAmount = shoppingCart.reduce((acc, cur) =>{
    return acc + cur.quantity * cur.amount
}, 0);

console.log(totalAmount); // 2250

It is always safer to provide the initial value argument when you're manipulating array element

To make sure reduce() works, it must always return something.

Conclusion
For more info about how to use reduce() you can visit the MDN

Thanks for reading! 😃
I will like to receive feedback on what you think about the article. Email

DEV Community: Bolaji Bolajoko

RAG Implementation with LangChain

How RAG Works

Concepts

Indexing

Retrieval and Generation

Quick Overview

Personal Profile Chatbot

Pre-requisite:

Installation:

Personal information details:

Detailed Walkthrough

1. Indexing: Load

2. Indexing: Split

3. Indexing Store

Vector stores

Moving Forward

4. Retrieval and Generation

a. Retriever

b. Generate

Conclusion

Getting Started with AI Development: My Journey with Embeddings and Vector Databases

It All Started with Embeddings and Vector Databases

Embeddings

Why Do We Need Embeddings?

How Embeddings Help with Query Filtering

Vector Databases

How Embeddings and Vector Databases Work Together

Project: The Chef

Conclusion

React useOptimistic: Harnessing the power of snappy UIs!

useOptimistic(state, updateFn)

Parameters:

Returns:

More Insights on Parameters and Returned Values:

Optimistic Shopping List

Conclusion

How I built a custom image file uploader

Optimizing Performance in Next.js Using Dynamic Imports

Loading External Libraries

Demystifying JavaScript Arrays: A Comprehensive Guide for Beginners and Intermediates

Introduction

Understanding Arrays

Creating Arrays

Array indexing and Accessing Elements

Array Length and Manipulation

Looping through Arrays

For Loop

For...of Loop

Array Methods

Iteration Method

Multidimensional Array

Using Spread Operator with Arrays

How the spread operator works with Array

Summary

Conclusion

React useState Simplified

Introduction

Why useState?

State

useState in Action

When to use useState:

Conclusion

JavaScript Promises

Introduction

What is JavaScript Promise

Promise Methods

then()

Putting it together:

catch()

finally()

Promise Chaining

Error Handling in a Promise Chain

Putting it together

Promises best practices and tips

Conclusion

JavaScript Class Inheritance

Prerequisite:

Introduction

The extends Keyword

`useOptimistic(state, updateFn)`

Why `useState`?

`useState` in Action

When to use `useState`:

The `extends` Keyword

Overriding method using the `super`

Overriding constructor using `super()`

Creating JavaScript Object Properties Using `this` Keyword

What is JavaScript `reduce()` method?

How to use `reduce()` method