DEV Community: Yahaya Oyinkansola

A Simple Guide to Idempotency

Yahaya Oyinkansola — Tue, 24 Mar 2026 17:14:05 +0000

Have you ever been on a checkout page, clicked the "Pay Now" button, and nothing happened?. Your first instinct might be to click it again, or maybe three more times to be sure it went through. In a poorly designed system, those extra clicks could mean you get charged four times for the same pair of shoes. In a well-designed system, no matter how many times you smash that button, you are only charged once. This reliability is thanks to a concept called Idempotency.

What exactly is Idempotency?

Idempotency is a safety guarantee that ensures making the same request multiple times has the exact same result as making it just once. Think of it like an elevator button, If you enter an elevator and press the "5" button, the elevator knows to go to the fifth floor. If you get impatient and press the "5" button ten more times, the elevator doesn't go to the fifth floor ten times; it simply stays committed to the original destination. The outcome remains the same regardless of the extra presses.

Why is this so Important?

In the world of software and APIs, things don't always go smoothly:

Wrong data gets sent to the user
A mobile connection drops as soon as you hit "Submit"
A server takes a second too long to respond etc.

When these hiccups happen, the system might automatically retry the request, or the user might manually click the button again. Without idempotency, these "retries" can cause unintended side effects such as:

Duplicate payments
Unexpected results the user shouldn't see and
Data corruption.

When I first came across this issue, I thought the developer isn't the only one to be blamed, users too should be more careful, but that is wrong. You can't expect people to always be careful, making mistakes is part of human nature, moreover, people are impatient, including developers. When users don't get any response from your application after performing an action, it's normal for them to try again as no feedback was given. This is why as a developer, you are not just building intuitive UI's, you also need to consider how your app works from a UX perspective.

The Role of User Experience (UX)

While the heavy lifting happens behind the scenes on the server, the front-end plays a huge role in preventing issues such as double payment before it reaches the server. A great user experience keeps the user informed so they don't feel the need to take an action twice, this can be done through:

Providing Visual Feedback: Disabling a button and showing a "Processing..." message, or a loading spinner indicating something is being processed behind the scenes.
Clear Progress Bars: Showing the user exactly where they are in the process.
Success Confirmations: Immediately moving the user to a "Thank You" or "Successful payment" page so there's no doubt the action was completed.

When you factor in the user experience your application provides, it becomes easier to prevent this mistakes from occurring in your application, and this allows users trust your application more. Now I am not saying UX is simply enough to implement Idempotency, it definitely isn't, but it helps prevent some issues if done right, not everything is necessarily a back-end problem, the front-end too can handle some things.

Conclusion

Idempotency might sound like a complex technical term, but it’s really just about predictability. Whether you are building a task manager or a massive e-commerce platform, ensuring that an action can only happen once, even if it's done twice is the key to building software people can trust.

In a world where technology is constantly moving fast and people love things to be done quickly, Idempotency is a concept to keep at the back of your mind as a developer (whether front-end, back-end or full-stack) to ensure your apps work properly without unexpected errors and behaviors.

I am Oyinkansola, a front end developer helping service-based business attract their ideal customers online through well engineered websites. I also share my work and insights on X and LinkedIn if you like to check me out over there as well.

A Guide to Precise Age Calculation in React

Yahaya Oyinkansola — Thu, 19 Mar 2026 18:44:52 +0000

Have you ever visited a site that told you your exact age in days, months and years?, most likely not (lol), so I will introduce you to one today thanks to this project from Front End Mentor. I'll be explaining the underlying logic behind calculating a person's age in days, months and years using React and a date library that makes it easy to work with dates.

Here's a live preview of the project: Link.

I assume you already have knowledge of React (basic understanding is fine), so I will skip over installation and setting up a React project.

The Core Idea

Calculating a person's age means finding the difference between two dates: The person's birth date and today’s date, but because months have different lengths (and leap years exist), it’s not as simple as subtracting years directly. If you have ever worked with dates before, you know how stressful they can be.

I personally hate working with dates 😅, as they get complicated and confusing quickly. Due to the difficulty involved in using dates, solutions have been built to make working with them easier; one such solution is the dayjs library. I particularly love this library because of the helpful methods it provides for retrieving date information. It also allows you to combine methods together to form your own date validation logic. We would use this library to perform the age calculation.

Building The Age Calculation Logic

Let's create a React component for the UI of the form

import { useState } from "react";

function App() {
  const [formValues, setFormValues] = useState({
    day: "",
    month: "",
    year: "",
  });

  const [output, setOutput] = useState({
    day: "",
    month: "",
    year: "",
  });

  function handleFormValues(e) {
    setFormValues((prevState) => {
      return {
        ...prevState,
        [e.target.name]: e.target.value,
      };
    });
  }

  return (
    <>
      <main className="age-container">
        <form>
          <div className="form-container">
            <div className="input-group">
              <label htmlFor="day">Day</label>

              <input
                type="text"
                id="day"
                name="day"
                value={formValues.day}
                onChange={handleFormValues}
                placeholder="DD"
              />
            </div>

            <div className="input-group">
              <label htmlFor="month">Month</label>

              <input
                type="text"
                id="month"
                name="month"
                value={formValues.month}
                onChange={handleFormValues}
                placeholder="MM"
              />
            </div>

            <div className="input-group">
              <label htmlFor="year">Year</label>

              <input
                type="text"
                id="year"
                name="year"
                value={formValues.year}
                onChange={handleFormValues}
                placeholder="YYYY"
              />
            </div>
          </div>

          <button type="submit" className="submit-btn">
            Calculate
          </button>
        </form>

        <div id="result">
          <h2>
            <span>{output.year}</span> years
          </h2>

          <h2>
            <span>{output.month}</span> months
          </h2>

          <h2>
            <span>{output.day}</span> days
          </h2>
        </div>
      </main>
    </>
  );
}

export default App;

I will skip styling the form, and validating the inputs, they are not important for this article.

Inside our component, let's handle the logic to calculate the users age when they submit the form.

import { useState } from "react";
import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";

dayjs.extend(customParseFormat);

