Insertion Sort is one of the most intuitive sorting algorithms out there.

Imagine you’re sitting at a table playing a card game. The dealer hands you a pile of unsorted cards face down. You pick up the cards one by one to arrange them in your hand from smallest to largest.

Here is how your brain naturally handles it:

1. You pick up the first card. It’s a 7. Since it's the only card in your hand, it's already "sorted."

2. You pick up the second card. It’s a 3. You look at the 7, realize 3 is smaller, and insert it to the left of the 7.

3. You pick up a third card. It’s a 5. You compare it to the 7 (bigger, so you move past it) and then the 3 (smaller). You insert the 5 right between the 3 and the 7.

4. That is literally all Insertion Sort is! It builds a sorted list one item at a time by constantly "inserting" the current item into its correct position among the items already sorted.

How It Works (Step by Step)

1. Assume the very first element in the array is already sorted.

2. Move to the next element (let's call this the Key).

3. Compare the Key with the elements before it (to its left).

4. Shift all elements that are greater than the Key to the right to make room.

5. Insert the Key into its correct, empty slot.

6. Repeat for all remaining elements until the whole array is sorted.

The Walkthrough

Let's watch this happen with a real array of numbers: [5, 2, 4, 6, 1, 3].

• Start: [5, 2, 4, 6, 1, 3] The first element (5) is our sorted zone.

• Iteration 1: Key is 2. Compare 2 with 5. Since 5 is bigger, shift 5 to the right and insert 2.

  • Array becomes: [2, 5, 4, 6, 1, 3]

• Iteration 2: Key is 4. Compare 4 with 5 (shift 5 right), then compare 4 with 2 (2 is smaller, so stop). Insert 4.

  • Array becomes: [2, 4, 5, 6, 1, 3]

• Iteration 3: Key is 6. Compare 6 with 5. Since 6 is already bigger than 5, it's in the right spot! No shifting needed.

  • Array becomes: [2, 4, 5, 6, 1, 3]

• Iteration 4: Key is 1. This is a tiny number, so it compares against 6, 5, 4, and 2, shifting all of them to the right, and drops into the very front.

  • Array becomes: [1, 2, 4, 5, 6, 3]

• Iteration 5: Key is 3. Compare and shift 6, 5, and 4 to the right. Stop at 2. Insert 3.

  • Array becomes: [1, 2, 3, 4, 5, 6]

Example Code

Here is how we write this in clean, readable JavaScript. Paste this into your browser console or code editor to play around with it!

function insertionSort(arr) {
   // Start from the second element (index 1) because index 0 is already "sorted"
   for (let i = 1; i < arr.length; i++) {
      let currentKey = arr[i];
      let j = i - 1; 

         // Look backward through the sorted section.
         // If an element is larger than our currentKey, shift it one position to the right.
         while (j >= 0 && arr[j] > currentKey) {
            arr[j + 1] = arr[j];
            j--;
            // Move left to check the next element 
         }

      // Insert the currentKey into its correct, empty position
      arr[j + 1] = currentKey;
   }

   return arr;
} 

const numbers = [5, 2, 4, 6, 1, 3];
console.log("Sorted Array:", insertionSort(numbers)); // Output: [1, 2, 3, 4, 5, 6]

🌟 Best Case: O(n)

Imagine you give this algorithm an array that is already sorted, like [1, 2, 3, 4, 5]. The algorithm will check each number once, realize it doesn't need to shift anything, and smoothly finish. It runs in linear time, which is incredibly fast!

🐌 Worst Case: O(n^2)

Imagine the array is completely backward, like [5, 4, 3, 2, 1]. For every single number, the algorithm has to compare and shift every single other number before it. This results in quadratic time. If your array grows 10x larger, the time it takes grows 100x larger!

🧳 Space Complexity: O(1)

Because Insertion Sort rearranges elements directly inside the original array without creating a copy or a new array, it uses virtually no extra memory. This is called sorting in-place.

Wrap up

If Insertion Sort can get terribly slow with large datasets (O(n^2)), why do we care about it?

Because it shines in specific real-world situations:

• Small datasets: For lists with just a few items, Insertion Sort is actually faster than algorithms like Quick Sort because it has almost zero administrative overhead.

• Nearly sorted data: If you are constantly adding a few new entries to a database that is already mostly sorted, Insertion Sort will clean it up in record time.

Selection Sort is one of the most intuitive sorting algorithms in computer science. It repeatedly selects the smallest item from an unsorted list and moves it to its correct position.

How it Works: Sorted vs. Unsorted

Selection Sort takes a single list of data and conceptually divides it into two sides:

1. The Sorted Side (on the left)

2. The Unsorted Side (on the right)

When you start, the sorted side is completely empty, and the unsorted side contains all your data.

Here is the exact step-by-step logic the computer follows:

• Step 1: Start at the very beginning of the unsorted list.

• Step 2: Scan through the rest of the unsorted items to find the absolute smallest value.

• Step 3: Swap that smallest value with the item currently at the starting position.

• Step 4: Move your starting point one spot to the right (since the previous spot is now officially "sorted").

• Step 5: Repeat the process until you reach the end of the list.

Step-by-Step Walkthrough

Selection Sort in action with a small array of numbers: [29, 10, 14, 37, 13]. Our goal is to sort them from smallest to largest.

Starting State

Unsorted: [29, 10, 14, 37, 13]

Sorted: []

Pass 1

• We scan the whole list looking for the smallest number. It’s 10.

• We swap 10 with the number in the first position (29).

• Array becomes: [10, 29, 14, 37, 13]

• Sorted so far: [10]

Pass 2

• We look at the remaining unsorted numbers: [29, 14, 37, 13].

• The smallest number here is 13.

• We swap 13 with the number in the second position (29).

• Array becomes: [10, 13, 14, 37, 29]

• Sorted so far: [10, 13]

Pass 3

• We look at the remaining unsorted numbers: [14, 37, 29].

• The smallest number is 14. Since it's already in the correct spot, no swap is needed!

• Array stays: [10, 13, 14, 37, 29]

• Sorted so far: [10, 13, 14]

Pass 4

• We look at the remaining unsorted numbers: [37, 29].

• The smallest number is 29.

• We swap 29 with the number in the fourth position (37).

• Array becomes: [10, 13, 14, 29, 37]

Final State

• Because there is only one number left (37), it must automatically be in the correct spot.

• Final Sorted Array: [10, 13, 14, 29, 37]

Example Code

def selection_sort(arr):
   # Get the total number of items in the list
   n = len(arr)
   
   # Loop through the entire array
   for i in range(n):
      # Assume the current item is the smallest for now
      min_index = i
      
         # Scan the rest of the array to find the actual smallest item
         for j in range(i + 1, n):
            if arr[j] < arr[min_index]:

               # We found a new smallest item! Remember its position
               min_index = j
            
            # Swap the smallest item we found with the item at our current position
            arr[i], arr[min_index] = arr[min_index], arr[i]
   return arr

# Test the algorithm
example_list = [29, 10, 14, 37, 13]
print("Sorted list:", selection_sort(example_list))

The Good (Pros)

• Easy to Understand: It’s incredibly simple to write and debug.

• Low Memory Usage: It sorts the list "in-place," meaning it doesn't need to create copies of your list or use extra computer memory to do its job.

• Minimal Swapping: It only performs one swap per pass. If writing data to a disk is expensive/slow, Selection Sort is highly efficient with its moves.

The Bad (Cons)

• It’s Slow: Selection Sort has to look through the unsorted list over and over again. If you double the size of your list, the sorting time doesn't just double; it quadruples!

• It Ignores Existing Order: Selection Sort is "blind" to whether a list is already partially sorted. Even if you give it a list that is perfectly sorted from the start, it will still stubbornly scan every single item to double check.

Use Selection Sort if you are dealing with a very small amount of data, or if you need a quick and dirty algorithm that uses almost zero extra memory. If you are dealing with thousands or millions of items, you'll want to upgrade to faster algorithms like Merge Sort or Quick Sort!

Bubble Sort is a sorting algorithm. It works by comparing two neighbouring elements and swapping them until the list is sorted.

The Algorithm

1. Compare: Look at the first two elements

2. Swap: If the first element is greater than the second element, swap them.

3. Move: Move to the next pair and repeat until you reach the end of the list.

4. Repeat: Go back to the start and repeat the process until the list is sorted.

Example
Consider the following list [4, 6, 1, 3, 5, 2]

1. Compare the first two elements. 4 and 6.

2. 6 is greater than 4. Move to the next index.

3. Move to the next pair, 6 and 1.

4. 6 > 1, swap them.

5. The new list becomes [4, 1, 6, 3, 5, 2]

6. Move to the next pair. 6 and 3. 6 > 3 , swap them -> [4, 1, 3, 6, 5, 2]

7. Move to the next pair. 6 and 5. 6 > 5, swap them -> [4, 1, 3, 5, 6, 2]

8. Move to the next pair. 6 and 2. Again 6 > 2, swap them -> [4, 1, 3, 5, 2, 6]

9. The first iteration is completed.

10. Now move to the start and follow the same steps until the list is sorted.

Example Code

def bubble_sort(arr):
    n = len(arr)

    # Traverse through all array elements
    for i in range(n):
        swapped=False

        # Last i elements are already in place, so we ignore them
        # Traverse the array from 0 to n-i-1
        for j in range (0, n-i-1):
            # Swap if the element found is greater than the next element
            if arr[j] > arr[j+1]:
                arr[j], arr[j+1] = arr[j+1], arr[j]
                swapped = True

        # If no two elements were swapped by inner loop, then break
        if not swapped:
            break
            
    return arr

As software systems grow, complexity increases. Features expand, requirements shift, teams scale and code that once felt clean becomes fragile. The difference between code that scales and code that collapses often lies in design principles. One of the most influential sets of principles in software engineering is SOLID,. SOLID is not about writing more code. It’s about writing code that remains maintainable, extensible, and understandable over time.

Let’s explore each principle with simple examples and clear advantages.

1. Single Responsibility Principle (SRP)

A module should have only one reason to change. If a unit of code handles multiple responsibilities, a change in one area risks breaking another.

// Poor Design
class InvoiceService {
   generateInvoice() {}
   saveToDatabase() {}
   sendEmail() {} 
}

This class

• handles business logic

• manages persistence

• sends notifications

It has multiple reasons to change.

// Better Design
class InvoiceGenerator {} 
class InvoiceRepository {} 
class EmailService {} 

Each class has one clear responsibility.

Advantages

• Easier testing

• Safer modifications

• Better readability

• Improved reusability

• Reduced unintended side effects

When responsibilities are isolated, systems become predictable.

2. Open/Closed Principle (OCP)

Software entities should be open for extension but closed for modification. You should be able to add new behavior without modifying existing code.

// Poor Design
function calculatePrice(type: string) { 
   if (type === "standard") return 100; 
   if (type === "premium") return 200;
}

Every new type requires editing this function increasing risk.

// Better Design
interface PricingStrategy { calculate(): number; }

class StandardPricing implements PricingStrategy {
   calculate() {
      return 100;
   }
}

class PremiumPricing implements PricingStrategy {
   calculate() {
      return 200;
   }
}

Now new pricing types can be added without modifying existing logic.

Advantages

• Lower risk of regression

• Easier feature expansion

• Cleaner system evolution

• Encourages modular design

Systems built with OCP scale more gracefully.

3. Liskov Substitution Principle (LSP)

Subtypes must be replaceable for their base types without altering correctness. If a derived type cannot fully behave like its base type, the abstraction is broken.

// Poor Design
class Bird { fly() {} }

class Penguin extends Bird {
   fly() {
      throw new Error("Cannot fly");
   }
}

The abstraction is incorrect. Not all birds fly.

// Better Design
class Bird {}

class FlyingBird extends Bird {
   fly() {}
}

class Penguin extends Bird {}

The hierarchy reflects reality.

Advantages

• Stronger abstractions

• Fewer runtime errors

• More reliable polymorphism

• Easier refactoring

When LSP is respected, your type system becomes trustworthy.

4. Interface Segregation Principle (ISP)

Clients should not be forced to depend on methods they do not use. Large, bloated interfaces create unnecessary coupling.

// Poor Design
interface Worker {
   work(): void;
   eat(): void;
}

Not all workers may need both behaviors.

// Better Design
interface Workable {
   work(): void;
}

interface Eatable {
   eat(): void;
}

Now types implement only what they actually need.

Advantages

• Reduced coupling

• More flexible systems

• Smaller change impact

• Cleaner abstractions

ISP promotes precision in design.

5. Dependency Inversion Principle (DIP)

High level modules should not depend on low level modules. Both should depend on abstractions. When high-level logic directly depends on implementation details, flexibility suffers.

// Poor Design
class NotificationService {
   constructor() {
      this.emailClient = new EmailClient(); 
   }
}

The service is tightly coupled to a specific implementation.

// Better Design
interface MessageSender {
   send(message: string): void;
}

class NotificationService {
   constructor(private sender: MessageSender) {} 
}

Now the service depends on an abstraction.

Advantages

• Easier testing

• Implementation flexibility

• Cleaner architecture

• Better scalability

• Looser coupling

DIP is foundational for maintainable systems.

Why SOLID Matters

SOLID is not about patterns. It’s about reducing change risk. When applied consistently, these principles:

• Decrease technical debt

• Improve code readability

• Simplify onboarding

• Reduce fear of refactoring

• Increase long term system stability

Many teams don’t struggle because developers lack skill, they struggle because structure was never prioritized.

SOLID provides structure.

Conclusion

Good code works. Great code continues to work even after years of change. SOLID is less about perfection and more about sustainability. And in long term software development, sustainability wins.

useEffect hook is one of the most powerful and misunderstood hooks. It handles side effects, runs after rendering, replaces lifecycle methods, and synchronizes your component with external systems such as APIs, subscriptions, DOM manipulation, timers, or logging. However, as your application grows, useEffect can become a source of bugs, race conditions, duplicate network calls, and performance regressions if not used correctly. This blog covers useEffect usage, best practices, patterns, and pitfalls that even experienced developers run into.

What Exactly Is a Side Effect?

React's render function must be pure meaning it cannot modify variables outside its scope, perform I/O, or change the DOM. Anything that breaks purity is a side effect, for example:

• Fetching data

• Subscribing to WebSockets

• Setting timers

• Writing to localStorage

• Manipulating the DOM

• Syncing app state with URL or props

useEffect allows these operations in a safe, predictable way.

Core Concept

useEffect Runs After Render (Not During Render)

useEffect(() => {
   console.log("Runs after render");
});

This guarantees:

• The DOM is updated before the effect runs.

• Effects never block rendering.

• Effects run asynchronously.

The Dependency Array

The dependency array controls when the effect should re-run.

1. Run on every render

   useEffect(() => {
      console.log("runs on every render"); 
   });

2. Run only once (on mount)

   useEffect(() => {
      console.log("mounted"); 
   }, []);

   Equivalent to componentDidMount.

3. Run when dependencies change

   useEffect(() => {
      console.logUser changed: ${userId});
   }, [userId]);

   Equivalent to componentDidUpdate(userId).

