DEV Community: Balamurugan D

JavaScript Array methods Explained

Balamurugan D — Tue, 14 Nov 2023 12:30:09 +0000

Arrays are a fundamental data structure that is used almost every day, unlike other data structures like a Tree or graph. JavaScript has some good methods that can be used on an array which is so easy to implement when compared to the traditional for-loop approach. In this blog, we will look at 6 JavaScript array Higher order methods, and when and how to use them with examples.

💡

Before that, If you want to know about Higher-order functions in JavaScript, make sure you read this blog.

There are a few things to note before starting,

All these array methods take an arrow function as one of the parameters.
This arrow function will get executed for each element of the array

ForEach

The forEach method is the simplest method of all, It is similar to a for loop implemented for an array. It takes in an arrow function and executes that arrow function for each element of the loop as the name says. The function also does not return anything.

const fruits = ['apple', 'banana', 'orange'];

fruits.forEach((fruit, index) => {
  console.log(`Fruit at index ${index}: ${fruit}`);
});

The arrow function can take in 3 optional parameters.

The first parameter is the current element.
The second parameter is the current elements index.
The Third parameter is the array itself.

The above parameter list will be similar in most of the array methods.

Map

The map method takes in an array and transforms it into another array. This method is very popular in the React world where an array is transformed into a JSX element. T

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

const squaredNumbers = numbers.map((num) => {
  return num ** 2;
});

console.log(squaredNumbers); // [1, 4, 9, 16, 25]

The map method returns the transformed array so there is a return value. Also, the callback function should return the transformed value for each element. This method also has similar parameters passed into the callback function like the forEach method.

Filter

The filter method provides an easy solution to selectively extract elements from an array based on a condition. It takes an arrow function that evaluates the condition for each element, creating a new array with only the elements that pass the test.

const numbers = [1, 2, 3, 4, 5, 6];

const evens = numbers.filter((num) => {
  return num % 2 === 0;
});

console.log(evens); // [2, 4, 6]

The arrow function can utilize the standard parameterscurrent element, index, and the array itselfjust like in many other array methods.

Reduce

The reduce method is a powerhouse for transforming an array into a single value, often used for summing up or accumulating values. It takes an arrow function and an initial value for the accumulator.

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

const sum = numbers.reduce((accumulator, current) => {
  return accumulator + current;
}, 0);

console.log(sum); // 15

The arrow function receives the accumulator and the current element, and it should return the updated value of the accumulator. Here, the sum of all numbers is calculated.

Every

The every method checks if every element in an array satisfies a given condition. It returns true if all elements pass the test; otherwise, it returns false.

const ages = [25, 30, 22, 28];

const isAdult = ages.every((age) => {
  return age >= 18;
});

console.log(isAdult); // true

In this example, the every method ensures that all ages are 18 or older.

Some

Conversely, the some method checks if at least one element in an array meets a specified condition. It returns true if any element passes the test.

const temperatures = [20, 25, 18, 22];

const hasHighTemperature = temperatures.some((temp) => {
  return temp > 25;
});

console.log(hasHighTemperature); // true

Here, some checks if there is at least one temperature higher than 25.

So that's it, Those are the 6 different JavaScript array methods that can be used in different scenarios based on your use case. I have used all these methods extensively. I hope this blog was helpful, leave a like and comment if you liked it. Until next time!

Demystifying JSX 🚀

Balamurugan D — Mon, 13 Nov 2023 18:09:52 +0000

React is popular because of its declarative approach to building UI components. This has led to a rise in the library's popularity, making it the de-facto standard for modern web development. The declarative approach comes from various factors like functional components and JSX. Don't get confusedJSX and React are two separate things but are used together. Some other frameworks like Vue.js and Preact also use JSX. In this blog post, we will learn more about JSX and how it makes our lives easier while coding in React.

approach doesnt scale well, and it is too verbose. Just imagine how an already complex application will look if written in the previous approach. This is what JSX brings to the table. With that example, we have reached the end of this blog post. This blog is a part of my React series, and if you like this series, let me know by leaving a like and comment. Until next time!

JSX is an XML-like syntax that is often used to express UI components. It was developed by Facebook. You can learn more about JSX here. JSX looks similar to HTML but is different in many ways concerning the syntax and features like:

A JSX element should have only a single root element. This should be obvious if you are using the fragment in React (<></>).
It requires tags to be closed explicitly. For example, in JSX, the image tag should be autoclosed (<img />).
Most of the HTML attributes are in camel casing. For example, onClick, onChange, etc.
JSX allows the injection of JavaScript using curly braces. This allows the full power of JavaScript to create a dynamic UI.

Now let's try to create a simple React component without using JSX and JSX and compare to see the benefits and simplicity that JSX is bringing.

