DEV Community: Kenneth Nnopu

Opmistic Update In Nextjs 14

Kenneth Nnopu — Mon, 19 Feb 2024 12:07:55 +0000

Ever been in a situation where you take an action say create a new user and the response takes too long to come back because of a number of reason that can include a slow api or a slow network or any number of reason?

React or in our case Nextjs which is a react framework comes to the rescue with the useOptimistic hook. It has always been frustrating having to wait for an update to finish before seeing the result of the update operation.

The useOptimistic hook has been available in react canary only but finally comes to core react and Nextjs. Packages like react-query achieves this but I'm happy it's finally built into the framework

Table of content

Syntax
Project Structure
How api update errors are handled
Conclusion.

1). Syntax

  const [optimisticProducts, setOptimisticProducts] = useOptimistic(
    state, // the current state
    (currentState, optimisticState) => {
      // optimistic state refers to the data we want to update
      // next combine the current state and optimistic state and return the result
    }
  );

The useOptimistic hook follows the reducer pattern, it takes in a state value and a callback function that specifies how the data should be manipulated

2). Project Structure

For our demonstration we attempt to build the a simple form that adds products for an e-commerce website, the page has 2 sections

1) The form that adds the product
2) A grid that shows all added products

A full link to the source code would be at the end of this article but for now I'll list out some the file and folder structure we would be creating

-src
--app
---components
----admin.tsx
----productCard.tsx
----productForm.tsx
----products.tsx
---actions.ts
---layout.tsx
----page.tsx

Files Work-through

Page.tsx file

import Link from "next/link";

import Admin from "./components/admin";
import { getProducts } from "./actions";

export default async function Home() {
  const products = await getProducts();

  return (
    <main className="bg-black">
      <header className="border h-14 items-center flex mb-6 p-4 justify-between">
        <Link href="/" className=" text-xl">
          Bettys Place
        </Link>
        <input
          type="search"
          name="search"
          id=""
          className="border w-[60%] max-w-[700px] rounded-xl py-1 px-6 text-black"
          placeholder="Search for products"
        />
        <div></div>
      </header>

      <Admin products={products} />
    </main>
  );
}

The project has one route which is the home route of the application. Here the data fetching call happens to get all the saved products and pass it as props to the admin component. This route serves as the main entry point for the application and provides a seamless user experience for managing products.

Actions.ts

"use server";

import { CreateProductRequest, Product } from "@/lib/types";
import { sleep } from "./helpers";
import { revalidatePath } from "next/cache";

export const createProducts = async (input: CreateProductRequest) => {
  try {
    await sleep(3000);
    await fetch("http://localhost:3000/api/products", {
      method: "POST",
      body: JSON.stringify({
        name: input.name,
        price: input.price,
        image: "https://dummyimage.com/100",
      }),
    });
    return true;
  } catch (error) {
    return false;
  } finally {
    revalidatePath("/");
  }
};

export const getProducts = async () => {
  try {
    const response = await fetch("http://localhost:3000/api/products");

    const data = await response.json();

    return data;
  } catch (error) {
    return [];
  }
};

The server action contains to function createProduct and getProduct make api call to a nextjs route to save and retrieve data as required. For now we ignore the revalidatePath call as it would make sense later on. The createProduct function sends a POST request to the nextjs route to save the product data, while the getProduct function sends a GET request to retrieve the product data as needed. These functions are essential for handling the communication between the server and the nextjs route, ensuring that the necessary data is saved and retrieved accurately.

ProductForm Component

"use client";
import React, { RefObject } from "react";

type ProductFormProps = {
  onCreateClick: (data: FormData) => void;
  ref: RefObject<HTMLFormElement>;
};

const ProductForm = ({ onCreateClick, ref }: ProductFormProps) => {
  return (
    <div className="flex items-center justify-center">
      <form
        className=" w-[50%] flex flex-col items-center"
        action={onCreateClick}
        ref={ref}
      >
        <div className="flex flex-col gap-2 mb-4">
          <label htmlFor="">Product Name: </label>
          <input
            type="text"
            name="name"
            className=" rounded w-[400px] h-10 text-black px-4"
          />
        </div>
        <div className="flex flex-col gap-4">
          <label htmlFor="">Price: </label>
          <input
            name="price"
            type="number"
            className=" rounded w-[400px] h-10 text-black px-4"
          />
        </div>

        <button className="border p-4 rounded-xl mt-6 w-[200px] bg-green-600">
          Create
        </button>
      </form>
    </div>
  );
};

export default ProductForm;

This form section take a ref used to reference the form and a client side action to handle the submit action of the form