4. Run on unmount (cleanup)

   useEffect(() => {
      return () => console.log("unmounted"); 
   }, []);

   Equivalent to componentWillUnmount.

Cleanup Functions

Cleanup is essential for:

• unsubscribing event listeners

• aborting fetch requests

• closing WebSockets

• clearing intervals

• canceling timeouts

useEffect(() => {
   const id = setInterval(() => {
      console.log("tick");
   }, 1000);

   return () => clearInterval(id); // cleanup 
}, []); 

Every time the effect re-runs, cleanup executes before running the next effect.

Avoiding Infinite Loops

This code causes an infinite loop

useEffect(() => {
   setCount(count + 1);
});

Because setCount changes state -> triggers re-render -> triggers effect -> repeats forever.

Fix using dependencies

useEffect(() => {
   setCount(count + 1);
}, []); // runs only once

Fetching Data Correctly

Beginners often write

useEffect(() => {
   fetch("/api").then(...);
}, []);

This works but has problems

• Cannot cancel outdated requests

• Race conditions when dependency changes

• Causes warnings in React Strict Mode

Safe pattern:

useEffect(() => {
   const controller = new AbortController();

   async function load() {
      try {
         const res = await fetch("/api", { signal: controller.signal });
         const data = await res.json();
         setData(data);
      } catch (e) {
         if (e.name !== "AbortError") console.error(e);
      } 
   }

   load();

   return () => controller.abort();
}, []); 

