DEV Community: Harshana Jayaweera

Mastering React: A Step-by-Step Journey to Building Powerful Web Applications (Introduction)

Harshana Jayaweera — Sun, 29 Sep 2024 09:57:10 +0000

React is a popular JavaScript library used to build user interfaces, especially for single-page websites or apps. Whether you're a complete beginner or looking to improve your skills, learning React is a journey that takes time, practice, and real-world experience. But don't worry—it’s an exciting path that opens up endless possibilities in web development.

In this guide, we’ll break down the steps to help you master React in a simple and practical way, so you can start building amazing apps and growing your skills one step at a time.

Prerequisites

01.Basic Knowledge of HTML/CSS

Understand the structure of HTML and how to style elements using CSS.
Familiarity with CSS Flexbox and Grid for layout design.
Responsive design principles (media queries, fluid grids, etc.).

02.Strong Foundation in JavaScript

ES6+ Features: Arrow functions, template literals, destructuring, rest/spread operators, etc.
Functions and Scoping: Knowing how functions work, variable scope (var, let, const), closures, and block-level scoping.
Objects and Arrays: Basic operations, array methods like map, filter, and reduce.
Promises and Asynchronous JavaScript: Understanding how promises, async/await, and callbacks work.

03.Familiarity with DOM Manipulation

Basics of the Document Object Model (DOM), how JavaScript interacts with it.
Understanding how to use event listeners and manipulate HTML/CSS dynamically.

04.Basic Command Line Usage

Familiarity with basic terminal commands to navigate directories, run scripts, and manage files.
Experience using npm or yarn to install dependencies.

05.Version Control with Git

Knowing how to create a repository, commit changes, push and pull code from services like GitHub, and use basic branching.

06.Basic Understanding of JavaScript Frameworks/Libraries

Some prior exposure to JavaScript frameworks like jQuery or basic understanding of how JavaScript libraries function might help understand React’s purpose better.

07.Optional (but beneficial): Understanding of Functional Programming Concepts

Pure functions, immutability, and higher-order functions are all useful concepts when working with React, especially with hooks and state management.

🎓Watch and learn : All the prerequisite you need to know for React

Setting Up Your React Environment

Before you start building with React, you need to set up your development environment. This step ensures you have everything in place to write, test, and run your React code smoothly. Here's a clear guide to get you started:

1. Install Node.js and npm

React relies on Node.js for its package manager (npm) to manage libraries and tools. Follow these steps:

Download Node.js: Go to nodejs.org and download the latest stable version of Node.js. It comes with npm (Node Package Manager) by default.
Verify Installation: Open your terminal and run the following commands to check if Node.js and npm are installed correctly:

node -v
npm -v

2. Create Your First React App Using Create React App (CRA)

Create React App (CRA) is a tool that sets up everything you need to start developing in React with just a few commands. Here's how to use it:

Open your terminal and run:

npx create-react-app my-app

Replace my-app with your project name.
npx runs a command without globally installing the tool.

Navigate to your project directory

cd my-app

3. Start the Development Server

Once inside the project folder, you can start the development server with:

npm start