The Products Component

import { Product } from "@/lib/types";

import ProductCard from "./productCard";


type ProductsSectionProps = {
  products: Product[];
};

const Products = ({ products }: ProductsSectionProps) => {
  return (
    <div className="w-full gap-4 justify-center flex flex-wrap">
      {products.map((product, i) => (
        <ProductCard key={i} product={product} />
      ))}
    </div>
  );
};

export default Products;


export type Product = {
  id: string;
  name: string;
  price: string;
  image: string;
};

This takes the products array mapping through it to render the data in a card component

The Admin Component

"use client";
import { useOptimistic, useRef } from "react";
import ProductForm from "./productForm";
import Products from "./productsSection";
import { Product } from "@/lib/types";
import { createProducts } from "../actions";

type AdminProp = {
  products: Product[];
};

const Admin = ({ products }: AdminProp) => {
  const formRef = useRef<HTMLFormElement>(null);
  const [optimisticProducts, setOptimisticProducts] = useOptimistic(
    products,
    (currentValue: Product[], optimisticValue: Product) => {
      return [...currentValue, optimisticValue];
    }
  );

  const handleCreateProducts = async (data: FormData) => {
    const name = data.get("name");
    const price = data.get("price");
    if (typeof name !== "string" || !name) return;
    if (typeof price !== "string" || !price) return;
    const product = {
      id: Math.random().toString(),
      name,
      price,
      image: "https://dummyimage.com/100",
    };
    /** 
        The setOptimisticProduct is called before the blocking
        createProducts so it optimistically updates the UI 
        before making a call to createProducts 
    **/
    setOptimisticProducts(product);
    formRef.current?.reset();
    await createProducts(product);
  };
  return (
    <>
      <div>
        <h2 className="text-center text-2xl mb-6">Create Products</h2>
        <ProductForm onCreateClick={handleCreateProducts} ref={formRef} />
      </div>

      <div className="mt-20">
        <h2 className="text-center text-2xl mb-6">Products</h2>
        <Products products={optimisticProducts} />
      </div>
    </>
  );
};

export default Admin;

The optimisticProduct and the setOptimisticProducts is where the magic happen

optimisticProduct is the returned product from the optimistic update
setOptimisticProducts takes in the optimistic value and fires the reducer function to combine the current state and the optimistic value for instant update

when we receive data from the api call, revalidatePath function is called in the createProduct server action that tells nextjs to dump the cache and refetch the data which now becomes the initial value of the useOptimistic hook since the data is passed as prop to the Admin component.

3). How api update errors are handled

A common question that might be on your mind is what happens if the api fails to update the data? won't the UI contains incorrect data?

The React team took this into account, since the call to get products happens at the top level where the response (list of products) are passed down as props, immediately the revalidatePath call is made nextjs refetches the products from the api. This will swap the existing data with the new data that does not contain the failed product thus it would be removed from the UI

4). Conclusion

All these comes together to make up a basic application that implements the optimistic UI, No matter how slow an endpoint is data would always be updated in the UI instantly. The full source code to the project can be found here

Binary Search Tree

Kenneth Nnopu — Mon, 23 Oct 2023 08:56:50 +0000

A binary search tree is a tree with the following properties

Ordered Structure: A search tree must be ordered in the sense that all nodes to the left of the tree must be less than the value of that node and all node to the right of the tree must be greater than the value of that node
Tree Structure**: All nodes must point to at most 2 nodes (left node and right node) called children of that node

1.1. Time Complexity
Since a binary search tree has an ordered structure operations on it are very efficient

Take the tree above for example, to find the Node with the value of 7 we don't have to to look at every single node in the tree, since we know every node larger than the current node must be to the right of that node we can use the divide and conquer algorithm to find that node

Start at the root.
Compare with the current node:
- If equal, target found.
- If less, go left.
- If greater, go right.
Repeat recursively in the chosen subtree until the target is found or the subtree is empty.

using this algorithm it would take exactly 3 steps at worse case to find the node with the value of 7 which is an O(logn) operation
Insert, Lookup and Remove have the same complexity of O(logn)

1.2. Node

A node in a binary search tree consist of three things, the value, pointer to the left and a pointer to the right (since each node can have elements to the left and right of itself).
In practice, a node would look like this

class Node {
  constructor(value){
    this.value = value
    this.left = left
    this.right = right
  }
}

2.0. Creating a binary search Tree

To create a tree, we need have a pointer to the root node in the tree or it would get garbage collected since it dosen't have an value assigned to it (The root node is the first node in the tree). A binary search tree constructor would look like this