function App() {
  const [formValues, setFormValues] = useState({ ... });
  const [output, setOutput] = useState({ ... });

  function handleFormValues(e) { ... }

  function handleSubmit(e) {
    e.preventDefault();

    const { day, month, year } = formValues;

    let noOfMonths = 0;
    let noOfDays = 0;
    const currentDate = dayjs();
    const inputDate = dayjs(`${year}-${month}-${day}`);
    const checkValidDate = dayjs(
      `${year}-${month}-${day}`,
      "YYYY-MM-DD",
      true,
    ).isValid();

    if (!checkValidDate) {
      return new Error("Date is Invalid")
    }

    if (inputDate.month() > currentDate.month()) {
      noOfMonths = 12 - (inputDate.month() - currentDate.month());
    } else {
      noOfMonths = currentDate.month() - inputDate.month();
    }

    if (inputDate.date() > currentDate.date()) {
      noOfDays =
        inputDate.daysInMonth() - (inputDate.date() + currentDate.date());
    } else {
      noOfDays = inputDate.date() - currentDate.date();
    }

    const yearDiff = Math.abs(inputDate.diff(currentDate, "year"));
    const monthDiff = Math.abs(noOfMonths);
    const dayDiff = Math.abs(noOfDays);

    setOutput((prevState) => {
      const newOutput = {
        ...prevState,
        day: dayDiff,
        month: monthDiff,
        year: yearDiff,
      };

      return newOutput;
    });
  }

  return (
    <>
      <main className="age-container">
        <form onSubmit={handleSubmit}>...</form>
        <div id="result">
          <h2>
            <span>{output.year}</span> years
          </h2>

          <h2>
            <span>{output.month}</span> months
          </h2>

          <h2>
            <span>{output.day}</span> days
          </h2>
        </div>
      </main>
    </>
  );
}

export default App;

What’s Happening Here?

We first import the dayjs library and a plugin to extend the functionality of dayjs.

Why is this plugin necessary?

By default, day.js can only parse standard date formats (like ISO strings), but it cannot parse custom date formats e.g "February 20th, 2026", this is where the customParseFormat plugin comes in. With this plugin, we can extend the functionality of dayjs to parse custom dates. Even though we imported this plugin, this particular line is important

dayjs.extend(customParseFormat);

This line tells dayjs to enable this plugin and add its features to the core library. Without it, the plugin has no effect and we won't be able to parse any custom date.

Secondly, we assign the current date gotten from calling dayjs() into a variable to have one instance of that function call we can use multiple times.
We pass the day, month and year values gotten from our form into dayjs() to convert the date into a day.js date object we can work with.
We then check if the date passed in by the user is valid, if it isn't, we return an error and stop the remaining code from executing.

The main logic starts when we want to calculate how old a user is in months and days.

How no of months is calculated

If the user's birth month is greater than the current month, that means they have not yet reached their birth month, so we can't just minus the current month from the user's birth month alone. To get the right month value, we first minus the current month from the user's birth month, then substract the result from 12 (12 being the total number of months in a year).

If the user's birth month is less than or equal to the current month, this means they have already passed their birth month or the current month is their birth month, so we can just substract the current month from their birth month directly.

Once we've gotten the right month value, we store it in the noOfMonths variable.

How no of days is calculated

Moving over to calculating the users age in days, if the day of the user's birthday is greater than the day of the current date, that also means they haven't reached their birthday yet, so we add the day of the user's birthday to the day of the current date and minus it from the number of days that month has, because months have different no of days in them e.g february (28), March (31) etc, so doing it like this ensures we are considering the correct amount of days a month has. If the day of the users birthday is not greater than the day of the current date, we just minus the day of the users birthday from the day of the current date. We store the result of this calculation inside the noOfDays variable.

Calculating the Year

Calculating the year is the simplest thing we have to do, we just minus the users birth year from the current year to get how old they are in years. I wish the rest where this straight forward!.

After running all these calculations, we use the abs() function to convert negative values to positive equivalents before outputting the result in the UI.

Now I know this might have been confusing for you, day of the users birthday, month of the current month 😂😂, what's this guy even saying?, it took me a while to understand it as well, so it's perfectly fine if you're not getting it. This is why I said working with dates is confusing and frustrating, but that's why libraries like dayjs makes this a bit simpler but you still have to do some calculations, but imagine doing this calculation using JavaScript's Date() object?, it will most likely be 10x harder.

Conclusion

This basically is the whole process involved in calculating a users age in days, months and years. Age calculation doesn't have to be a difficult task, with the right logic and a helping hand from libraries like day.js, you can turn a tedious math problem into a simple solution.

Thanks for sticking to the end (if you did). I am Oyinkansola, a front end developer helping service-based businesses attract their ideal customers online through well engineered websites. You can check out my Portfolio and follow me on X and LinkedIn.

Lessons Learnt Building a Frontend Mentor Project

Yahaya Oyinkansola — Wed, 15 Oct 2025 11:00:09 +0000

One of the best ways I’ve found to sharpen my frontend development skills is by building real projects, and no better way to do that than with Frontend Mentor. A while back, I built a Newsletter form project where users can sign up for a newsletter (like on a landing page). At first glance, it looked simple, but I ended up learning quite a lot along the way.

In this article, I am going to share the challenges I faced and the lessons I learnt while working on this project. Here's the live link and GitHub repo to check it out.

1. Discovering the `<picture>` Element

One of my favorite discoveries was the <picture> element. The UI of the form had 2 images, one for desktop and one for mobile, so I needed to display the right image depending on the users screen. One solution might have been to use 2 <img /> tags and render the appropriate image using media queries, but I decided to look for a better solution, and that's when I came across the <picture> element.

The <picture> element allowed me specify different image sources using a <source> element, based on the users screen width. For example, I could show a wide desktop image for larger screens and a smaller, optimized one for mobile.

<picture>
  <source srcset="desktop-image.png" media="(min-width: 80em)"></source>

  <img src="mobile-image.svg" alt="" />
</picture>

This did not only save me time, but also made my code cleaner and more responsive. It was a reminder that sometimes, the best solutions are already built into HTML, you don't have to use CSS or JavaScript to implement certain features, you just need to discover the appropriate HTML tag.

2. Practicing the BEM Naming Convention

Another big win was putting the BEM (Block, Element, Modifier) naming convention into practice for my CSS.

Usually, I write class names based on what comes to mind in the moment, which eventually made my CSS look messy and hard to maintain. With BEM, my class names became more structured and predictable. For example, instead of writing something vague like .error, I had a class called .newsletter__input--error. This made it clear where the class belonged, what it targeted, and how it was different from other elements.

BEM might feel a little verbose, and is definitely not compulsory for every project, but the clarity and scalability it brings are worth it, especially in bigger projects.

3. Leveling Up with TypeScript

This was my first real attempt building a project with TypeScript. I decided to code the logic part of the project in TypeScript, and it was a real eye-opener. At first, it felt strict and annoying honestly as the compiler kept throwing errors, but I quickly realized it was helping me avoid mistakes I wouldn’t have easily caught.

Here are a few TypeScript lessons I learnt:

Type Assertion – I came across an issue where TypeScript couldn’t figure out an element was an input element, and because of this, I couldn't access some of the properties it had. To solve this problem, I used type assertion to specify the element was of the type HTMLInputElement so TypeScript would know what type the element is. This is due to the fact that TypeScript doesn't look at your HTML, only JS code, that's why you need to explicitly define what type an element is. This gave me more confidence in how I was using that element.
```
const element = document.querySelector(".newsletter__input") as HTMLInputElement;
```
Optional Chaining (?.) – This was a lifesaver. Instead of worrying if an element existed or not, I used optional chaining to safely check before running operations. If the element didn’t exist, the code wouldn’t execute, and more importantly, the app wouldn’t break. Note that optional chaining is not a TypeScript specific feature, it can also be used in JavaScript, but I discovered it with TypeScript.

const newsletterForm = document.querySelector(".newsletter__form");

newsletterForm?.addEventListener("submit", e => {
  // Content here
})

These small lessons added up and made me feel much more comfortable working with TypeScript, reinforcing the fact that it’s a powerful tool for writing safer and more maintainable code.

Final Thoughts

What looked like a simple Frontend Mentor challenge turned out to be a great learning experience. I walked away with new knowledge of the <picture> element, more discipline in how I write CSS thanks to BEM, and stronger TypeScript skills.

The best part?, each lesson I learnt is something I can apply in future projects, whether it’s building responsive layouts, organizing my styles better, or writing more reliable JavaScript.

If you’re also working through Frontend Mentor projects or any project really, I encourage you to treat it as an opportunity to experiment with new tools and best practices. You’ll be surprised how much you can learn, even from the simple challenges.

If you are reading my content for the first time, I am oyinkansola, a frontend developer helping small businesses build clean and responsive websites that help them grow online. You can also find me on LinkedIn and X, and also check out my portfolio

How I Discovered TypeScript’s Record Utility Type (And How It Solved My Problem)

Yahaya Oyinkansola — Wed, 24 Sep 2025 07:35:36 +0000

Ever ran into errors in TypeScript and it took you hours to figure out?, that was me recently while building a personal project. In this article, I want to go over how I solved a TypeScript problem in my React application using one of TypeScript's pre-defined types.

While working on one of my personal projects, I ran into a TypeScript error that got me confused. I had a component that rendered a list of tasks grouped by the date they were added, the tasks were coming in as a prop called taskslist which is an object, and I converted that object into an array using Object.entries() so I can loop over it and display each task on the screen.

const Todos = ({ taskslist }) => {
  return (
    <>
      {Object.entries(taskslist).map(([date, tasks], index) => (
        <section key={index}>
          <TodoHeader date={date} noOfTasks={tasks.length} />
          <div>
            {tasks.map((task, index) => (
              <TodoItem key={index} task={task} />
            ))}
          </div>
        </section>
      ))}
    </>
  );
};

Everything worked at runtime, but I kept getting this error from TypeScript

// unknown being tasks
Property 'length' does not exist on type 'unknown'.

TypeScript didn’t know tasks was an array because Object.entries() returns data in the form [string, any][] or [string, unknown][] if in strict mode, so the compiler couldn’t infer that tasks had a length property or a map method.

The Solution

After making some research and analyzing my code, I realized the problem wasn’t Object.entries itself, but that I never explained to TypeScript the shape of taskslist. To fix this, I needed to be explicit about how taskslist is defined, that’s when I discovered the Record type.

What is Record?

Record is a built-in utility type in TypeScript. It's a cleaner way of specifying how the shape of an Object looks when we have keys and values that are predictable. It's syntax looks like this:

Record<KeyType, ValueType>

It basically says:

I want an object whose keys are of type KeyType, and whose values are of type ValueType.

For example:

type UserRoles = Record<string, string>;

const roles: UserRoles = {
  alice: "admin",
  bob: "editor",
};

This is equivalent to writing:

type UserRoles = {
  [key: string]: string;
};

Applying Record to My Problem

In my case, I wanted taskslist to be an object where:

The keys are strings representing dates like "2025-09-16".
The values are an array of tasks.

So I defined my types like this:

type Task = {
  id: number;
  title: string;
  ...
};

type TodosProps = {
  taskslist: Record<string, Task[]>;
};

then updated my component:

const Todos = ({ taskslist }: TodosProps) => {
  return (
    <>
      {Object.entries(taskslist).map(([date, tasks], index) => (
        <section key={index}>
          <TodoHeader date={date} noOfTasks={tasks.length} />
          <div>
            {tasks.map((task, index) => (
              <TodoItem key={index} task={task} />
            ))}
          </div>
        </section>
      ))}
    </>
  );
};

Now, TypeScript instantly knew that tasks was of the type Task[], and hence, gave no more errors about length or map.

I liked this solution because it provided me with 3 things
Clarity – Anyone reading the code, including me, can immediately understand the shape of taskslist.

Safety – If I accidentally try to pass in the wrong type, TypeScript will catch it.

Reusability – I can reuse the Task type in other parts of my app without duplication.

Conclusion

Learning about Record felt like unlocking a small but powerful superpower in TypeScript. Instead of fighting the compiler, I was able to guide it with the right information, and it rewarded me with better type safety and cleaner code.

If you’ve ever run into a situation where TypeScript doesn’t understand the shape of an object, give Record a try, it might be the missing piece that makes your app work as expected.

I am oyinkansola, a frontend developer helping productivity coaches build clean websites and tools that make their work easier. You can connect with me on LinkedIn and X.

What's that one TypeScript type that helped you solve a problem?

How I Applied an Higher Order Array Method In a Project

Yahaya Oyinkansola — Wed, 17 Sep 2025 18:11:58 +0000

One of the most exciting parts of being a programmer is when you finally get to apply a concept you’ve learnt in a real-world scenario. In JavaScript, I learnt about higher order array methods like map() and filter(), but more importantly, how chaining them together might produce more sophisticated results. It is one thing to know how these methods work, and another to solve an actual problem with them.

That’s exactly what happened while I was building the multi-step form project from Frontend Mentor. I discovered a practical use case for chaining higher order array methods together, specifically map().

Here's a live demo of the project. Let's get into the nitty gritty

The Challenge

In the 3rd step of the form, users are to select add-ons for their subscription plan. The application has two billing types (Monthly & Yearly) which is being selected from the 2nd step with a toggle, so when the billing type changes, the price for the add-ons should immediately reflect the billing type selected, but there was an issue.

The issue was that whenever the toggle changed, the state that held the users selected add-ons did not immediately reflect the price change, except if they re-select it again, which isn't very efficient. I needed a way to automatically update the state whenever the billing type changes so it reflects in the UI.

My Approach

Here’s how I was able to solve the problem:

Loop through the users selected add-ons – I used .map() on the selectedAddons state which is an array
Find the matching add-on from the default list – After mapping through the array, I used the findIndex() method to go through an array of pre-defined add-ons to find each addon that matches the users selected own.
Update the price dynamically with the index – This is where the chaining happens. I built a new array with .map() to update the prices of the users selected add-ons
React to state changes – I used useEffect() to listen for changes in the radioChecked state (the toggle). Whenever it changed, the code in the steps above runs, updating the state and re-rendering the UI

With this approach, the user doesn't have to re-select their add-ons before the price updates

The Code

Here’s a simplified version of the code that brought it all together:


import { useState, useEffect } from 'react';

// Addons is an array of objects
const addons = [];

export default function App() {

const [selectedAddons, setSelectedAddons] = useState([]);

useEffect(() => {
  const updateSelectedAddons = selectedAddons.map(selectedAddon => addons.findIndex(addon => addon.name === selectedAddon.name)).map(index => {
return {
      ...addon,
      price: radioChecked ? addons[index].monthlyPrice 
        : addons[index].yearlyPrice
    };
})

setSelectedAddons(updateSelectedAddons);
}, [radioChecked]);
}

With just a few lines of code, .map() and useEffect() worked hand-in-hand to keep the UI consistent and responsive to user actions.

Conclusion

This experience made me realize that concepts stick better when you apply them. I had studied .map() and other higher order array functions before, but it was while building this project I understood how they can be applied to solve a problem. This is exactly what programming is about, solving problems.

If you’re learning JavaScript (or any programming language), I encourage you to:

Build projects, even small ones.
Look for opportunities to connect new concepts to real problems.
Don’t just read the theory, apply it.

What concept have you recently learnt as a developer that you applied in a project?

I am oyinkansola, a frontend developer building solutions for non technical businesses, and sharing what I learn along the way, while helping developers write better and smarter code. You can connect with me on LinkedIn and X. Here's a live preview of the project, as well as the GitHub repo.

A TypeScript Fix For Handling Events in React

Yahaya Oyinkansola — Mon, 19 May 2025 12:11:25 +0000

Introduction

Building projects is always a great way to learn and upskill yourself as a developer. While building a project with Front End Mentor using React and TypeScript, I encountered a TypeScript problem in handling a change event which I want to share how I was able to solve.

Prerequisites

Basic understanding of React & TypeScript

In React, when you want to keep track of changes made on an input element, you have to make that input element a controlled input by passing a state to the value prop and handle the updating of that state in a method. Here's an example

import { useState } from "react";

function App() {
  const [fields, setFields] = useState({
    name: "",
    email: "",
  });

  function updateFields(event) {
    setFields((prevFields) => {
      return { ...prevFields, [event.target.name]: event.target.value };
    });
  }

  return (
    <form>
      <input
        type="text"
        name="name"
        value={fields.name}
        onChange={(e) => updateFields(e)}
      />

      <input
        type="email"
        name="email"
        value={fields.email}
        onChange={(e) => updateFields(e)}
      />
    </form>
  );
}

export default App;

Anytime we type inside any input field, the state updates and the update is immediately reflected in the input box. This works fine, but here is the same function written in TypeScript

You will notice a red error line on the event parameter, TypeScript is saying event has an implicit type of any because it doesn't know the specific kind of event we are running. This might be surprising to you because If you look at the JSX Markup, you would expect TypeScript to know we are calling the change event from an input element, but TypeScript doesn't, why?

TypeScript does not look at the JSX Markup of your component, it only looks at your method definitions

This means TypeScript doesn't care about your JSX structure, it only looks at your method definition to know what to do, so it's your responsibility to provide TypeScript with all the necessary information it needs. Since TypeScript doesn't look at our JSX, it needs to know the kind of event we are listening for which is a change event, let's indicate that in our code.

Now the error is gone, anytime you want to specify an event type, you write the event name using PascalCase style. We now have another issue in our code, TypeScript doesn't know what the name and value properties are, why is that?, TypeScript is aware we are calling a change event but it doesn't know which element is calling that change event. At first, this might look stressful, with JavaScript, I don't have to do all this explicit declarations, but understand that the whole point of using TypeScript is to explictly define everything you do in other to make your code scale better, and less prone to errors, so we have to define the type of element that fires off the change event

<HTMLInputElement> tells TypeScript the ChangeEvent is fired from an input element. You now see the errors are gone because TypeScript has more information about what event.target is, so it knows the name and value properties comes from an input element.

As a quick disclaimer, updateFields() will still run even though all these errors we solved are there, but it's only going to work in development. By the time you want to build your project for production, it won't compile.

Conclusion

That's it!, this was how I was able to solve the issues I had with TypeScript while building this web app in React. The same idea works for other types of events as well, you indicate what type of event you are running and tell TypeScript the HTML element that runs the event so that as you write certain properties or methods the element has, it is aware of them. Here's the live url of the project as well as the Github repo if you want to check them out. I am also on X and Linkedin if you want to connect with me. I am open for freelance work too, here's my portfolio.

Why I want to be a Front-End Developer

Yahaya Oyinkansola — Fri, 31 Jan 2025 10:11:17 +0000

Being a developer gives you the unfair advantage of building not just websites and web applications, but tools that solve your problems and that of other people, it's one reason I decided to be a developer, and on that Journey, I am currently working on being a solid front-end developer. In this article, I want to share the reasons why I decided to be a front-end developer, and what I aim to achieve in this software development industry.

Since I was small, I have always liked building stuff, and when I came across web development, I was totally hooked, I started learning how websites are created and how the web works, and that's how I got into this field. I decided to be a front-end developer because I love building beautiful, interactive, and user-friendly websites that enhance people’s digital experiences, the ability to turn designs into functional web applications excites me, and I am always learning to improve my skillset with modern tools and technologies to increase the value I can offer potential clients and businesses.

In other for me to become a highly skilled front-end developer, I realized I needed to participate in hackathons or internships, and I was glad I came across a good internship called HNG Internship. This internship happens every year and I have been participating in it for about 4 years now, this internship always shows me where I am lacking in my skillset, where I am good at and how to work productively as a developer. You can check it out with the link above (The internship has already started for the year, so the next batch might be towards end of the year). One benefit about this Internship is that they make people job ready through series of tasks from easy to complex, and put them in their job talent pool amongst other skilled developers in technologies such as React, NextJS, Vue etc. You can check out some of their React developers and VueJS developers to see the kind of talents they have.

My journey so far as a front-end developer has been an interesting one, I wrote an article about it which you can read here, I have learnt a lot of lessons about building websites and doing work for clients, I always taught building websites was what mattered most, but I never understood that delivering value is what matters, the website is just a means to that end. Thanks to working on some real world projects and the experience gained over the past few years, I have learnt how to work on projects and deliver the Job in the most efficient way possible. All these has helped me become a better developer with good problem solving skills.

My big aim as a software developer is to become a full stack developer that is well knowledgeable in both front-end and back-end technologies to build fully fledged web applications.