Lets start by creating an h1 tag containing Hi Mom!

import React from "react"

export default function Component() {
  return (
    React.createElement('h1', {id: "heading"}, "Hi Mom!")
  );
}

Okay, so here you can see some new weirdness going on. Let me demystify it.

React exports a function createElement that lets us create any HTML element. It takes in three parameters:

The first parameter takes in the name of the HTML element, in our case, the h1 element.
The second parameter will take in all the valid HTML attributes like id, className, onClick, etc. In our case, the id attribute.
The third parameter will take in the children for the current element. In our case, just the text Hi Mom!.

Now React will take all these and convert them into HTML behind the scenes. Lets go the extra mile by wrapping the h1 element in an header element.

import React from "react"

export default function Component() {
  return (
    React.createElement(
      'header',
      {},
      React.createElement(
        "h1",
        {id: "heading"},
        "Hi Mom!"
      )
    )
  );
}

Here you can see the use of the third parameter. We have wrapped the previously created element into a new header element. This is how React elements can be created without using JSX 🤯.

Now lets use JSX and recreate the UI that we have written so far.

export default function Component() {
  return (
    <header>
      <h1 id="heading">Hi Mom!</h1>
    </header>
  );
}

The syntax with JSX is far more readable and familiar as well. The previous approach doesnt scale well, and it is too verbose. Just imagine how an already complex application will look if written in the previous approach. This is what JSX brings to the table.

With that example, we have reached the end of this blog post. This blog is a part of my React series, and if you like this series, let me know by leaving a like and comment. Until next time! 👋

Building an Overengineered React Ecosystem 🚀

Balamurugan D — Thu, 02 Nov 2023 17:34:47 +0000

In the world of web development, React has been a standout library for creating user interfaces. However, when it comes to building complex applications, it often leans on various third-party packages to get the job done. What if we took these dependencies and mixed them into a single ecosystem? This would transform React into a full-fledged framework, with a dash of humor, of course! In this blog, we'll craft the ultimate overengineered React ecosystem by combining several powerful libraries and tools.

React 18:

React 18 brings impressive features like concurrent rendering and server components, making your app feel like it's on a rollercoaster of performance improvements. 🎢

TypeScript:

TypeScript is like the grammar police for your code. It's like having a spell checker that makes sure your variables, functions, and data structures are used correctly.

import React from 'react';

interface MyComponentProps {
  name: string;
  age: number;
  email: string;
}

const MyComponent: React.FC<MyComponentProps> = (props) => {
  const { name, age, email } = props;

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Email: {email}</p>
    </div>
  );
};

export default MyComponent;

Vite:

Vite is the speedster of the build tool world. It's like your favorite race car, offering an instant development server and optimized build output.

React Router Dom:

If your app is like a city, React Router Dom is the GPS. It helps users navigate around your app smoothly and find what they're looking for.

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

<Route path="/about" component={About} />
<Link to="/about">About</Link>

Axios:

Axios is your trusty messenger for sending and receiving data from the internet. It's like the postman of the digital world, delivering HTTP requests.

React Query:

React Query is your data-fetching sidekick. It keeps your app snappy by handling data fetching and caching, making your life easier.

import { useQuery } from 'react-query';

const { data, isLoading } = useQuery('userData', fetchUserData);

Redux Toolkit:

Redux Toolkit is the magic wand for managing the state of your app. It simplifies complex state management and keeps your app's data in line.

import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
  },
});

const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

Tailwind CSS:

Tailwind CSS is like having a personal stylist for your app's design. It makes your app look trendy and stylish without breaking a sweat.

<div className="bg-blue-500 text-white p-4">
  This is a Tailwind CSS component.
</div>

ESLint and Prettier:

ESLint and Prettier are your code buddies. They nag you when your code is messy and help you clean it up, just like a neat freak friend.

Vitest:

Vitest is your app's health checkup. It ensures your components are in top shape and ready to conquer the digital world. 🩺

import { test, runTests } from 'vitest';

test('My React Component', async (context) => {
  const { queryByText } = render(MyComponent);
  await context.is(queryByText('Hello, World!'), 'Hello, World!');
});

runTests();

Playwright:

Playwright is your app's bodyguard. It tests your app's every move, making sure it's ready to face the real world. 🕵

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('<https://example.com>');
  await page.click('a');
  await browser close();
})();

By combining these libraries and tools into one ecosystem, we've created an over-the-top React framework. It's like adding rocket boosters to your React development. Whether it's routing, data fetching, state management, styling, testing, or end-to-end testing, our overengineered ecosystem has got you covered. If you're looking for a complete solution to turbocharge your React projects, give this ecosystem a spin. It's like adding nitro to your coding journey. Happy coding! 🚀🎉