class BinarySearchTree {
  constructor(value){
    const newNode = new Node(value)
    this.root = newNode
  }
}

In the example above we create a root node at the time of creating the Tree, It doesn't have to be doe this way, we can use the insert method to add elements to the tree. In this case the root node would be set to null at the time we are creating the Tree

constructor(){
  this.root = null
}

3.0. Operations on a binary tree

Now we have our search tree class we'll look at the various method on that class

3.1. Insert

To insert a node to a tree we use the following sequence of operations

Create a node
if root === null then root = node. End
Compare node with current item on the tree
- if less consider the node to the left
- if greater consider the node to the right
if null insert a node there else repeat go to step 3
End

  insert(value){
    const newNode = new Node(value)
    if(!this.root){
      this.root = newNode
      return this
    }
    const tempNode = this.root
    while(true){
     if(value == this.root.value) return undefined
     if(value > this.root.value){
       if(this.root.right == null){
        this.root.right = newNode
        return this
       }
       tempNode = this.root.right
     }
     if(value < this.root.value){
       if(this.root.left === null){
        this.root.left = newNode
        return this
       }
       tempNode = this.root.left
     }
    }
}

3.1. Contains

The contains method checks if a value is present in the binary tree. The fun thing about binary tree is that all methods we would see in this article has similar algorithms with a very tiny modification as we would see below
Pseudocode

if root === null then return false
loop through the tree
Compare value with current item on the tree
- if less consider the node to the left
- if greater consider the node to the right
- if element is equal, return true
return false
End

contains(value){
 if(!this.root) return false
 const temp = this.root
 while(temp){
  if(value === temp.value) return true
  if(value > temp.value){
   temp = temp.right
  }else{
   temp = temp.left
 }
 return false
}

4.0. Conclusion

In conclusion, understanding binary search trees is not just an academic exercise; it's a powerful tool that forms the backbone of many computing applications. As we've seen, the efficient search operations and simple yet elegant structure of BSTs make them indispensable in various fields. Whether you're optimizing database queries or implementing efficient search algorithms, the principles of binary search trees will continue to play a crucial role. As you continue your journey in data structures and algorithms, remember that mastering BSTs is not just about memorizing algorithms; it's about unlocking a deeper understanding of how computers efficiently organize and retrieve information.

Linked List Data Structure

Kenneth Nnopu — Mon, 16 Oct 2023 20:31:18 +0000

Linked list is one of many data structures in computer science having close relations to Arrays (Lists), I would be using arrays and list interchangeably throughout this article. It tends to solve one major drawbacks of Array data structure which is having the content of the list contiguous in memory, This means that if you have an array of integers, for example, the memory addresses for these integers will be sequential. This contiguous structures is essential in arrays to allow for efficient access to elements through index calculations and facilitates better cache utilisation.

This is all fine and good but imaging we don't know how many blocks on memory to allocate to the particular list (for dynamic lists), it's difficult for the Operating System to efficiently manage memory. Some programing languages tends to solve this in their own way, for instance in Javascript as the list grows is the next block of memory is not available for the next item, it moves the entire list to a different part of memory for it to be contiguous in a process known as dynamic resizing.

Linked list comes to the rescue in the sense that element of the list don't have to be contiguous in memory, they can be anywhere which makes it more efficient in memory. Each items of the list (Node) has a pointer to the next element on the list or null of there is no more element on the list.

1.1 Creating a Linked List

In the basic form, a linked list is just a collection of Nodes with two pointers, one pointing to the head and another pointing to the tail on the list. A Node is a single item in a list, a node itself contains a value and a pointer to the next node on the list

A simple Representation of a linked list as you can see from the diagram above, each node has a pointer to the next node or null if no next node exist and the Linked List keeps track of the head and tail at all points.

Linked List Under the Hood

1.2 Creating a Node

To create a linked list class we first have to create a node, since a linked list is just a collection of nodes. I would be using Javascript for the purpose of this demonstration

Class Node {
  constructor(value){
    this.value = value //current value of the node
    this.next = null  // pointer to the next node or null
  }
}

Next we create the Linked list class

Class LinkedList {
  constructor(value){
    this.head = new Node(value)
    this.tail = this.head
    this.length = 1
  }
}

Like I said earlier, the linked list keeps track of the head, tail and the length of the list, at the point of initialisation a new node is created and assigned to both the head and the tail since at this point the list has only one item which is both the head and the tail.

const newList = new LinkedList(4) //creates a link with a value of 4

Time complexity of various methods in a linked list versus arraysNext we implement the various operation that happens on the list, these operations are shown in the diagram below as well as their time complexity

2.3 Operations on a linked list

a)Push:
This is adds a node to the end of the list. The sequence of operations that happens are as follows