Performance Tip

Use useEffect Only for Side Effects

Not everything requires an effect.

Bad (overusing effects)

useEffect(() => {
   setFiltered(users.filter(u => u.active));
}, [users]);

Better (derive inside render)

const filtered = users.filter(u => u.active); 

Effects should not calculate derived state, they only handle side effects.

Effect Dependencies

Every value used inside an effect must appear in its dependency array.

Example: Missing dependency

useEffect(() => {
   console.log(user.name); // depends on user 
}, []); 

React will warn you.

Correct

useEffect(() => {
   console.log(user.name); 
}, [user]);

Fixing Stale Closures

Consider:

useEffect(() => {
   const id = setInterval(() => { 
                 console.log(count); // stale value! 
              }, 1000);

   return () => clearInterval(id); 
}, []);

Here, count is always the initial value.

Solutions

• Add count as dependency (causes interval resets)

• Use functional state updates

• Use refs

Improved version

useEffect(() => {
   const id = setInterval(() => {
                 setCount(prev => prev + 1);
              }, 1000);

   return () => clearInterval(id);
}, []);

Equivalent Lifecycle Methods in Class Components

• componentDidMount -> useEffect(..., [])

• componentDidUpdate -> useEffect(..., [deps])

• componentWillUnmount -> useEffect(() => return cleanup, [])