This will open your app in the browser (usually at http://localhost:3000/), and you’ll see the default React welcome page.
The server supports hot reloading, meaning your app will automatically update when you make changes to the code.

4. Explore the Project Structure

CRA sets up a basic folder structure. Here are the key files you’ll work with:

src/index.js: This is the entry point of your application.
src/App.js: Contains the main component where you'll start building.
public/index.html: This is the HTML file where your React app gets injected.
Feel free to modify App.js to see your changes instantly in the browser.

6. Install VS Code (or Your Preferred Code Editor)

Download and install Visual Studio Code (VS Code) from code.visualstudio.com.

You can enhance your development experience with extensions like:

ESLint: Helps in finding and fixing issues in your JavaScript code.
Prettier: Automatically formats your code to make it cleaner.
React Snippets: Offers shortcuts for common React components and hooks.

7. Install Browser Extensions for Debugging (Optional)

React Developer Tools: A Chrome/Firefox extension that helps you inspect the React component tree, check state, and props in real-time. You can install it from your browser’s extension store.

🎓Watch and learn : Setting Up Your React Environment

Learning React Core Concepts

To truly master React, focus on understanding the following concepts deeply:

Components: Functional and Class-based components
JSX Syntax: Learn how JSX works as syntactic sugar for React.createElement
Props: Passing data from parent to child components
State: Local component state using useState
Event Handling: Working with events like onClick, onChange, etc.
Lifecycle Methods (for class components) and useEffect (for functional components)

🎓Watch and learn : React JS Explained in 10 Minutes

Building Reusable Components

React is all about components. Start building small, reusable components like:

Buttons
Form inputs
Cards
Lists

Ensure that you use props to make them flexible and reusable.

🎓Watch and learn : Create Clean and Reusable React Components

State Management

As your app grows, managing state across multiple components becomes tricky. Learn different approaches to state management:

useState and useReducer for local state
Context API for global state
Libraries like Redux or Zustand for more complex state management

🎓Watch and learn : React State Management – Intermediate JavaScript Course

React Hooks

React hooks, introduced in React 16.8, changed how we manage state and side effects in functional components. Master these hooks:

useState: Manage component-level state
useEffect: Handle side effects (e.g., fetching data)
useContext: Share data between components without prop drilling
useReducer: For more complex state logic
Custom Hooks: Create your own hooks for reusable logic

🎓Watch and learn : ALL React Hooks Explained in 12 Minutes

Routing with React Router

Most React applications are single-page applications (SPAs), meaning they handle routing on the client side. Learn how to:

Set up React Router
Use BrowserRouter, Route, and Link
Implement dynamic routing and protected routes

🎓Watch and learn : Full React Tutorial #21 - The React Router

Form Handling

Forms are integral to many applications. Learn how to:

Manage controlled components
Handle form validation with libraries like Formik or React Hook Form

🎓Watch and learn : ReactJS Tutorial - 21 - Basics of Form Handling

Fetching Data

Interacting with APIs is a key part of most apps. Learn how to:

Use fetch or axios to make HTTP requests
Handle loading states and errors
Work with React Query or SWR for more efficient data fetching and caching

🎓Watch and learn : Fetching Data in React - Complete Tutorial

Understanding React Performance Optimization

As your app scales, performance becomes crucial. Learn about:

Memoization with React.memo and useMemo
Lazy loading components with React.lazy and Suspense
Code-splitting using Webpack or dynamic imports
Avoiding unnecessary re-renders

🎓Watch and learn : Optimizing Rendering Performance in React

Testing Your React Application

Testing is critical for ensuring that your app behaves as expected. Get familiar with:

Jest for unit testing
React Testing Library for testing components
Cypress or Playwright for end-to-end testing

🎓Watch and learn : React Testing Tutorial (Jest + React Testing Library)

Deploying Your React Application

Finally, learn how to deploy your React application. Popular services include:

Vercel (great for Next.js)
Netlify
GitHub Pages (for simple static sites)
AWS or Heroku for more complex apps

🎓Watch and learn : Deploy React Application using Netlify | Deploy manually using build folder)

10 beginner-friendly React projects that will help you build a solid foundation and eventually master React

1. Todo List App

Goal: Learn about state management, user input, and event handling.

Features:

Add, edit, and delete tasks.
Mark tasks as complete.
Filter tasks by completed, pending, or all.
Key Concepts: useState, handling form inputs, conditional rendering.

2. Weather App

Goal: Fetch data from an API and display dynamic content.

Features:

Fetch weather data for a city using a weather API (like OpenWeatherMap).
Display current temperature, condition, and a weather icon.
Add error handling for invalid city names.
Key Concepts: useEffect, useState, working with APIs, error handling.

3. Recipe Finder

Goal: Use an external API to fetch and display recipes based on user input.

Features:

Search for recipes by ingredients or dish name.
Display a list of recipe cards with images and basic details.
Allow users to click on a recipe card to see detailed instructions.
Key Concepts: useState, useEffect, API calls, controlled components, props.

4. Simple Blogging Platform

Goal: Create a multi-page app using React Router.

Features:

Create, edit, and delete blog posts.
List all posts on the homepage.
Click on a post to view it in detail on a separate page.
Key Concepts: React Router, useState, useParams, managing routes.

5. Movie Database

Goal: Build a searchable and filterable movie database using an API like TMDB.

Features:

Display a list of popular or trending movies.
Allow users to search for movies by title.
Filter movies by genre, release year, or rating.
Show movie details like cast, summary, and ratings.
Key Concepts: useState, useEffect, API requests, filtering, React Router.

6. E-Commerce Product Page