Conclusion

One thing I will like to stress on is that you should always have a strong why behind what you are doing, else when challenges come, it will be hard for you to get passed those challenges. My aim in the end is to become a proficient frontend developer who can build large and scalable web applications, HNG internship is just one of the ways I am going about doing that, at the same time, I am improving my skillset from building projects, finding ways to collaborate with other devs and learning new technologies.

Lessons learnt building a landing page with Frontend Mentor

Yahaya Oyinkansola — Sun, 29 Dec 2024 05:15:19 +0000

If you want to grow fast as a developer, the best approach to take is by building projects. Thanks to frontend mentor, they have provided a platform for experienced and newbie developers to build projects that will grow and expand their skillsets and knowledge. In this article, I am sharing what I learnt while building the Easybank landing page on Frontend Mentor which helped me improve my knowledge about React and TypeScript.

To be honest, when I Initially started this project, I taught I won't learn anything in the end because building a landing page is not a hard thing for me to do with my current skill level, but it was not until I had a mindset shift that I shouldn't just be building projects for the sake of building them, but rather aim to learn something from what I am building in other to see results. Taking this approach to build projects has profound benefit and it makes the whole process more fun and encouraging.

Here are the lessons I learnt building this landing page

1. Estimating the time of a project

One thing I learnt when it comes to estimating the duration of a project is that life happens and things will definitely not go as planned, so it's important you learn how to adapt and still show up, no matter what. Anytime a deadline you fixed didn't work, instead of just giving up, try to understand why things didn't go as planned and work towards avoiding that mistake again in the future, that's how to improve.

2. Importing images in a React application

Since I learnt React, I have always struggled with understanding how images are used in a React application, it just seemed like a big deal to me, but while building this project and making some research, I learnt 2 things

When an image doesn't change frequently e.g a logo, it's best to put that image in the public folder
When an image is likely to change from time to time e.g an image for a blog article, it makes sense to put that image in the src folder, so it compiles with the code at build time.

This 2 lessons helped me understand where to put the images that came with this project, and how to import them in my code. I put my logo in the public folder and put the images for the blog articles in the src folder because the image for a blog article can always change (let me know if you have a different idea about this).

3. Showing the active state of a link using a linear gradient

This was a nice practice to test my CSS knowledge. Initially looking at it, I taught it will be tough to do as I am not much of a CSS fan, but it was not so difficult in the end as my knowledge of CSS helped me get the result I was looking for. Here is how the code for my HTML and CSS looks

4. Typescript by default doesn't support non-code files

This is why I like building things from scratch because they help you understand what's going on under the hood in most of these frameworks. In React, I didn't realize TypeScript doesn't know how to handle files that are not code related like images, so to solve the problem, you will need a TypeScript Declaration file to tell it how to handle those kind of files. In my application, red lines kept showing where I imported my images and css files

It was until I made research on the problem, thanks to ChatGPT that I was able to come up with a solution. A TypeScript declaration file tells TypeScript how to handle certain types of files when it sees them, so I created 2 TypeScript declaration files to tell TypeScript how to handle my images and css files

Note — If you use vite to create a React project, it comes with a TypeScript declaration file by default called vite-env.d.ts which has all the declaration needed for most file types, but I deleted mine by mistake 😂😂 because I didn't think it was necessary, but good thing I did because I wouldn't have learnt this lesson otherwise.

Conclusion

Learning these concepts have helped me improve my knowledge about React and how to use TypeScript in a React application which has given me confidence to build more complex web applications. Let me know if you found any of these lessons helpful, and what you have learnt recently from React that you didn't know before. If you would like to check the code for this project, here is the github repo and a live preview.

You can find out more about me on X and check out some of my work on Github. The next project I am working on from frontend mentor is the Multistep-form, really looking forward to it!

Rebuilding a Front End Mentor Project in TypeScript

Yahaya Oyinkansola — Wed, 07 Aug 2024 10:33:21 +0000

Introduction

I am currently upskilling myself in TypeScript as part of the skills I need to land a Job as a Front End Developer. I started using Hitesh Choudhary's course on Youtube to understand how TypeScript works, Hitesh is a great teacher!, you should check out his Youtube channel to see what he does. In this article, I want to show you how I used TypeScript to rewrite the code for a Front End Mentor project I built with JavaScript, Front End Mentor is a great platform for building projects as a software developer, and not get stuck in tutorial hell. For those that are not familiar with TypeScript, let me give you a basic introduction to what it is

What is TypeScript?

TypeScript is a superset of JavaScript, meaning any valid JavaScript code is also valid TypeScript code, which makes it easy to adopt TypeScript incrementally in any existing JavaScript project. One of the most important features TypeScript brought into JavaScript is Type Checking. JavaScript is not strict with type checking, you might declare a variable to be a number, and later on change it to be a string somewhere else without any errors whatsoever (until you run the code of course). Here is an example

let num = 10;

num = "Hello";

console.log(num); // This is perfectly fine with JavaScript

If you have used languages like Java, C#, C++ etc, you know that these languages have Type Checking built into them. TypeScript introduced Type checking into JavaScript to reduce errors in our code (like the one above), and help us write code that is production ready. With TypeScript, you declare the types for your variables so TypeScript can warn you when you are attempting to do something wrong. There are other features TypeScript has, but type checking is the most important feature TypeScript provides, which makes it easier to write code in JavaScript. To get started using TypeScript, you will need to install it globally on your system with npm

npm install -g typescript

Then create a .ts file in your project folder e.g index.ts, and put this simple snippet

let num: number = 10

To run this code with the TypeScript compiler, open your terminal and run this command

tsc index.ts

This will convert the code from TypeScript to JavaScript!. Now that you have some basic understanding of what TypeScript is, and how to use it, let me show you how I used it to rewrite my FEM project

The Project