• getDerivedStateFromProps -> Not directly an effect (use memo/derived data)

Common Pitfalls & How to Avoid Them

1. Running effects too often

   Fix: Use proper dependencies.

2. Using objects/arrays without memoization

   Fix:

   const options = useMemo(() => ({ limit: 10 }), []);
   
   useEffect(() => { ... }, [options]);

3. Fetching data incorrectly

   Fix: Use AbortController or a library like SWR/React Query.

4. Using effects to perform calculations

   Fix: Calculate inside render or use useMemo.

Common Interview Questions

• Why do effects run twice in React Strict Mode?

  To detect unsafe side effects.

• How do you avoid stale closure bugs inside effects?

  Functional updates or refs.

• Why must all dependencies be listed?

  To maintain predictable behavior and avoid stale values.

• What is the difference between an effect and layout effect?

  useLayoutEffect runs before the browser paints. useEffect runs after the paint.

• How do you cancel network requests inside an effect?

  AbortController.

When Not To Use useEffect

Avoid effects when:

• You’re computing derived state

• You can use CSS instead of JS to manipulate DOM

• You’re syncing two pieces of state

Example of overkill

useEffect(() => {
   setFullName(`${first} ${last}`);
}, [first, last]);  

Better

const fullName = `${first} ${last}`