Goal: Create a simple product catalog with the ability to add items to a cart.

Features:

Display a list of products with images, prices, and descriptions.
Add items to a shopping cart and display the cart total.
Option to filter or sort products by price, category, or rating.
Key Concepts: useState, props, event handling, working with arrays, cart functionality.

7. Quiz App

Goal: Create an interactive quiz game with multiple-choice questions.

Features:

Load quiz questions from an API or a static file.
Show multiple-choice answers and keep track of the user’s score.
Provide feedback after each answer (correct/incorrect).
Display final score at the end of the quiz.
Key Concepts: useState, useEffect, managing state across multiple questions, conditional rendering.

8. Expense Tracker

Goal: Track income and expenses and display them visually.

Features:

Add income and expense entries with descriptions and amounts.
Show a running total of income, expenses, and balance.
Display a bar chart or pie chart for visual representation.
Key Concepts: useState, working with forms, calculating totals, conditional rendering, possibly integrating a chart library.

9. Image Gallery with Lightbox

Goal: Display a grid of images and allow users to click to view a larger version.

Features:

Load images from an API or a static list.
Click an image to open a modal (lightbox) to view it larger.
Navigate between images inside the lightbox.
Close the lightbox by clicking outside the image or pressing Esc.
Key Concepts: useState, event listeners, modals, conditional rendering.

10. Social Media Dashboard

Goal: Create a dashboard that displays user statistics and activity.

Features:

Display follower counts, likes, posts, and other social media data.
Implement a dark mode toggle.
Allow users to update their status and see it in the feed.
Optional: Fetch real-time data using a service like Firebase.
Key Concepts: useState, useEffect, conditional rendering, props, possibly working with an API.

Conclusion

Mastering React is a process that requires building real-world projects and continuously learning new patterns and tools. The key is consistent practice—start with simple applications, and as your skills grow, tackle more complex ones.

Thank you for taking the time to read this guide on mastering React! I hope these steps and projects have given you the confidence and clarity to start your journey toward becoming a proficient React developer. Remember, the key to mastering any skill is consistent practice and the willingness to learn from every project—no matter how big or small.

Feel free to revisit this guide whenever you need a refresher, and don't hesitate to reach out if you have any questions or need further guidance. I’m excited to see the amazing applications you’ll create as you continue learning React!

Happy coding, and keep building! 🚀

Mastering React: A Guide to the Most Important React Hooks

Harshana Jayaweera — Sun, 22 Sep 2024 19:08:58 +0000

React Hooks were added to React in version 16.8, and they’ve completely changed the way we write React apps. Before hooks, we had to use class components to manage state and lifecycle methods, which could make our code complicated, especially in larger apps. Hooks allow us to use functional components to handle things like state, side effects, and performance optimization more easily.

With hooks, we can:

Manage state (useState),
Handle side effects, like fetching data (useEffect), and
Improve performance (useMemo, useCallback).

In this article, we’ll go through the most important React Hooks that you need to know. I’ll explain what each one does, why it’s useful, and how to use it in your projects to make your React code simpler and more efficient.

1. useState

What It Does:
useState lets you add state to functional components. Before hooks, only class components could have state, but now you can use it in functional components too. This hook returns two things: the current state and a function to update that state.

When to Use It:
Use useState when you need to track a value that changes over time, like user input in a form, or a toggle state for showing and hiding elements.

Example:

Why It’s Important:
It makes handling simple state in functional components easy and keeps your code more readable than class components.

Let’s try and learn: useState Hook in React — Crash Course by Web Dev Simplified

2. useEffect

What It Does:
useEffect lets you run side effects in your components, such as fetching data, updating the DOM, or subscribing to something like a WebSocket. It runs after the component renders, and you can control when it runs by passing dependencies.

When to Use It:
Use useEffect whenever you need to run code after rendering or when a value changes, such as fetching data from an API when the component mounts or updating the document title when a value changes.

Example:

Why It’s Important:
It replaces the old lifecycle methods like componentDidMount and componentDidUpdate, making it easier to handle side effects in a cleaner, declarative way.

Let’s try and learn: React useEffect Hook — What, Why, and How by Web Dev Simplified

3. useContext

What It Does:
useContext allows you to access values from a context without having to pass props manually at every level of your component tree (also called "prop drilling"). It makes it easy to share data like the current theme, user authentication status, or language settings across your app.