React with Typescript, Tips and Tricks that you should know!

Balamurugan D — Mon, 30 Oct 2023 18:15:13 +0000

React is a popular JavaScript library for building user interfaces, and TypeScript is a statically typed superset of JavaScript. Together, they make for a powerful combination, allowing developers to write safer and more maintainable code. In this guide, we'll explore various aspects of using TypeScript with React, from typing props to taking advantage of TypeScript's advanced features for a more productive development experience. Additionally, we will refer to the React TypeScript cheat sheet to help you deepen your understanding.

Typing Props

One of the fundamental aspects of React development with TypeScript is typing the props passed to your components. You can define prop types directly within the parameters, enhancing code readability and maintainability:

type Props = {
    prop1: string;
    prop2: string;
}
const MyComponent = ({ prop1, prop2 }: Props) => {
  return <div>{prop1} - {prop2}</div>;
};

This ensures that MyComponent receives the expected props and provides type safety during development.

Generic Types for Hooks and Functions

You can use TypeScript's generic types to provide type information to React hooks and functions like useState, useRef, useMemo, and more. For example:

const [count, setCount] = useState<number>(0);
const myRef = useRef<HTMLDivElement | null>(null);
const memoizedValue = useMemo<number>(() => computeExpensiveValue(), [deps]);

These generic types help prevent type-related bugs and make your code more self-explanatory.

Typing onClick Functions

When defining onClick event handlers that are used in JSX elements, it's a good practice to specify their types, especially if they are defined separately. For example:

type MouseEventHandler = (event: React.MouseEvent<HTMLButtonElement>) => void;

const handleButtonClick: MouseEventHandler = (event) => {
  // Handle button click event
};

Typing the handleButtonClick function ensures that it correctly handles the onClick event.

VS Code Tooltip for React Components

Visual Studio Code provides excellent TypeScript support, and you can take advantage of it to get tooltips and autocompletions for React components. By hovering over an HTML element or its attribute, you can infer the return type or the type of the element/attribute. This feature makes it easier to understand how to use it correctly and define types for your components.

PropsWithChildren

React components often receive children as props. The PropsWithChildren utility type is helpful for this scenario. It allows you to specify that a component accepts children and other props:

import { PropsWithChildren } from 'react';

type Props = {
    title: string;
} & PropsWithChildren;

const Card = ({ title, children }: Props) => {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="content">{children}</div>
    </div>
  );
};

ComponentPropsWithoutRef and ComponentPropsWithRef

The ComponentPropsWithoutRef and ComponentPropsWithRef utility types are helpful when you're working with component props. They help in maintaining a clear separation between props and ref types:

ComponentPropsWithoutRef allows you to specify component props without including the ref prop.
ComponentPropsWithRef includes the ref prop.

For example:

import { ComponentPropsWithoutRef } from 'react';

type InputProps = ComponentPropsWithoutRef<'input'>;

const MyInput = (props: InputProps) => {
  return <input {...props} />;
};

By using these utility types, you can ensure that your components handle props and refs appropriately.

Conclusion

Using React with TypeScript provides a strong foundation for building robust and maintainable applications. Typing props, using generic types for hooks, and understanding advanced TypeScript utility types like PropsWithChildren, ComponentPropsWithoutRef, and ComponentPropsWithRef are key steps in mastering this powerful combination. Make sure to refer to the React TypeScript cheat sheet for additional tips and best practices to enhance your React TypeScript development skills. Happy coding!

🚀 A Fun Journey to Cleaner Git History: Rebase and Interactive Rebase

Balamurugan D — Thu, 26 Oct 2023 18:33:58 +0000

Git is an awesome tool for managing code, but sometimes our commit history can get a little messy. 🙈 You might have experienced those awkward-looking merge commits when bringing changes from one branch into another. Fear not, my fellow developers! Git comes to the rescue with a nifty feature called "Rebase." Let's dive into this magical journey of git history cleaning using rebase!

🤔 The Merge tantrum

Picture this: you have a feature branch that's a few commits behind the master branch. In the below message, the blue-colored commits are in the master branch and the cyan-colored messages are in the feature branch. In this case, the added helper methods commit is created after the feature branch is created. So now to update your feature branch with your master branch, if you merge, you get a merge commit that, quite frankly, looks like a tangled ball of yarn. 🐱🧶 Merging is cool, but it can clutter your commit history with all those merge commits, creating a jungle of complexity, and your git history looks like this.

🧹 The Rebase Magic

Enter "Rebase"! It's like having a magical broom to sweep away those messy merge commits. 🧙 What Rebase does is take your feature branch and neatly replant all your hard-earned commits on top of the main branch. 🌱 It's like transplanting your garden without anyone noticing. This process keeps your changes but gives you a cleaner history.