After learning some of the basics from Hitesh's course, I wanted to start putting them into practice straight away, so I was looking for some projects I did with JavaScript and found this Newsletter sign up project I did from Front End Mentor. Converting the code of this project wasn't easy, but it pushed me out of my comfort zone, and helped me learn a whole lot more about TypeScript which tutorials wouldn't have thought me (The best way of learning anything as a developer is by building projects). Here is the Github repo and Preview of the application if you like to check them out. Here is the HTML code of the application

    <main>
      <section id="newsletter" class="newsletter">
        <picture class="newsletter__image">
          <source
            srcset="assets/images/illustration-sign-up-desktop.svg"
            media="(min-width: 81.25em)"
          />

          <img src="assets/images/illustration-sign-up-mobile.svg" alt="" />
        </picture>

        <div class="newsletter__content">
          <h2>Stay updated!</h2>

          <p>Join 60,000+ product managers receiving monthly updates on:</p>

          <ul class="newsletter__features">
            <li class="feature__item">
              Product discovery and building what matters
            </li>

            <li class="feature__item">
              Measuring to ensure updates are a success
            </li>

            <li class="feature__item">And much more!</li>
          </ul>

          <form method="POST" class="newsletter__form">
            <label for="email">Email address</label>
            <input
              type="email"
              name="email"
              id="email"
              class="newsletter__input"
              placeholder="email@company.com"
            />

            <span class="form-error"></span>

            <button type="submit" class="subscribe__btn">
              Subscribe to monthly newsletter
            </button>
          </form>
        </div>
      </section>

      <section id="subscription-message" class="subscription__success d-none">
        <div class="subscription__message">
          <img
            src="./assets/images/icon-success.svg"
            class="subscription__icon"
            alt=""
          />

          <h3 class="subscription__heading">Thanks for subscribing!</h3>

          <p class="subscription__content">
            A confirmation email has been sent to
            <span class="subscription__email"></span>. Please open it and click
            the button inside to confirm your subscription.
          </p>
        </div>

        <button id="dismiss" class="subscribe__btn">Dismiss message</button>
      </section>
    </main>

This is the JavaScript code

const newsletter = document.querySelector("#newsletter");
const newsletterForm = document.querySelector(".newsletter__form");
const subscriptionMessage = document.querySelector("#subscription-message");
const formInput = document.querySelector(".newsletter__input");
const formError = document.querySelector(".form-error");
const dismissBtn = document.querySelector("#dismiss");
const emailText = document.querySelector(".subscription__email");
const emailRegex = /^[a-zA-Z]+@[a-zA-Z]+\.[a-zA-Z]{2,4}$/;

newsletterForm.addEventListener("submit", (e) => {
  e.preventDefault();

  let status = true;

  if (formInput.value == "") {
    status = false;
    formInput.classList.add("newsletter__input--error");
    formError.innerHTML = "Email is required";
  }

  if (formInput.value != "" && formInput.value.match(emailRegex) === null) {
    status = false;

    formInput.classList.add("newsletter__input--error");
    formError.innerHTML = "Invalid email address";
  }

  if (status) {
    newsletter.classList.add("d-none");
    subscriptionMessage.classList.remove("d-none");
    emailText.innerHTML = formInput.value;
  }
});

formInput.addEventListener("input", () => {
  if (formInput.classList.contains("newsletter__input--error")) {
    formInput.classList.remove("newsletter__input--error");
    formError.innerHTML = "";
  }
});

dismissBtn.addEventListener("click", () => {
  newsletter.classList.remove("d-none");
  subscriptionMessage.classList.add("d-none");
});

I won't explain the entire codebase, only the ones that had to do with me implementing TypeScript. The first thing I needed to do was define the types for some variables I declared above because when you select elements on the DOM, they have a default type of Element, this is a generic type that does not have specific properties and methods for HTML elements like <form>, <button> etc. The newsletterForm variable for example is a form element, if the type is not changed, we won't be able to access certain properties and methods available to form elements like e.preventDefault() because TypeScript is not smart enough to know we are selecting a form element. One way to specify the types we want in TypeScript is by using a technique called Type Assertion.

What is Type Assertion?

Type Assertion tells TypeScript you are certain about what the type of an element or variable is when TypeScript is not sure. For example, TypeScript is not sure what newsletterForm is, so we can use Type Assertion to let the compiler know that this variable is an HTML Form Element

const newsletterForm = document.querySelector(".newsletter__form") as HTMLFormElement;

The next thing I am doing further down the code is attaching an event listener to the form element

newsletterForm.addEventListener("submit", (e) => {});

I have told TypeScript that newsletterForm is a form element, but what if the element I assigned to the newsletterForm variable doesn't exist?, or the variable is not defined?, I will run into this problem

Uncaught TypeError: Cannot read properties of null

You must have seen this error in your console before, so how do you solve this issue?, by using what is called Optional Chaining. The optional chaining operator is used to safely access properties or methods of an object without running into unnecessary errors. If the object is not defined, the code is short circuited, and any code written after it will never execute. For example, this is how the optional chaining operator will be used with the newsletterForm variable.

newsletterForm?.addEventListener("submit", (e) => {});

We are now sure that even if newsletterForm returns null, the event listener code will never execute, which makes our code more secure. Let's now enter the code of the event listener

There is an issue with the if statement, because TypeScript is showing a red dashed line on the formInput variable, why is that?, because it is not sure what formInput is, you can use optional chaining to solve this. The next problem we have is trying to access the value property, because TypeScript is interpreting formInput to be of the type Element, and the Element type doesn't have a value property on it, so we also have to tell TypeScript that formInput is an HTMLInputElement, not an Element.

const formInput = document.querySelector(".newsletter__input") as HTMLInputElement;

newsletterForm?.addEventListener("submit", (e) => {
  e.preventDefault();

  let status = true;

  if (formInput?.value == "") {
    ...
  }
});

We also need to fix the formError variable because typeScript is complaining that it isn't sure what formError is. In this case, we first need to check if formError does not return null before changing the innerHTML value because you can't do assignment operations with optional chaining, why is that?, there is a chance the variable won't exist, so what is the point of assigning it a value?, makes sense to me.

newsletterForm?.addEventListener("submit", (e) => {
  e.preventDefault();

  let status = true;

  if (formInput?.value == "") {
    status = false;

    formInput?.classList.add("newsletter__input--error");

    if (formError) {
      formError.innerHTML = "Email is required";
    }
  }

  if (formInput?.value != "" && formInput?.value.match(emailRegex) === null) {
    status = false;

    if (formError) {
      formInput?.classList.add("newsletter__input--error");
      formError.innerHTML = "Invalid email address";
    }
  }
});

Next we go to the other event listener that listens for when the user types into the input box

formInput.addEventListener("input", () => {
  if (formInput.classList.contains("newsletter__input--error")) {
    formInput.classList.remove("newsletter__input--error");
    formError.innerHTML = "";
  }
});

This is the same issue we have already solved before by using the optional chaining operator, and checking if formError exists before setting the innerHTML value

formInput?.addEventListener("input", () => {
  if (formInput.classList.contains("newsletter__input--error")) {
    formInput.classList.remove("newsletter__input--error");

    if (formError) {
      formError.innerHTML = "";
    }
  }
});

I will also do the same thing for the dismiss button I added an event listener to

dismissBtn?.addEventListener("click", () => {
  newsletter?.classList.remove("d-none");
  subscriptionMessage?.classList.add("d-none");
});

Conclusion