When to Use It:
Use useContext when you have data or functions that need to be accessed by multiple components, such as global settings, themes, or shared states.

Example:

Why It’s Important:
It simplifies the process of passing data through many layers of components and keeps your code DRY (Don’t Repeat Yourself).

Let’s try and learn: React useContext Hook Tutorial by Web Dev Simplified

4. useReducer

What It Does:
useReducer is like useState, but better for managing more complex state logic. Instead of just setting state directly, you send actions to a reducer function, which determines how the state should change based on the action.

When to Use It:
Use useReducer when your component’s state management becomes too complex for useState, such as when you need to handle multiple related pieces of state or state transitions.

Example:

Why It’s Important:
It’s ideal for managing states that have many transitions (e.g., form state or state with complex actions). It also makes it easier to understand and predict how state changes.

Let’s try and learn: useReducer Hook — React Hooks Tutorial by Web Dev Simplified

5. useMemo

What It Does:
useMemo helps improve performance by caching the result of a computation and only recomputing it when its dependencies change. It’s particularly useful for expensive calculations or when rendering large lists.

When to Use It:
Use useMemo when you have an expensive calculation (e.g., sorting, filtering) that shouldn’t be recomputed on every render unless certain values (dependencies) have changed.

Example:

Why It’s Important:
It prevents unnecessary recalculations, improving the performance of your app, especially in components that rerender frequently.

Let’s try and learn: React useMemo Hook — Avoid Unnecessary Calculations by Web Dev Simplified

6. useCallback

What It Does:
useCallback is similar to useMemo, but it memoizes a function instead of a value. It ensures that a function reference remains the same between renders, which can prevent unnecessary re-renders in child components that rely on that function.

When to Use It:
Use useCallback when passing a function as a prop to a child component, and you don’t want that child to re-render unnecessarily whenever the parent component re-renders.

Example:

Why It’s Important:
It prevents performance issues by stopping functions from being recreated on every render, which can cause child components to re-render even when not necessary.

Let’s try and learn: React useCallback Hook Tutorial by The Net Ninja

7. useRef

What It Does:
useRef gives you access to a mutable object that persists across renders. It's often used to reference DOM elements directly or to store values that don't trigger a re-render when updated.

When to Use It:
Use useRef when you need to interact with a DOM element directly (e.g., focusing an input) or when you need to store a value that doesn't change the UI (e.g., a timer ID).

Example:

Why It's Important:
It's essential for working with the DOM directly and for managing mutable values without causing unnecessary re-renders.

Let's try and learn: useRef Hook - React Tutorial by Web Dev Simplified

Conclusion:

Mastering these React Hooks will make you a more efficient developer, enabling you to write cleaner, more scalable code. Hooks like useState and useEffect handle basic state and side effects, while more advanced hooks like useMemo, useReducer, and useContext help you optimize performance and manage more complex logic with ease.

JavaScript Best Practices.

Harshana Jayaweera — Thu, 05 Sep 2024 12:12:29 +0000

Following JavaScript best practices can aid in faster page loads and improved performance, as well as improved code readability and ease of maintenance and debugging. Carefully written code can also help to avoid errors and security issues.

01. Avoid Global Variables

Minimize the use of global variables.
This includes all data types, objects, and functions.
Global variables and functions can be overwritten by other scripts.
Use local variables instead and learn how to use closures.

02. Always Declare Local Variables

Local variables should be declared for all variables used in a function.
If the var, let, or const keyword is not used when declaring a local variable, the local variable will be converted to a global variable.

03. Declarations on Top

All declarations should be placed at the beginning of each script or function as good coding practice.

This will result in:

A cleaner code
Give users a single location to look for local variables.
Make it simpler to avoid undesirable (implied) global variables.
Reduce the likelihood of unwanted re-declarations.

4. Initialize Variables

When you declare variables, you should always initialize them.

This will:

Provide cleaner code
Provide a single location for variable initialization.
Avoid using undefined values

05. Declare Arrays with const

Declaring arrays with const prevents accidental type changes

06. Don’t Use new Object()

Instead of new String(), use “”.
Instead of new Number(), use 0
Instead of using new Boolean(), use false
Rather than new Object(), use {}
Instead of using new Array(), use [].
Instead of using new RegExp(), use /()/.
Instead of using new Function(), use function (){}.

07. Beware of Automatic Type Conversions