When Not to Rebase

Hold your magical brooms, folks! Rebase should be used with caution. If your branch is already on a remote repository, and others have access to its commits, things can get a bit tricky. When you rebase, Git essentially creates new versions of your commits with different IDs, which can lead to confusion. 🤯 It's like a magical identity crisis for your commits!

The Interactive Rebase Adventure

But wait, there's more! Git's Rebase isn't just about tidying up. It can also be your storytelling tool! Enter "Interactive Rebase." 🎬 With this feature, you can rewrite, delete, rename, or even reorder your commits before you share them with the world. It's like being the director of your own commit history movie. 🎥

To start this adventure, use the command:

git rebase -i <commit_id in the current branch>

The -i stands for "interactive." 🎭

Choose your characters wisely! The commit ID you pick should be from your current branch. For example:

git rebase -i HEAD~5

In this command, we're taking the last 5 commits into account for our rebase extravaganza. 🕺💃

🎭 The Rebase Theater

Here, you get to play the director. You have different roles to cast for your commits:

PICK: Keep the commit it's like saying, "You're the chosen one!"
REWORD: Edit the commit message fix typos, clarify, or make it more informative.
DROP: Delete the commit sometimes, you've got to trim the excess.
FIXUP: Combine commits merge them into one for a cleaner story.

It's like shaping your commit history to be an Oscar-winning blockbuster. 🏆

And there you have it, the magical world of Rebase and Interactive Rebase in Git! 🌟 Clean up your history, make your commit messages more dramatic, and create a commit history worth showing off to your fellow developers. Remember, version control can be fun and empowering! Happy coding and history-tidying, my friends! 🚀🌈👨💻📜

Don't be a Frameworker, Be an Engineer

Balamurugan D — Mon, 23 Oct 2023 18:22:54 +0000

📣 Hey everyone! I came across some interesting advice on the internet a few months back, and I've been trying to follow it ever since. Today, I want to share it with all of you. The advice is simple: "Don't be a Frameworker, Be an Engineer." 🛠👩💻

But what does that really mean? Let me explain using my own experience. In my day job, I work with JavaScript frameworks like React and NestJS, which is cool. 🚀 However, because I spend most of my time in these frameworks, I started calling myself a "React Developer" on LinkedIn. 📋 But here's the thing: a software engineer should be open to learning and technology as needed. 🌐 It's all about having the right mindset.

There are a couple of reasons why some people get stuck in the "Frameworker" mindset. First, folks don't want to invest time in learning something new when they're already getting the job done with what they know. 🕒 Second, job titles often specify things like "Full Stack Java Developer" or ".Net Developer," which can make you feel locked into a specific technology. 🧱 But remember, the basics of programming are pretty much the same across the board.

Imagine your organization decides to switch from TypeScript to Go for microservices (a great move for better performance). If you have the right mindset, you'd gladly say YES! Learning a new language isn't as hard as you might think. 🧠 The fundamental programming concepts like conditionals, loops, and functions remain constant. Adapting to a new syntax is a piece of 🍰.

If you firmly believe you're only a "React Developer" or an "Angular Developer" and can't step out of that box, well, good luck! 🍀 What if the framework you've mastered becomes obsolete one day? The main goal of a software engineer is to solve problems effectively using the right tools. While React is fantastic for building user interfaces, there are more performance-focused alternatives out there. For instance, when building a blog site, choosing a framework like Astro or Gatsby might make more sense. 🚀📝

I got this amazing advice from a YouTuber named ThePrimeagen, and it's been a game-changer for me. I've started learning Go and coding in it outside of my day job where I mainly use TypeScript. It's a fun and rewarding practice, and I wish I'd understood this mindset earlier in my career. 🚀🧡

So, I encourage all of you to be open to working with any technology and focus on problem-solving rather than getting too attached to a particular language or framework. 🌟🚀

How to 🙈 Screw up as a Programmer?

Balamurugan D — Thu, 19 Oct 2023 18:20:17 +0000

We learn anything by trial and error, at least I learned anything that way. But making mistakes will have its own cost, If you make a syntax error that gives a runtime error, you can simply correct the syntax by seeing the error message, But what if you make a mistake that brings down production or something similar which could lead to escalation and other corporate dramas? Those are human errors that are bound to happen and programmers do make these mistakes. There are a lot of horror stories where a faulty algorithm turned out to be looping infinitely to generate a bill of $72,000 from GCP! This is a real story and to know about this read this article.

So what I mean is programmers do make mistakes, of course, I am not encouraging you to go write bad code that will make catastrophic things, but the experiences of these mistakes will help you to be more cautious. I will share some of these experiences that I had that took the soul out of my body for a few hours. 😱