Conclusion

useEffect is extremely powerful, but with great power comes great responsibility. Used correctly, it allows your app to sync with the outside world safely. Used incorrectly, it creates bugs, unnecessary renders, and spaghetti logic.

Focus on

• Use correct dependencies

• Perform cleanups

• Avoid overusing useEffect

• Understand async behaviour

• Prevent stale closures

React provides several powerful hooks to help developers manage state and side effects inside functional components. One of the most commonly used hooks and usually the very first one you learn is the useState hook. If you’ve ever wanted a way for your component to “remember”(in memory) something and react when it changes, this guide explains everything you need.

What is useState?

useState is a React hook that allows you to add a state variable to your functional component. A state variable is any piece of data that React should track over time, and whenever it changes, your component re-renders to reflect the update.

Basic Syntax

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

This returns an array with:

• state : current value

• setState : a function to update that value

How useState Works

React remembers the state across renders, updates it when setState is called, and re-renders the component with the new value.

Using useState

Let’s look at a simple example where we store and update text from an input box:

import { useState } from "react";

export default function MyComponent() { 
   // initial state is an empty string 
   const [value, setValue] = useState("");

   const updateValue = (e) => { setValue(e.target.value); };

   return (
      <div>
         <input onChange={updateValue} placeholder="Change Value" />
         <p>The state value is {value}</p>
      </div>
   );
}

What happens here?

• The state variable value starts as "".

• When you type into the input, updateValue runs.

• setValue updates the state.

• The component re-renders, showing the new value.

Understanding Initial State

You can set the initial state to anything:

useState(0)                        // number
useState("")                       // string
useState(null)                     // null
useState([])                       // array
useState({})                       // object
useState(() => computeExpensive()) // lazy initialization

Note: If you start with null or undefined, make sure your code handles it safely.

Updating State:

Two Approaches

1. Set state directly

   Useful when new state does not depend on the previous one.

   setState("next value"); 

2. Functional updates

   Recommended when previous state matters.

   setState(prev => prev + 1);

   This ensures React calculates the next state using the latest value.

State Updates are Asynchronous

React batches updates for performance, meaning calling setState does not update the value immediately. Example that does NOT work as expected:

const [count, setCount] = useState(0);

   setCount(count + 1); // setCount(0 + 1)
   setCount(count + 1); // setCount(0 + 1)
   setCount(count + 1); // setCount(0 + 1)

All three updates use the same initial value (0) because they are queued before the component re-renders. Final result is 1, not 3.

Correct version:

setCount(prev => prev + 1); // setCount(0 + 1)
setCount(prev => prev + 1); // setCount(1 + 1)
setCount(prev => prev + 1); // setCount(2 + 1)

Now React uses the updated value each time. Final result is 3.

Common Mistakes

1. Expecting state to update immediately

   Beginners often write:

   setValue("new");
   console.log(value); // still old

   React updates state on the next render, not instantly.

2. Updating state based on old value without functional update

   Incorrect:

   setCount(count + 1);
   setCount(count + 1);

   Correct:

   setCount(prev => prev + 1);

3. Mutating state directly

   Example:

   obj.name = "Rajesh";

   React won’t re-render.

   Correct:

   setStateObj(prev => ({ ...prev, name: "John" }));

4. Forgetting that initial state is used only once

   This does NOT recalculate on every re-render:

   useState(Math.random());

   It runs only on the first render.

5. Using state when a variable would suffice

   Not everything needs to be stored in state. If something doesn’t need to trigger a re-render, use useRef or a normal variable.