Rebuilding this project with TypeScript has taught me about Type Assertion, optional chaining and how to declare types for HTML Elements, I hope you also got to learn something from my experience in rebuilding this Front End Mentor project with TypeScript. If there is anything you will like to suggest that will help improve this article, I am opened to feedback. You can follow me on X and Linkedin.

A Comparison between ReactJS and jQuery

Yahaya Oyinkansola — Fri, 28 Jun 2024 12:47:17 +0000

Hi, welcome back to my blog, today I would like to compare two front end technologies developers use to build websites and web applications, React and jQuery. I am also currently learning TypeScript, and I am writing an article about how I used TypeScript to recreate a FEM project I built with JS, expect to see that soon.

Introduction

ReactJS and jQuery are both popular front end tools for developing websites and web applications, but they have different purposes and excel in different scenarios. It's important to understand their differences and use cases so that you as a developer can choose the right tool for your projects. First of all, I know you will be like, what's even the point of learning jQuery in 2024?, before you attack me, you should know that as of August 2022, 77% of the 10 million most popular websites still use jQuery, source from Wikipedia. I think that says a lot about how jQuery is still very important in the web ecosystem, so it isn't going away anytime soon.

What is ReactJS?

ReactJS is JavaScript library used to build complex user interfaces. It follows a component-based architecture that allows developers create reusable UI components. React has a large community with widespread corporate backing, which makes it an ideal choice for many large-scale applications. Here are some of the key features React provides

Component-Based Architecture:
In React, your entire UI is made up of components. Take for example your twitter feed, you have the like component, the tweet component that shows a users tweet, the retweet component, the trending component etc. With React, you can deal with this components individually, and combine them together to form your entire UI which promotes reusability and modularity.

State Management
With React, you don't have to directly manipulate your DOM like how it is done in jQuery with things like $("#test").text(""). React uses what is called a state. Whenever you update the state of a component, React essentially reacts to that change, and re-renders the component to reflect the change

Virtual DOM:
This is the feature that makes react stand out from libraries like jQuery. The Virtual DOM is a lightweight representation of the real DOM in memory. Whenever the state of your component updates, React uses it's diffing algorithm to figure out what has changed in the Virtual DOM, which in turn updates the real DOM. This helps to efficiently update and render only the necessary parts of your components

JSX
React uses a syntax known as JSX that allows you write HTML within your Javascript code with ease, no need for complex string interpolation. Although, developers who use other frameworks like Vue and Angular don't really like JSX that much, but I feel it's not so bad. Let me know what you think

Currently, I am in an internship called HNG Internship, and they also use React as part of their Tech Stack. This internship has produced industry proven developers, so if you are looking for professional developers, check out their hiring platform on their website. I am looking forward to learning more about React from this Internship, as well as make more friends and expand my network.

One thing to understand about React is that React is just the "View" in the MVC architecture. It isn't a full fledged framework like Angular, it's only responsibility is to render the view of your application, and ensure the view is in sync with the state.

What is jQuery?
jQuery is a lightweight, fast, and feature-rich JavaScript library. It simplifies HTML DOM manipulation, event handling, and animation, making it easier to use JavaScript. I got to enjoy writing JavaScript code more because of jQuery, it simplifies so many things that pure JS sometimes can overcomplicate. Some features that jQuery provides are :-

Simplifying DOM manipulation. This isn't so straight forward with React
It provides support for AJAX (Asynchronous JavaScript and XML). You might argue most recent codebases don't use AJAX anymore, but there are still a lot of websites out there that use jQuery, and they need AJAX in other to do asynchronous operations
Cross browser compatibility - jQuery ensures that code works across multiple browsers, without any errors
It is useful for running simple scripts like form validation, simple animations like slide up, show and hide etc.

Key Differences

The key differences between React and jQuery is in the area of DOM manipulation. React uses a Virtual DOM, it doesn't manipulate the DOM directly, rather it only updates part of the DOM that changed, while with jQuery, you directly manipulate the DOM. React also offers better performance than jQuery thanks to how it handles DOM updates compared to jQuery's direct DOM manipulation. Since you can break your UI into several components with React, building complex applications becomes easier than if you were to try it with jQuery

Conclusion

Choosing between ReactJS and jQuery depends on your project's requirements. ReactJS is best suited for more complex, interactive, and scalable applications, while jQuery is still valuable for simpler and quick-fix tasks, you can also use it to build simple websites. For more content like this, you can follow me on twitter, let me know what you think about React and jQuery

My Journey so far as a developer

Yahaya Oyinkansola — Thu, 20 Jun 2024 12:22:54 +0000

Hey there fellow devs, I will like to use this post to share my journey so far as a developer. It's sort of a review of how far I have come, and the next steps I am looking to take. Hope you find it interesting and insightful, let's get into it!

I started coding when I was 13 years old, precisely 2013, but I started getting serious with coding in 2017. I didn't have any problem with HTML and CSS, but I realized I was using old courses and tutorials to learn Javascript, and this totally destroyed my motivation to continue learning how to code. I just felt like "Yeah this field isn't for me, I just can't do this anymore!". Most of us feel this way, and trust me all I wanted to do at that point was quit and never go back writing a single line of code again. Surprisingly, something happened to me, I taught to myself that "Yes I have been doing this all wrong, but rather than quit, let me retrace my steps back and start doing things right", what a mindset shift that has kept me programming till date!. When I made up my mind to start afresh and do things differently, I came across Brad Traversy's Youtube channel, and thanks to him, I was able to get myself back on track with JS and learn the fundamentals properly, I really owe part of not giving up on programming to him.

About late 2020 in December, I got a Job!, my first ever gig since learning how to code, I am still on that project up till now (4 years people building 1 Web Application!!, I am tired at this point). I didn't have any experience doing work for a client, and I was desperately looking for money and work to prove to myself that I have what it takes to be a developer. The project is a Real Estate Application built with HTML, CSS, SASS, JS, PHP and MySQL (and I mean custom PHP by the way, no framework, young me didn't know any better then). Here is a link to the website, let me know what you think - HMG Homes.

When the year 2021 came, I kept on improving my skills as a front end developer, I even learnt MySQL from a course I bought on Udemy by Colt Steele (A great instructor by the way 😉). I regret not documenting what I had been learning along the way, this was a huge lesson I got to learn when I joined Tech Twitter (or Tech X lol), and that's why most tech people will advice you to document your learning as you go, it doesn't only help you build an audience but shows you where you came from, which can be a source of encouragment. Around July/August, I got into an internship called HNG Internship which runs every year, it is less of an internship, and more of a competition with 10 stages, I stopped at stage 6, and couldn't continue because of light issues in my area and data (People in Nigeria will understand what I mean). The internship helped me improve my skills and more importantly collaborate with other developers which is a vital skill to learn as a developer. The reason why I hardly ever documented what I did was because I was afraid of putting myself out there, like what will people think of me?, I failed to realize that documenting is more for yourself than other people, you build up a reference that your future self can go back to which can be very helpful. Austin Kleon said in his book (Show Your Work) that "Be a documentarian of your work" and "You can be the best at what you do, but if no one knows you exists, it won't really matter".