A new node is created
If the list is empty, point both the head and the tail to the new node created. End.
point the next value on the tail (since its the last item) to the new node
reassign the tail value to the new node
increase the length
End

push(value){
  const newNode = new Node(value)
  if(!this.head){
    this.head = newNode
    this.tail = newNode
    this.length++
  }else{
    this.tail.next = newNode
    this.tail = newNode
    this.length++
  }
}

b) Pop:

This is a little more complicated that the push method and a few more edge cases to look at. The Pop method removes an item from the end of the list, the sequence of operations are as follows.

if the list is empty, do nothing
if only one item is in the list set the head and tail to null
move the tail to the previous item in the list
set the next property of the tail to null
decrement the length
End

This is an O(n) operation since we need to iterate over the entire list to get the previous element from the tail

pop(){
  if(!this.head) return undefined
  if(this.length == 1) {
    const temp = this.head
    this.head = null
    this.tail = null
    this.length--
    return temp
  }
  let prevNode = null
  let currentNode = this.head
  while(currentNode.next){
    const temp = currentNode.next
    prevNode = currentNode
    currentNode = temp
  }
  this.tail = prevNode
  this.tail.next = null
  this.length--

  return currentNode
}

b) Unshift:
This adds a new node to the beginning of the list, the sequence of operations are as follows

create a new node
if the list is empty, point the head and tail to the new node created and increment the length. End.
make the next value of the new node created point to the head of the list
move the head pointer over to the new node created
increment the length
End

unshift(value){
 const newNode = new Node(value)
  if(!this.head){
    this.head = newNode
    this.tail = newNode
  }else{
    newNode.next = this.head
    this.head = newNode
  }
  this.length++
}

d) Shift:
The shift operation removes an item from the beginning of a list. The edge cases here are similar to the pop operations, the shift method has the following sequence of operations are as follows

if the list is empty return undefined
if only one items is present set the head and tail to null and set the length 0
set the head pointer the the next value in the list
decrement the length
End

shift(){
  if(!this.head) return undefined
  const temp = this.head
  if(this.length == 1) {
    this.head = null
    this.tail = null
  }else{
    this.head = this.head.next
  }
    this.length--
    temp.next = null
    return temp
}

e) Get :
The get method is used to return an item at a given index, it takes and index and return a value. Here unlike arrays this operation is an O(n) operation because we have to iterate over the entire list up until the given index in other to get the value at that index. Here are the sequence of operation and the edge case to look out for

if given index is less than 0 or greater than the length of the list, return undefined
iterate over the list from the head (first item or index 0) up until the given index (i)
return the value at that index
End

get(index){
  if(index < 0 || index >= this.length) return undefined
  if(index == 0) return this.head
  let currentNode = this.head
  for(let i = 0; i < index; i++){
    currentNode = currentNode.next
  }
  return currentNode
}

f) Set :
The Set method is very similar to the Get method the only difference her is that instead of just getting the value at the given index, we want to change the value at that index. The index here to set must be within the range of the list and since its very similar to the Get method, we are going to reuse that method

get the node at the index
change the value of that node to the given value
increment the length
End

set(index, value){
  const node = this.get(index) // reusing the get method defined above
  if(node){
    node.value = value
    this.length++
    return true
  }
  return false
}

g) Insert:
The insert method enters a new value to a given index in the list, unlike the Set method this inserts a new node to the list and does not modify the value of existing nodes in the list. As usual, we handle the edge cases first and the operations are as follows

if index is equal to zero (0), reset the head pointer to the new node and the next value of the new node to the previous head (similar to the unshift method). End
if the index is outside the bounds of the list, return undefined
iterate over the list up until the given index, keeping track of the previous node and the current node
set the next value of the previous node to the new node
set the next value of the new node to the current node
increment the length
End

insert(index, value) {
    if (index == 0) return this.unshift(value)
    if(index == this.length) return this.push(value)
    if(index < 0 || index > this.length) return undefined
    const newNode = new Node(value);
    let prevNode = this.head;
    let currentNode = this.head;
    for (let i = 0; i < index; i++) {
      prevNode = currentNode;
      currentNode = currentNode.next;
    }
    prevNode.next = newNode;
    newNode.next = currentNode;
    this.length++
  }

h) Remove:
This removes an item from a particular index in the list, for this we would be reusing some of the method previously created