Common React Interview Questions on useState

1. What does useState return?

   A tuple: [state, setState].

2. Why does React batch state updates?

   For performance, multiple updates happen in one render cycle.

3. Why should you use a functional update?

   When the next state depends on the previous one.

4. Can you explain why reading state immediately after setting it returns the old value?

   Because setState is asynchronous and scheduled for the next render.

5. What is lazy initialization in useState?

   Passing a function to useState: useState(() => expensiveComputation()); The function runs only on the initial render.

6. Why can’t we conditionally call useState?

   React hooks rely on consistent order across renders. Conditional hooks break that order.

Conclusion

useState is simple but incredibly powerful. It lets your components store data, respond to user input, and re-render when needed. Once you understand that state updates are asynchronous and how functional updates work, you’ll write far fewer bugs and much cleaner React code.

The useWindowSize hook in react is very useful when you require javascript to get the size of the device and render the contents as required. It very useful when working with various sizes of devices. It can be useful when working with responsive designs. The following code demonstrates how one can implement the useWindowSize hook in their next project.

import { useEffect, useState } from "react"; 

export default function useWindowSize() { 
   // state of the window 
   const [windowSize, setWindowSize] = useState({ width: 0, height: 0, });

   // function to handle window resizing. 
   const resizeWindow = () => { 
      setWindowSize({ width: window.innerWidth, height: window.innerHeight }); 
   };

   useEffect(() => { 
      resizeWindow();

      // event listener for handling window size change. 
      window.addEventListener("resize", resizeWindow);

      // cleanup the side effects
      return () => window.removeEventListener("resize", resizeWindow);
   }, []); 

   // return window size
   return windowSize; 
}

You can use the hook in your required tsx/jsx file as follows:

import useWindowSize from "./useWindowSize";

export default function MyResponsiveComponent(){
   const {width, height} = useWindowSize()

   if (width > 375) {
      return <TabletView/>
   } else if (width > 1200) {
      return <DesktopView/>
   } else if (height > 1000) {
      return <LargeHeightView/>
   } else {
      return <MobileView/>
   }
}

You can use the above code or modify to your own use in react to handle contents in various devices.

Introduction

Pattern problems are great for practicing loops and logical thinking in programming. We will discuss and try out some of the basic pattern problems.

• Right Triangle

  for (let i = 0; i < 5; i++) {
    let pattern = "";
    for (let j = 0; j < i; j++) {
      pattern += "*";
    }
    console.log(pattern);
  }

  Output:

  *
  **
  ***
  ****
  *****

• Left Triangle

  for (let i = 5; i > 0; i--) {
    let pattern = "";
    for (let j = i; j > 0; j--) {
      pattern += "*";
    }
    console.log(pattern);
  }

  Output:

  *****
  ****
  ***
  **
  *

• Pyramid

  const n = 5;
  for (let i = 0; i < n; i++) {
    let pattern = "";
    for (let j = 0; j < n - i; j++) {
      pattern += " ";
    }
  
    for (let k = 0; k < i; k++) {
      pattern += "*";
    }
    for (let l = i - 1; l > 0; l--) {
      pattern += "*";
    }
  
    console.log(pattern);
  }

  Output:

      *
     ***
    *****
   *******

• Diamond

  const n = 5;
  
  for (let i = 1; i <= n; i++) {
    let pattern = "";
    for (let j = 1; j <= n - i; j++) {
      pattern += " ";
    }
    for (let k = 1; k <= 2 * i - 1; k++) {
      pattern += "*";
    }
    console.log(pattern);
  }
  
  for (let i = n - 1; i >= 1; i--) {
    let pattern = "";
    for (let j = 1; j <= n - i; j++) {
      pattern += " ";
    }
    for (let k = 1; k <= 2 * i - 1; k++) {
      pattern += "*";
    }
    console.log(pattern);
  }

  Output:

      *
     ***
    *****
   *******
  *********
   *******
    *****
     ***
      *

Introduction

Let's start by cloning our already made todo app. We will be testing the crud function and also checking for UI updates. Vitest is easy to get started with. Just follow along and you will begin testing your apps soon.

Add Vitest,jsdom and necessary testing libraries for UI testing to get started.

npm i -D vitest @testing-library/jest-dom @testing-library/user-event @types/jest @vitest/ui jsdom

You can additionally add the following scripts to package .json

"scripts": {
     "test": "vitest",
     "test:ui": "vitest --ui",
     "coverage": "vitest run --coverage"
}

Before testing our application, we need to set up some files to get started. Start by creating a new file test-utils that will have all the utilities for our tests.

//tests/test-utils.tsx