JavaScript is a loosely typed language.
A variable can hold any type of data.
A variable’s data type can be changed.

08. Use === Comparison

Prior to comparison, the == comparison operator converts (to types that match).
The === operator requires a value and type comparison

09. Use Parameter Defaults

When a function is called with an unspecified argument, the value of the unspecified argument is set to undefined.
Undefined values can cause your code to fail. Assigning default values to arguments is a good practice.

10. End Your Switches with Defaults

Always include a default at the end of your switch statements. Even if you believe it is unnecessary.

11. Avoid Number, String, and Boolean as Objects

Numbers, strings, and Booleans should always be treated as primitive values, not as objects.
Declaring these types as objects slows execution and has negative side effects

12. Avoid Using eval()

The eval() function is used to run text as code. But in most cases, it should not be necessary to use it.
It also poses a security risk because it allows arbitrary code to be executed.

Sorting in Data Structures

Harshana Jayaweera — Fri, 12 Apr 2024 23:07:04 +0000

Sorting data involves putting it in a certain order. It is a basic data manipulation technique that is applied to a wide range of data analysis and visualization jobs.
Depending on the type of data and the desired outcome, there are several ways for sorting data.

Typical sorting techniques include:
● Ascending order: This is the most common sorting method, and it arranges data from
smallest to largest.
● Descending order: This method arranges data from largest to smallest.
● Custom order: This method allows you to specify the order in which data is sorted.

Data sorting in programming is the process of arranging data in a specific order. This can be done in ascending or descending order and can be based on any criteria, such as the value of a variable, the date an event occurred, or the alphabetical order of a word.
There are several sorting algorithms, each with unique advantages and disadvantages. Some of the most common sorting algorithms include:
● Bubble sort
● Selection sort
● Insertion sort

Depending on the particular requirements of the application, a sorting algorithm should be chosen. For example, if the data is relatively small, then a simple algorithm like bubble sort may be sufficient. However, if the data is large or if speed is critical, then a more efficient algorithm like merge sort or quicksort should be used.

Benefits of data sorting:
● Improved data organization: Sorting data can help to improve its organization and make
it easier to find and use.
● Increased efficiency: Sorting data can help to improve the efficiency of data processing
and analysis.
● Improved accuracy: Sorting data can help to improve the accuracy of data analysis and
reporting.
● Enhanced data visualization: Sorting data can help to enhance the visualization of data,
making it easier to understand and interpret.

Bubble Sort

Bubble sort is a simple sorting algorithm that repeatedly compares adjacent elements in an array and swaps them if they are in the wrong order.When the first two entries in the array are compared repeatedly, the algorithm swaps them if they are in the wrong order. It then compares the next two elements, and so on. This process continues until the end of the array is reached. Bubble sort is a very simple algorithm to understand and implement, but it is not very efficient. The worst-case time complexity of the technique is O(n2) means, where n is the number of items in the array and means the amount of time it takes to finish the operation. This indicates that the algorithm's execution time is inversely related to the square of the array's element count.

Bubble sort is not a good choice for sorting large arrays.However, it can be a good choice for sorting small arrays or arrays that are already partially sorted.

public class BubbleSort {
   public static void bubbleSort(int[] array) {
       int n = array.length;
          for (int i = 0; i < n - 1; i++) {
             for (int j = 0; j < n - i - 1; j++) {
                 if (array[j] > array[j + 1]) {
                    int temp = array[j];
                    array[j] = array[j + 1];
                    array[j + 1] = temp;
                 }
             }
          }
     }

   public static void main(String[] args) {
      int[] array = {5, 3, 1, 2, 4};
      bubbleSort(array);
      for (int i = 0; i < array.length; i++) {
         System.out.print(array[i] + " ");
      }
   }
}

Advantages and disadvantages of bubble sort

Advantages:
● Bubble sort is a very simple algorithm to understand and implement.
● Bubble sort is stable, meaning that it does not change the relative order of elements
that are equal.

Disadvantages:
● Bubble sort is not very efficient, especially for large arrays.
● Bubble sort is not a good choice for sorting arrays that are already partially sorted.

Selection Sort

Selection sort is a simple in-place comparison sorting algorithm in computer science. It worksby dividing the input list into two parts:

sorted sublist
unsorted sublist.