Huge bill from AWS! 💸

Even I got a hefty bill of $40 from AWS. This was when I was in my final year of college where I hosted one Flask API in an AWS EC2 instance for my final year project. Everything was fine until I got the bill. Turns out I have to shut down and deallocate the instance once my job is done! Actually, that statement is so lame to say today but at that time, I had that realization the hard way. I didnt have the money, what do you expect from a student, 40 dollars? are you kidding me? My parents let me stay in their home for free and I was grateful for that. So anyway I went and deactivated my AWS account so that I could avoid the fee. 😅

Kaboom! The code is gone 🙀

So this happened very recently, I was in a new team as a frontend developer and had a task to work on. So I created a branch, worked on it created a PR myself and self-approved it. I self-approved it because 1. I cant directly push to the branch because of the branch protection rules, and 2. I was not informed that the code review activity had started because the project was new and those setups were not in place yet. So my newly appointed team lead asked me to revert my PR and get it reviewed. So I did that, in that process, I accidentally reverted one particular merge commit which contained the code of 7 other developers! Yes, SEVEN! I casually reverted the PR and submitted it for review and within 30 minutes, I received escalation emails, and multiple calls from my scrum master, leads and members saying that my recent revert had created chaos. I cant frame this as an honest mistake because in git, reverting changes is always a tricky task in a collaborative space where other people also push code. So I took the blame and reverted the commit that reverted my merge! Git was a blessing and a curse here, It put me through a nightmare and helped me to come out of it. 😬

So those are 2 among a lot of incidents where I screwed up. I dont feel the shy in sharing my failures because It is part. I will share this post on LinkedIn where most people will only post their successes. For me, these failures shaped me as a programmer. And actually, I didnt come up with any content so posted this article to fill the gap. Until next time! 😅👍

Styling React Components

Balamurugan D — Mon, 16 Oct 2023 17:35:27 +0000

Personally, for me, I dont like to style. I mean, I dont hate CSS and styling but I hate when I give styling a try and It looks bad.

Anyway, I dont have to emphasize the importance of styling, If your users need to stay in your app, then the app should look good. Unlike the dating culture, in web development Looks do matter! (Just Kidding, Looks matter in dating as well! 😂).

In this article, I will share 5 different ways to style react components so that you can choose the approach that suits you when you develop your application.

But first of all, why should you know all the different ways to style, you may ask! Isnt knowing one approach enough? Yeah but No. First of all, it is easy to take consistency for granted. Because in a large codebase, developers should be aware of the styling approaches, and should not go with the approach that they are familiar with. So knowing the other approaches exist will keep you ready to tackle any situation.

1. The `style` attribute

In react, you either write the inline styles using the style attribute.

<div 
  style={{
    display: "flex", 
    justifyContent: "center", 
    alignItems: "center" 
  }}>
  <h1>Hi Mom!</h1>
</div>

As you can see, this approach has a few problems, if the CSS properties count increases, then the component will be bloated with a bunch of CSS. Reusability is not an option and for inline CSS the specificity is also high so If you already have some styles, the inline styles will most probably take precedence!

2. CSS or Sass

You can also have your styles in a separate stylesheet and import that into the component. This provides the benefits of using either the CSS or Sasss features like nesting, variables, mixins and so on. I like this approach and I will never be against this one, the only thing is there are more modern approaches that solve the problem better. But if you prefer this approach then you can very well go with this.

3. CSS in JS

Initially, I didnt like this approach but when I started to use this, this was a game changer. Essentially there are libraries like styled-components that let us write styles in a normal CSS way and also give additional features like nesting, conditional styling and so on, and produce a react wrapper component out of the styles that we define. This approach is really useful because you can organize your styled react components better. Look at the following example.