import { cleanup, render } from "@testing-library/react";
import { afterEach } from "vitest";

afterEach(() => {
  cleanup();
});

function customRender(ui: React.ReactElement, options = {}) {
  return render(ui, {
    // wrap provider(s) here if needed
    wrapper: ({ children }) => children,
    ...options,
  });
}

export * from "@testing-library/react";
export { default as userEvent } from "@testing-library/user-event";
// override render export
export { customRender as render };

//tests/setup.ts

import '@testing-library/jest-dom';

We need now to update our Vite config to include test files.

// vite.config.ts

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/test/setup.ts',
    // you might want to disable it, if you don't have tests that rely on CSS
    // since parsing CSS is slow
    css: true,
  },
})

First, let's start by performing component testing. For this, we can create a test file to test our input component. We can test as many scenarios as we like. Here, we will test if the component is rendered properly and if the input can change values and update as we require. Initially, we will test to see if the component in rendered to the document.

//components/Input/Input.test.tsx

import { render, screen, userEvent } from "../../utils/test-utils";
import Input from "./Input";

test("should render the input component.", () => {
  render(<Input label="Add Todo" inputProps={{}} />);
  expect(screen.getByText(/Add Todo/i)).toBeInTheDocument();
  expect(screen.getByRole("textbox", { name: "Add Todo" })).toBeInTheDocument();
});

First, we render the component making use of @testing-library/react and we will check if the component is rendered. We can additionally check for props and values the input component should have as the props have been passed in. for this we can again make use of helper functions provided by @testing-library/react to get the component properties. Here, we test to see if the input component has the label of "Add Todo" and we also check for the input box having the name 'Add Todo'.

We can now test our input for value changes and updates.

test("should update input value on change.", async () => {
  render(<Input label="Add Todo" inputProps={{}} />);
  const input = screen.getByRole("textbox", { name: "Add Todo" });
  expect(input).toBeInTheDocument();
  await userEvent.type(input, "new todo");
  expect(input).toHaveValue("new todo");
});

Here, we render the input then we check if the input box is present in the document. If the input box check passes we can then type anything we want into the input box. We then check if the input has the same value as we typed.

Now we can test our addtodo functionality in the app. Continue by creating a new file AddTodo.test.tsx . We can begin by checking if the UI for the form is present in the document.

//src/AddTodo.test.tsx

import App from "./App";
import { render, screen, userEvent } from "./utils/test-utils";

test("should render the todo form.", () => {
  render(<App />);
  expect(screen.getByText(/Add Todo/i)).toBeInTheDocument();
  expect(screen.getByRole("textbox", { name: "Add Todo" })).toBeInTheDocument();

  const button = screen.getByRole("button", { name: /add/i });
  expect(button).toBeInTheDocument();
});

Now we can test the functionality of the add todo form. Here, we again test by rendering the App component and then check for the title of the remaining todo in the document. Then we add a new todo to the input and click on the button for adding. We then finally check if the newly added todo is also present in the UI document.

test("should add todo to the remaining todos list.", async () => {
  render(<App />);
  expect(screen.getByText(/Remaining Todos/i)).toBeInTheDocument();

  const input = screen.getByRole("textbox", { name: /add todo/i });
  expect(input).toBeInTheDocument();
  await userEvent.type(input, "new todo");

  const button = screen.getByRole("button", { name: /add/i });
  expect(button).toBeInTheDocument();
  await userEvent.click(button);
  expect(screen.getByText(/new todo/i)).toBeInTheDocument();
});

Conclusion

We successfully tested different scenarios for the todo app. We also made it possible to pass all the tests. Implement similarly in your apps now.

Introduction

Todo app is a simple web app that can get you started with React. React makes it easy to accomplish our task.

Prerequisites

• Basic knowledge of React.

• Basic knowledge of React Hooks.

• Basic knowledge of HTML, CSS, and JavaScript.

Let's start by Creating a React app with the following command. For this example, we will be using the Vite to create the Todo React app

npm create vite@latest todo --tempalate react-swc-ts

Navigate into the directory and install the dependencies.

cd todo && npm i && npm run dev

Now we can see the starter for a Vite React project. Edit the src/App.tsx page to get started.

Initially, create a component for the Input so that we can reuse it across the App.

//components/Input/Input.tsx

import { ComponentPropsWithoutRef } from "react";
import "./styles.css";

interface IInput extends ComponentPropsWithoutRef<"fieldset"> {
  inputProps: ComponentPropsWithoutRef<"input">;
}