The algorithm repeatedly selects the smallest (or largest) element from the unsorted sublist and swaps it with the leftmost unsorted element, thereby expanding the sorted sublist. This process continues until the entire list is sorted. Selection sort has a time complexity of O(n^2), which makes it inefficient for large lists compared to more advanced algorithms like merge sort or quicksort.

The algorithm can be summarized in the following steps:

Divide the input list into two sublists: the sorted sublist and the unsorted sublist.
Initially, the sorted sublist is empty, and the unsorted sublist contains all the elements.
Find the minimum (or maximum) element in the unsorted sublist.
Swap the minimum (or maximum) element with the leftmost element in the unsorted sublist, putting it in its correct sorted position.
Move the sublist boundaries one element to the right, expanding the sorted sublist and reducing the unsorted sublist.
Repeat steps 3 to 5 until the entire list is sorted.

public class SelectionSort {
   public static void selectionSort(int[] array) {
      int n = array.length;
      for (int i = 0; i < n - 1; i++) {
         int minIndex = i;
         for (int j = i + 1; j < n; j++) {
            if (array[j] < array[minIndex]) {
               minIndex = j;
            }
         }
         int temp = array[minIndex];
         array[minIndex] = array[i];
         array[i] = temp;
      }
   }  
   public static void main(String[] args) {
      int[] array = {10, 8, 7, 6, 5, 4, 3, 2, 1};
      selectionSort(array);
      for (int i = 0; i < array.length; i++) {
         System.out.print(array[i] + " ");
      }
   }
}

Selection sort is renowned for its simplicity and offers certain benefits when auxiliary memory is constrained. Due to its quadratic time complexity, it typically performs worse than more
sophisticated sorting algorithms on big lists. In reality, the comparable algorithm insertion sort frequently performs better than selection sort.

Here are the advantages and disadvantages of selection sort:

Advantages:
● Simple to implement - Selection sort is a straightforward algorithm that can be implemented easily in any programming language. This makes it a good choice for beginners who are learning about sorting algorithms.
● In-place sorting algorithm: Selection sort does not require any additional memory to sort the data. This makes it a good choice for applications where memory is limited.
● Can be used for small data sets: Selection sort is a relatively efficient algorithm for small data sets. However, its performance degrades significantly for large data sets.

Disadvantages:
● Slow for large data sets
● Not stable: Selection sort is not a stable sorting algorithm. This means that it can change the relative order of elements with equal values. For example, if the array [1, 2, 2, 3] is sorted using selection sort, the output could be [1, 2, 3, 2].
● Not adaptive: Selection sort is not an adaptive sorting algorithm. This means that its performance does not improve as the data becomes more sorted. For example, if the array [1, 2, 3, 4] is sorted using selection sort, the algorithm will still need to perform the same number of comparisons as if the array was [1, 100, 1000, 10000].

Insertion sort

The basic sorting method known as "insertion sort" involves continuously adding elements into a subarray that has already been sorted. The way the method operates is by first presuming that
the array's first element has already undergone sorting. The method then compares each succeeding element to the items in the sorted subarray. The element is placed into the appropriate location if it is smaller than any of the other items in the sorted subarray. If not, the algorithm moves on to the following element.

public class InsertionSort {
   public static void sort(int[] array) {
      int n = array.length;
      for (int i = 1; i < n; i++) {
         int key = array[i];
         int j = i - 1;
         while (j >= 0 && array[j] > key) {
            array[j + 1] = array[j];
            j--;
         }
         array[j + 1] = key;
      }
   }
   public static void main(String[] args) {
      int[] array = {10, 8, 7, 6, 5, 4, 3, 2, 1};
      sort(array);
      for (int i = 0; i < array.length; i++) {
         System.out.print(array[i] + " ");
      }
   }
}

Advantages and disadvantages of insertion sort:

Advantages:
● Simple to implement
● In-place sorting algorithm
● Stable sorting algorithm (elements with equal keys retain their original order)
● Efficient for small lists

Disadvantages:
● Not as efficient for large lists
● Slow for already sorted or reverse-sorted lists
● Requires O(n^2) time in the worst case

Here are some examples of when insertion sort might be a good choice:

● Sorting a small list of numbers
● Sorting a list of strings that are already in alphabetical order
● Sorting a list of records that have a primary key field

Here are some examples of when insertion sort might not be a good choice:

● Sorting a large list of numbers
● Sorting a list of strings that are not in alphabetical order
● Sorting a list of records that do not have a primary key field