export const App = () => {
  return (
    <Wrapper>
      <h1>Hi Mom!</h1>
    </Wrapper>
  );
};

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center
`

So here, notice the way I have written the CSS. Yes the API that this library gives is a bit weird but you will get used to it in no time. This is a better way to write CSS directly in a JavaScript file. If you are using VS Code, install the styled-components extension, this gives better syntax highlighting and auto-complete support which will be handy!

4. Tailwind CSS

Tailwind is by far the best and most modern approach for styling. Tailwinds approach is to provide utility classes for your known CSS properties like flex means display:flex and so on. This will let you quickly style your components and not worry about naming the class or id to style your components. Sometimes your class names can become a nightmare but there are ways to come around that as well. Tailwind provides customization as well with the tailwind.config.js file where essentially you can configure your typography, colors and so on. Look at the following example.

export const App = () => {
  return (
    <div className="flex justify-center items-center">
      <h1>Hi Mom!</h1>
    </div>
  );
};

As you can see, it is intuitive and easy. Developers can quickly style the components. If you are using VS Code install the tailwind extension for auto-complete support. It will be very useful.

5. Component Library

The final approach is going with a component library. Component libraries come with pre-styled components reducing our work. There are several libraries out there like MUI, Daisy UI, Chakra UI and so on. Usually, component libraries come with a built-in opinionated way of styling, for example, MUI comes with styled-components for styling and Daisy UI is built on top of Tailwind CSS. This way, you get pre-styled components and a way to add styles on top of them.

To conclude, now you know 5 different ways to style react components. Next time you can pitch the approach to your seniors which will give you a good impression with your colleagues. Trust me, you can pick up girls if you know CSS! (Just kidding, programming nerds can never get girls by exposing that they are programmers!)

Singleton Pattern

Balamurugan D — Thu, 12 Oct 2023 17:29:51 +0000

People who understood the above picture dont need to read this article, you already understood the pattern but those who didnt get it, stay tuned to where I will explain it at the end.

The most popular pattern, and usually the pattern that is covered first when the topic of design patterns comes is the Singleton pattern. The idea here is to share a single global instance throughout the application. I will first explain how this pattern works and will share my thoughts on this pattern because I feel that this pattern should be an anti-pattern rather than a design pattern.

Overview

So with the Singleton pattern, basically we restrict the information of certain classes to one single immutable object that can be accessed globally throughout the application. For example, we can have a counter instance with methods like increment, decrement and currentCount.

The increment method increments the value of the counter by 1. Any time this method is called anywhere in the application, it affects the single instance of the counter that has been created. This makes sure that there is only a Single source of truth.

Implementation:

let instance;

class Counter {
  constructor() {
    if (instance) {
      throw new Error("You can only create one instance!");
    }
    this.counter = counter;
    instance = this;
  }

  getCount() {
    return this.counter;
  }

  increment() {
    return ++this.counter;
  }

  decrement() {
    return --this.counter;
  }
}

const singletonCounter = Object.freeze(new Counter());

export default singletonCounter;

Creating the Counter class, which contains a constructor, getInstance, getCount, increment and decrement method. Within the constructor, we check to make sure the class hasn't already been instantiated.
Setting a variable equal to the frozen newly instantiated object, by using the built-in Object.freeze method. This ensures that the newly created instance is not modifiable.
Exporting the variable as the default value within the file to make it globally accessible.

Is it an Anti Pattern?

One of the most overused patterns in the programming industry is the singleton pattern. This is my opinion and always anyone can have any opinions. I couldnt think of any use case for this pattern because of the hidden tradeoffs that it has. What do I mean by it? This pattern surely gives an advantage by restricting the instantiation of multiple instances and saving memory but at the same time, This pattern gives short-term simplicity by giving up long-term scalability and maintainability. When It comes to unit testing, since we cant create new instances each time, all tests rely on the modification to the global instance of the previous test. The order of the test matters in this case, and one small modification can lead to an entire test suite failing. In JavaScript, ES modules are by default singletons, meaning we not need to create singleton to achieve this behavior.

Sure it has a great use case, for example, for state management, the Redux library has a store that follows the singleton pattern, one instance of the store is available throughout the runtime of the application which makes an excellent use case of the singleton pattern. Redux also uses the observer pattern by allowing to subscribe to the store to get the values. To know more about observer patterns, read this article.

Conclusion

The motive of this article is not to trash talk about the Singleton pattern, but to explain the pattern itself and to analyze whether a particular pattern is useful. My opinions are totally against the singleton pattern but you may find some good use case for it. Singleton pattern can be a great tool for some libraries like Redux but not in a real-world application.

The image above has multiple instances of singletons!

Smart and Dumb React components

Balamurugan D — Mon, 09 Oct 2023 17:49:09 +0000

React is the popular choice in the web development community to build UI. It leverages the concept of components where the UI will be broken down into individual, reusable chunks. When this idea came out, it was revolutionary, and still it is. React is unopinionated as well, meaning that there are no enforcements like Angular. Unopinionated approaches often tend to be exploited rather than leveraged. In React, the component hierarchy is very important because it ensures readability and the code base can be easily scaled, managed and unit-tested. Keeping that point in mind, In this article we will cover one of the underrated approaches to architecture components in React.

Smart and Dumb components (also known as container/presentation pattern) is an approach where the Dumb components take care of how the data is shown (UI) and the Smart components take care of the business logic and handle external dependencies and side effects like API requests etc.

So we will build a basic Todo App in this example to explain this pattern. Here the TodoList.js and TodoForm.js are Dumb components and the App.js is the smart component.

// TodoList.js
import React from 'react';
import { Todo } from '../store/todo.slice';

function TodoList({ todos, deleteTodo }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          <p>{todo.text}</p>
          <button
            onClick={() => deleteTodo(todo.id)}
            data-testid={`todo-${todo.id}`}
          >
            Delete
          </button>
        </li>
      ))}
    </ul>
  );
}

export default TodoList;


// TodoForm.js
import React, { useState } from 'react';

function TodoForm({ addTodo }) {
  const [inputText, setInputText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputText.trim() !== '') {
      addTodo(inputText);
      setInputText('');
    }
  };

  return (
    <form onSubmit={handleSubmit} className="flex gap-2">
      <input
        placeholder="Add a To-Do"
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
      />
      <button type="submit">Add</button>
    </form>
  );
}

export default TodoForm;


import React from 'react';
import { useDispatch, useSelector } from './store';
import { addTodo, deleteTodo } from './todo.slice';
import TodoForm from './TodoForm';
import TodoList from './TodoList';

function TodoApp() {
  const todos = useSelector((state) => state.todoSlice);
  const dispatch = useDispatch();

  const handleAddTodo = (text: string) => {
    dispatch(addTodo(text));
  };

  const handleDeleteTodo = (id: number) => {
    dispatch(deleteTodo(id));
  };

  return (
    <div className="w-full flex justify-center flex-col h-full items-center">
      <TodoForm addTodo={handleAddTodo} />
      <TodoList todos={todos} deleteTodo={handleDeleteTodo} />
    </div>
  );
}

export default TodoApp;

If you look closely, The TodoList.js and the TodoForm.js components are called pure functions, which means that given an input, the component will only render one output, which usually can be achieved when there are no external dependencies for the component. In the App.js, takes care of dealing with the Redux store and provides the functionality to the dumb components via props. As you can see, the addTodo and deleteTodo functions are defined in the smart component and passed to the dumb components.

Advantages:

The dumb components can be reused throughout the application.
Easily enforcing separations of concern like the UI will be handled in the dumb components and the business logic will be handled in the Smart components.
Testing dumb components will be very easy as they are pure functions and there will be no need to mock any libraries or external dependencies which reduces a lot of effort.

In the above example, considering that you have implemented unit testing for TodoList.js, TodoForm.js, and the todo.slice.js, the main App.js technically doesnt need to be unit tested because if you look closely, all the parts of the code are already tested individually, so ultimately you will get the confidence that your application will work.

Disadvantages:

The same approach can also be implemented using Hooks. The business logic can be wrapped in a custom hook and all the components can be kept as dumb components. For me, a mix of both approaches will work fine.
This approach can be an overkill for a smaller application.

Higher order components in React

Balamurugan D — Thu, 05 Oct 2023 18:09:30 +0000

Any developer trying to attend a React interview will come across the question What are HOCs? from their interviewer, and this question will give the notion to the interviewer whether you are a good front-end engineer specializing in React. Following my previous article on Higher-order functions, we will look at Higher-order Component patterns in React with some examples.

Lets say you have some reusable logic that you want to use across all your components, there are several patterns to achieve that and one such pattern is the HOC pattern. Look at the following example,

function withCenterStyling(Element) {
    return (props) => {
        const styles = {
            display: "flex",
            alignItems: "center",
            justifyContent: "center"
        }
        return <Element {...props} styles={styles} />;
    }
}

Here, the withCenterStyling is a HOC, what it does is that it takes another React Functional component and returns a new overridden functional component.

💡

A functional component is nothing but a function that returns some HTML which is referred to as JSX.

So the withCenterStyling component can be reused for any component that requires a center alignment, which promotes code reusability. This is Higher order Components, Simple!

But that example is very basic, lets take another example.

// imagine there is a loading spinner component existing
import Loading from "./Loading.tsx";

function withLoader({ Element, url }) {
    return (props) => {
        const [data, setData] = useState(null);

        async function loadData() {
            const jsonData = await fetch(url);
            const response = await jsonData.json();
            setData(response);
        }

        useEffect(() => {
            loadData();
        }, [])

        if (!data) return <Loading />;

        return <Element {...props} data={data} />;
    }
}

Uff! That is a lot of code but lets break it down. As you know by now, a HOC will take in a react component and return another react component. So here, the withLoader will take in a component and a URL. So the idea here is that the data will be fetched from the provided URL and the fetched data will be passed to the component. During the fetching time, a small loading spinner should be displayed. This will be very useful because showing Loading progress while fetching data is such a common activity.

So here the higher-order component is doing the data fetching and conditionally shows the loading spinner if the data is not yet received! See, Its that simple.

So this is HOC in React. It will be really useful when the React Component Architecture is well maintained. HOCs can also be incrementally added to an existing codebase so If you want to impress your team lead or colleagues, explain this concept, take up the refactoring task, implement HOCs and break the UI in the production! All the best!!!!!

Higher-order functions in JavaScript

Balamurugan D — Mon, 02 Oct 2023 16:31:30 +0000

This blog focuses on Higher-order functions, what problem it solves, and how to use them in your daily life as a JavaScript developer. JavaScript already has a lot of built-in higher-order functions like map, forEach, reduce, etc. But how they work internally is fun to know and learn and this is a pretty common interview question, (Trust me! It is). This is not that graph data structure that you learned for your interview and never used anywhere in the real world, HOF (higher-order functions) are the foundation for the higher-order components that you see in React!

So lets dive in!

Before dealing with HOF, In JavaScript a function is like any other value, it can be stored in a variable, passed as an argument, and so on. See the below example!

const onClick = (e) => {
    console.log(e.target.value);
}

let array = [1,2,3];
array.forEach((value) => {
    console.log(value);
})

In the above example, notice that I am declaring the function as a variable, with the const keyword. The second example forEach is a function that is receiving another function as an argument! This knowledge is key to understanding HOF!

So we will start with a function and try to optimize it until we understand HOF! See the following code.

function doubleTheArray(input: number[]) {
    const output = [];
    for (let i = 0; i < input.length; i++) {
        output.push(input[i] * 2)
    }
    return output;
}

function tripleTheArray(input: number[]) {
    const output = [];
    for (let i = 0; i < input.length; i++) {
        output.push(input[i] * 3)
    }
    return output;
}

function quadrupleTheArray(input: number[]) {
    const output = [];
    for (let i = 0; i < input.length; i++) {
        output.push(input[i] * 4)
    }
    return output;
}

So here, I have 3 functions that receive an array, do a manipulation to the array, and return a new array. The outputs of all these functions will look like this.

If you look closely, all the functions are basically having the same code except the logic that we use inside the output.push() function. So now lets optimize this code.

function manipulateArray(input: number[], callback: (value: number) => number) {
    const output = [];
    for (let i = 0; i < input.length; i++) {
        output.push(callback(input[i]))
    }
    return output;
}

const output1 = manipulateTheArray([1,2,3], (a) => a * 2)
const output2 = manipulateTheArray([1,2,3], (a) => a * 3)
const output3 = manipulateTheArray([1,2,3], (a) => a * 4)

console.log(output1, output2, output3)

If you see here in this example, The code that is varying in all three functions is replaced with a function call. Now the user can decide what to do with the array elements rather than having 3 different functions for a particular use case. In this example, I am passing a function that takes a number and manipulates it. Now If I want the array elements to be multiplied by 5 I can use the same manipulateArray function instead of writing a whole new function. This follows the DRY principle (Dont repeat yourself).

If you look closely, the .map function does exactly the same. Let me rewrite the above example.

const array = [1,2,3]

const output = array.map((a) => a * 3)

console.log(output);

Whatever we wrote previously is already available in JavaScript as a higher-order function. map, forEach, and reduce are methods that are used quite frequently and now you can use them without any confusion as you know how they work under the hood.

This is called a higher-order function. A higher-order function is a function that accepts functions as parameters and/or returns a function. We didnt cover the returning a function part which will be covered when we deal with Higher order components in React (A react component is basically a function!). Until then, Tata!

DEV Community: Balamurugan D

JavaScript Array methods Explained

ForEach

Map

Filter

Reduce

Every

Some

Demystifying JSX 🚀

Building an Overengineered React Ecosystem 🚀

React 18:

TypeScript:

Vite:

React Router Dom:

Axios:

React Query:

Redux Toolkit:

Tailwind CSS:

ESLint and Prettier:

Vitest:

Playwright:

React with Typescript, Tips and Tricks that you should know!

Typing Props

Generic Types for Hooks and Functions

Typing onClick Functions

VS Code Tooltip for React Components

PropsWithChildren

ComponentPropsWithoutRef and ComponentPropsWithRef

Conclusion

🚀 A Fun Journey to Cleaner Git History: Rebase and Interactive Rebase

🤔 The Merge tantrum

🧹 The Rebase Magic

When Not to Rebase

The Interactive Rebase Adventure

🎭 The Rebase Theater

Don't be a Frameworker, Be an Engineer

How to 🙈 Screw up as a Programmer?

Huge bill from AWS! 💸

Kaboom! The code is gone 🙀

Styling React Components

1. The style attribute

2. CSS or Sass

3. CSS in JS

4. Tailwind CSS

5. Component Library

Singleton Pattern

Overview

Implementation:

Is it an Anti Pattern?

Conclusion

Smart and Dumb React components

Advantages:

Disadvantages:

Higher order components in React

Higher-order functions in JavaScript

1. The `style` attribute