export default function Input({ inputProps }: IInput) {
  return (
    <fieldset className="input__container">
      <label htmlFor="todo" className="input__label">
        Add Todo
      </label>
      <input
        {...inputProps}
        type="text"
        name="todo"
        id="todo"
        className="input__input"
      />
    </fieldset>
  );
}

Add the styles for it.

//components/Input/styles.css

.input__container {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: none;
}
.input__label {
  font-size: 1rem;
  font-weight: 700;
}
.input__input {
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.4);
  outline: none;
}

Clear everything in the App.tsx and get started with the code below.

//src/App.tsx

<main className="container">
  <h1 className="title">Todos</h1>
</main>

We can now add a form to our UI to begin adding todos to our application.

  <form onSubmit={handleAddTodo} className="add__todo__form">
   <Input inputProps={{ name: "todo", value: todo, onChange: handleOnChange }} />
   <button type="submit" className="add__todo__button">
    Add
   </button>
  </form>

To update the todos we need to listen for changes in our input. We can save our values from the input in a useState React hook.

const [todo, setTodo] = useState("");

Similarly, add the onChange function to add our todo.

const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { value } = e.target;
    setTodo(value);
};

In this function, we listen for changes in the input and append the resulting value to our todo state using setTodo.

Similarly, the form will be submitted to the handleAddTodo function. Here, we prevent the default behavior of the browser and add todos to our setTodos useState hook.

const [todos, setTodos] = useState<{ title: string; completed: boolean }[]>([]);
 
const handleAddTodo = (e: SyntheticEvent) => {
    e.preventDefault();
    setTodos((prev) => [...prev, { title: todo, completed: false }]);
    setTodo("");
  };

Continue by building tabs to view the remaining and completed todos. We can handle the state of our active tab by again using the useState React hook.

const [activeTab, setActiveTab] = useState("Remaining Todos");

We can update the active tab value by listening to a click event in the tabs.

<div className="tabs__container">
   {["Remaining Todos", "Completed Todos"].map((tab) => (
      <button
       key={tab}
       className={`tabs__tab ${
       activeTab === tab ? "tabs__tab__active" : ""
       }`}
       onClick={() => setActiveTab(tab)}
       >
          {tab}{" "}
          {tab === "Remaining Todos"
          ? remainingTodos.length > 0 && `(${remainingTodos.length})`
          : completedTodos.length > 0 && `(${completedTodos.length})`}
       </button>
   ))}
</div>

In the above onClick function we make use of the setActiveTab hook to update our activeTab value.

Now we can memoize our remaining and completed todos.

const remainingTodos = useMemo(() => {
    return todos.filter((todo) => !todo.completed);
}, [todos]);

const completedTodos = useMemo(() => {
    return todos.filter((todo) => todo.completed);
}, [todos]);

Finally, render the list of our todos to the UI. Before, rendering the UI we must also check for the active tab state to get the active tab todos.

<ul className="todos__container">
     {(activeTab === "Remaining Todos"
      ? remainingTodos
      : completedTodos
      ).map((todo) => (
           <li key={todo.title} className="todo__list__item">
             <span className="todo__list__item__input__container">
               <input
                type="checkbox"
                checked={todo.completed}
                name={todo.title}
                onChange={(e) => {
                   setTodos((prev) =>
                     prev.map((t) =>
                       t.title === todo.title
                         ? { ...t, completed: e.target.checked }
                         : t
                     )
                   );
                 }}
                />
               {todo.title}
             </span>
             <DeleteB
              onClick={() => {
              setTodos((prev) => prev.filter((t) => t.title !== todo.title));
              }}
            />
           </li>
     ))}
</ul>

Add styles to the page.

//src/index.css

html,
body,
:root,
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.title {
  font-size: 2.5rem;
  font-weight: 900;
}
.add__todo__form {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}
.add__todo__button {
  padding: 0.5rem 1rem;
  border-radius: 1.5rem;
  border: none;
  outline: none;
}
.container {
  width: 25rem;
  position: absolute;
  top: 25%;
  left: calc(50% - 10rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem 2.5rem;
  border-radius: 2rem;
  border: 1px solid rgb(58, 40, 216);
}
.todo__list__item {
  list-style-type: none;
  display: flex;
  gap: 0.25rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 1rem;
}
.tabs__container {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.tabs__tab {
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 500;
  outline: none;
  border: none;
  background: transparent;
}
.tabs__tab__active {
  border-bottom: 1px solid blue;
}
.todos__container {
  height: 20rem;
  overflow-y: scroll;
}
.todo__list__item__input__container {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

Conclusion

Here, we created a to-do app in React using Vite and React hooks. You can now further update the UI and add additional functionalities to your to-do app to make it even better.