The year 2022 came and I was really trying to see how to make money as a developer. The real estate client I am working for will just be sending me money whenever he feels like, as if he is doing me a favor (imagine), but it's kind of what I signed up for right?, you truly learn lessons from experience. I later on got a Job to build a React application for an NFT company which paid me ₦80,000 ($52 as of now) which to me at the time was a lot, for someone looking for money. The project couldn't be completed as the client wasn't all that serious with the application, and the url as of this writing isn't working again, good thing I got the money but I won't be able to show that application to potential employers as real world experience. So my problem mainly is that I have some form of experience, I have built some good projects, but it looks like I don't have experience at all 😂😂, this is why I said earlier that I wish I did a lot of documentation when I was still early on in this Journey, it's actually a bit harder when you know you have done stuff, but it's like there is nothing to show for it (I like to know if you ever being in this position, and what you did)

Fast track to 2023, I didn't get any side gig this year, but I started looking towards getting a full time Job, as freelancing was not as easy as people painted it to be, cash in today, no cash for the next 5 months, I even tried Upwork and Fiverr but they didn't just work for me (Or I didn't try hard enough). I also tried growing an audience on X but inconsistency kept leaving me discouraged, I will start today and stop in the next 3 days, this kept on going until I finally decided to just leave it for the main time. Another lesson I learnt along the way is to be consistent with doing something, no matter the current results you see, you have to stick with it for long to see any tangible results.

Currently in 2024, I am working on getting a Job as a frontend developer, specifically with React. As for my progress so far, I am building projects from Frontend Mentor platform, my current project is the age calculator app. I am working on my portfolio and resume and also trying to be consistent with building my personal brand on X (I am also trying to build my brand on Linkedin but I want to focus on 1 platform for now), consider following me on X @kansoldev. I believe it's not only me, as there seems to be too much to learn this days, it makes you feel like you have not even started, Front end development has really changed over the past few years, but nonetheless it's worth it if you can stick with it.

Thank you for sticking around, and reading this if you got to the end. Being a software developer is a long term commitment, but has a lot of benefiting rewards, afterall nothing good comes easy, everything good takes time to show, so keep pushing. You can follow me on X for more dev tips and insights.

Understanding the useMemo() hook

Yahaya Oyinkansola — Thu, 21 Mar 2024 11:38:53 +0000

Hey there, and welcome to another article in my React hook series, you can check articles I have written on the useRef() and useCallback() hooks. Today, I want to share what I have learnt about the useMemo() hook, which almost works the same way with the useCallback() hook.

What is the useMemo() hook?

The useMemo() hook is one of the built-in React hooks used for optimizing the performance of a React application, and it does this by caching the result of an expensive computation (Also known as Memoization). When a component renders, there might be functions that execute some piece of code to calculate data which will be used within that component, not all computations in your React application are expensive, as some are calculated fast as the component renders or re-renders.

Expensive computations can occur if you are fetching data from an API. Let's say for example you are fetching data about all the countries in the world from an API, it makes no sense that each time your component re-renders, you keep fetching all the countries again!, this can definitely slow down the application. In this type of scenario, you can use the useMemo() hook to store the result of that API call so that as the component re-renders, you still have all the countries and the API call only runs if specific data within the application changes, that's the advantage the useMemo() hook gives us!.

If you are familiar with the useCallback() hook, you might think useMemo() does the same thing with useCallback(), but it is important to note that useCallback() stores the entire function declaration, while useMemo() on the other hand stores the result of the function execution, but they both implement memoization.

Now let's look at the syntax of the useMemo() hook

const cachedValue = useMemo(calculateValue, dependencies);

calculateValue signifies the function that will be executed, with the result cached.
dependencies tells useMemo() what data to monitor so that whenever any change is made, it re-runs the function and caches the new result

I am currently working on implementing this hook in one of my React applications to further show how it works, but to illustrate an example in this article, let's consider a scenario where you have a list of posts that need to be sorted based on a specific criteria. If sorting is an expensive operation and the list of posts doesn't change frequently, you can use useMemo() to optimize that operation.

import { useMemo } from "react";

function Blog({ posts }) {
  const sortedPosts = useMemo(() => {
    console.log("Sorting posts...");
    return posts.sort((a, b) => a.date - b.date);
  }, [posts]);

  return (
    <div>
      {sortedPosts.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

useMemo() is used here to memoize the result of the sorting operation. The sorting function will only be executed when the posts array changes (In cases where an item is removed from the array or added to the array), preventing unnecessary re-sorting on each render.

Conclusion

Even though useMemo() is very helpful with optimizing your application by preventing functions that don't need to always run, it's important to use it only when it's necessary, else your application will become slower rather than faster. Overusing useMemo() can lead to unnecessary memory consumption because React stores the memoized values in memory. It's best to use useMemo() when you have identified performance bottlenecks in a specific component in your application through Profiling.

DEV Community: Yahaya Oyinkansola

A Simple Guide to Idempotency

What exactly is Idempotency?

Why is this so Important?

The Role of User Experience (UX)

Conclusion

A Guide to Precise Age Calculation in React

The Core Idea

Building The Age Calculation Logic

What’s Happening Here?

Why is this plugin necessary?

How no of months is calculated

How no of days is calculated

Calculating the Year

Conclusion

Lessons Learnt Building a Frontend Mentor Project

1. Discovering the <picture> Element

2. Practicing the BEM Naming Convention

3. Leveling Up with TypeScript

Final Thoughts

How I Discovered TypeScript’s Record Utility Type (And How It Solved My Problem)

The Solution

What is Record?

Applying Record to My Problem

Conclusion

How I Applied an Higher Order Array Method In a Project

The Challenge

My Approach

The Code

Conclusion

A TypeScript Fix For Handling Events in React

Introduction

Prerequisites

Conclusion

Why I want to be a Front-End Developer

Conclusion

Lessons learnt building a landing page with Frontend Mentor

1. Estimating the time of a project

2. Importing images in a React application

3. Showing the active state of a link using a linear gradient

4. Typescript by default doesn't support non-code files

Conclusion

Rebuilding a Front End Mentor Project in TypeScript

Introduction

What is TypeScript?

The Project

What is Type Assertion?

Conclusion

A Comparison between ReactJS and jQuery

Introduction

What is ReactJS?

Key Differences

Conclusion

My Journey so far as a developer

Understanding the useMemo() hook

What is the useMemo() hook?

Conclusion

1. Discovering the `<picture>` Element