if the index is zero, use the shift method to remove the item from the beginning
if the item is at the end of the list, use the pop method to remove the item
if the item is out of the bound of the list, return false
iterate over the list up until the given index, keeping track of the previous node and the current node
set the next value of the previous node to the next value of the current node
set the next value of the current node to null
decrement the length
End

remove(index){
  if (index == 0) return this.shift()
  if(index == this.length) return this.pop()
  if(index < 0 || index > this.length) return undefined
  let prevNode = this.head;
  let currentNode = this.head;
  for (let i = 0; i < index; i++) {
    prevNode = currentNode;
    currentNode = currentNode.next;
  }
  prevNode.next = currentNode.next
  currentNode.next = null
  this.length--
}

i) Reverse:
This is one of the tricky questions that comes up in a coding interview, the process is a little bit more complex but once you understand the pattern to follow you realise it not as complex as you think. With reverse the entire list is swapped and the first becomes the last and so on, top do this we keep track of three variables at all times i.e, the previous value, the current value and the next value. These three pointers are moved as we iterate over the list, for each value we set the next pointer to the previous value. The operations are as follows

swap the head and tail pointers
define three pointers, (previousNode, currentNode and nextNode)
set the previousNode to null, set the currentNode to the head and set the nextNode to the next value currentNode
swap the head and the tail pointers
iterate over the list and for each node, set the next value of that node to be equal to the previous node
End

reverse(){
  if(!this.head) return false
  let prevNode = null
  let currentNode = this.head
  let nextNode = null

  //swap head and tail
  this.head = this.tail
  this.tail = currentNode

  if(this.length == 2) return this

  for(let i = 0; i < this.length; i++){
    nextNode = currentNode.next
    currentNode.next = prevNode
    prevNode = currentNode
    currentNode = nextNode
  }
}

This concludes the major operations on a linked list. All codes can be found on the github link

5 Essential Concepts for Working with Arrays in JavaScript.

Kenneth Nnopu — Mon, 06 Mar 2023 08:03:49 +0000

Arrays are one of the most commonly used data structures in programming, and for good reason: they allow you to store and manipulate collections of values in a flexible and efficient way. In JavaScript, arrays are a built-in data type that can be used to store any type of value, from strings and numbers to objects and functions. In this article, we'll explore five essential concepts for working with arrays in JavaScript, including creating and manipulating arrays, and using array methods like map(), filter(), and reduce().

1. Creating and Initializing Arrays
To create an array in JavaScript, you can use square brackets [] and separate the values with commas:

const myArray = [1, 2, 3, 4, 5];

You can also create an empty array and add elements to it later:

const myEmptyArray = [];
myEmptyArray.push("hello");
myEmptyArray.push("world");

Arrays can contain any type of value, including other arrays and objects:

const nestedArray = [[1, 2], [3, 4], [5, 6]];
const objectArray = [{name: "Alice", age: 30}, {name: "Bob", age: 25}];

2. Accessing Array Elements
You can access elements of an array using the square bracket notation and the index of the element:

const myArray = [1, 2, 3, 4, 5];
const thirdElement = myArray[2]; // returns 3

You can also modify elements of an array using the same notation:

myArray[2] = 6; // modifies the third element to be 6

3. Array Methods: map(), filter(), and reduce()

JavaScript provides a number of built-in methods for working with arrays. Three of the most commonly used methods are map(), filter(), and reduce().

map()
The map() method creates a new array by applying a function to each element of an existing array:

const myArray = [1, 2, 3, 4, 5];
const doubledArray = myArray.map((element) => element * 2);
// doubledArray is now [2, 4, 6, 8, 10]

In this example, the arrow function (element) => element * 2 is applied to each element of myArray, creating a new array where each element is twice the value of the original.

filter()
The filter() method creates a new array containing only the elements of an existing array that meet a certain condition:

const myArray = [1, 2, 3, 4, 5];
const evenArray = myArray.filter((element) => element % 2 === 0);
// evenArray is now [2, 4]

In this example, the arrow function (element) => element % 2 === 0 filters out any elements that are not even.

reduce()
The reduce() method applies a function to each element of an array to reduce it to a single value. The function takes two arguments: an accumulator and the current element, and returns a new accumulator value:

const myArray = [1, 2, 3, 4, 5];
const sum = myArray.reduce((accumulator, element) => accumulator + element, 0);
// sum is now 15

In the example above (accumulator, element) => accumulator + element the accumulator refers the computed value so far and is changed for every element in the array and the element refers to the current value in the iteration of the array. The accumulator is 0 initially and is increased by the value of the element