DEV Community: Jorjis Hasan

NPM vs Yarn vs PNPM: Choosing the Right Package Manager

Jorjis Hasan — Wed, 15 Jan 2025 23:42:41 +0000

When you're building JavaScript projects, managing dependencies efficiently is crucial. Enter npm, Yarn, and pnpm—three popular package managers, each with its own flair. But which one is your perfect match? Let's dive in and find out. Whether you're a coding newbie or a seasoned dev, we've got you covered! 🚀

Getting Started with Each Package Manager

Before we jump into comparisons, let’s take a quick tour of how each package manager works.

1. npm – The Classic

npm (Node Package Manager) comes bundled with Node.js and is the go-to for many developers.

Installation

Most of the time, npm is already installed when you install Node.js. Check by running:

npm -v

If not installed, grab it from Node.js official site.

Common Commands

Initialize a project:

  npm init -y

Install a package:

  npm install <package-name>

Install globally:

  npm install -g <package-name>

Run scripts:

  npm run <script-name>

2. Yarn – The Speedster

Yarn was introduced by Facebook to fix npm’s shortcomings, focusing on speed and reliability. 🏎️

Installation

Install Yarn globally:

npm install -g yarn

Check the version:

yarn -v

Common Commands

Initialize a project:

yarn init -y

Install a package:

yarn add <package-name>

Install globally:

yarn global add <package-name>

Run scripts:

yarn <script-name>

3. pnpm – The Space Saver

If disk space is a concern, pnpm (Performant npm) is your friend. It’s fast, efficient, and lightweight. 🌱

Installation

Install pnpm globally:

npm install -g pnpm

Check the version:

pnpm -v

Common Commands

Initialize a project:

  pnpm init

Install a package:

  pnpm add <package-name>

Install globally:

  pnpm add -g <package-name>

Run scripts:

  pnpm run <script-name>

The Ultimate Showdown: Pros and Cons Table

Feature	npm	Yarn	pnpm
Speed	Moderate	2x faster than npm	3x faster than Yarn
Disk Space	Standard	Standard	Minimal (symlinks and shared storage)
Ease of Use	Beginner-friendly	Intuitive and clear	Slightly advanced
Offline Mode	Limited	Great	Excellent
Workspaces	Basic	Advanced	Advanced
Monorepo Support	Basic	Built-in	Superior

So, Which One Should You Choose? 🤔

If you’re just starting out: Stick with npm. It’s beginner-friendly and works right out of the box with Node.js.
If speed and reliability matter: Go for Yarn. It’s twice as fast as npm with caching advantages.
If you’re working on large projects or monorepos: pnpm’s 3x speed boost and disk efficiency will win you over.

Pro Tip 💡

Want the best of all worlds? Try them out in different projects. Many developers switch between them depending on project requirements.

Conclusion

Choosing the right package manager isn’t just about speed or disk space; it’s about what feels right for your workflow. npm is dependable, Yarn is fast, and pnpm is efficient. The best choice is the one that makes your coding life easier. 🧑‍💻✨

Happy coding! 👩‍💻👨‍💻

🔥 10 javaScript questions before you face rejection ❌

Jorjis Hasan — Fri, 03 Jan 2025 20:49:03 +0000

Here are 10 perplexing questions, each accompanied by a code snippet. To enhance your learning experience, answers are concealed within a {% details 💣 Reveal %} tag—click 'Reveal' to uncover them. Let's dive in! 🚀

Each correct answer will get 10 points. What's your score? 👀
Comment Down.

1. What will be the output of the following code?

console.log(0.1 + 0.2 === 0.3);

💣 Reveal

Reveal

false

This occurs due to floating-point precision errors in JavaScript. The expression 0.1 + 0.2 results in 0.30000000000000004, which is not strictly equal to 0.3. Source

2. What does the following code output?

(function() {
  var a = b = 5;
})();
console.log(b);

💣 Reveal

Reveal

In this code, b is assigned to the global scope because var is only applied to a. Therefore, b becomes a global variable, accessible outside the function. Source

3. What will be the output of this code?

console.log(typeof null);

💣 Reveal

Reveal

"object"

This is a well-known bug in JavaScript. The typeof operator returns "object" for null, even though null is not actually an object. Source

4. What does the following code print?

console.log([] + []);
console.log([] + {});
console.log({} + []);
console.log({} + {});

💣 Reveal

Reveal

""
"[object Object]"
0
"[object Object][object Object]"

These results are due to the type coercion and the way JavaScript handles the addition operator with different types. Source

5. What will be the output of the following code?

console.log(1 < 2 < 3);
console.log(3 > 2 > 1);

💣 Reveal

Reveal

true
false

The first expression evaluates to true because 1 < 2 is true, and true < 3 is also true. The second expression evaluates to false because 3 > 2 is true, and true > 1 is false. Source

6. What does the following code output?

console.log(typeof NaN);

💣 Reveal

Reveal

"number"

In JavaScript, NaN (Not-a-Number) is considered a number type. Source

7. What will be the output of this code?

let a = [1, 2, 3];
let b = [1, 2, 3];
console.log(a == b);
console.log(a === b);

💣 Reveal

Reveal

false
false

In JavaScript, arrays are compared by reference, not by value. Since a and b are two different objects in memory, both comparisons return false. Source

8. What does the following code print?

console.log('5' - 3);
console.log('5' + 3);

💣 Reveal

Reveal

2
"53"

The subtraction operator converts the string '5' to a number, resulting in 2. The addition operator concatenates the string '5' and the number 3, resulting in '53'. Source

9. What will be the output of the following code?

console.log(0 == false);
console.log(0 === false);

💣 Reveal

Reveal

true
false

The == operator performs type coercion, so 0 is considered equal to false. The === operator checks for both value and type, so 0 and false are not strictly equal. Source

10. What does the following code output?

(function() {
  console.log(1);
  setTimeout(function(){ console.log(2) }, 1000);
  setTimeout(function(){ console.log(3) }, 0);
  console.log(4);
})();

💣 Reveal

Reveal

The code logs 1 and 4 immediately. The setTimeout with 0 delay is placed in the event queue and executed after the current stack is cleared, so 3 is logged next. Finally, the setTimeout with 1000 ms delay logs 2. Source

These questions delve into JavaScript's quirks and common pitfalls. Understanding them will enhance your problem-solving skills and prepare you for technical interviews. Happy coding! 🎉

For a more in-depth exploration of JavaScript interview questions, check out this comprehensive resource.

For a visual walkthrough of similar JavaScript interview questions, you might find this video helpful:

10 JavaScript Interview Questions You HAVE TO KNOW

Unit & Integration Testing

Jorjis Hasan — Thu, 02 Jan 2025 19:15:15 +0000

🔥 Fireup Unit and Integration Testing with Jest and Axios

Testing is a vital part of ensuring that your code works as expected and remains reliable over time. This guide explains Unit Testing and Integration Testing with examples using Jest and Axios. By the end of this, you’ll be equipped to write your own tests confidently! 🚀

🗂️ Table of Contents

Introduction to Testing
Unit Testing
Integration Testing with Axios
Conclusion

📚 Introduction to Testing

Testing involves verifying that your code behaves as expected under various conditions. With Jest, a popular testing library, you can write two key types of tests:

Unit Tests: Test individual functions or components in isolation.
Integration Tests: Verify how different parts of your application work together.

These tests help catch bugs early, reduce regression issues, and maintain high code quality. Let’s start by exploring Unit Testing! 🧪

🧪 Unit Testing

Unit Testing focuses on testing individual functions or components in isolation. It ensures each small unit of your code works independently as intended.

Example: Testing a Sum Function

Here’s a simple function that sums two numbers:

// src/sum.js
export const sum = (a, b) => a + b;

Writing the Unit Test

Create a test file src/__tests__/sum.test.js and write the following:

// src/__tests__/sum.test.js
import { sum } from '../sum';

describe('sum', () => {
  it('should add two numbers correctly', () => {
    expect(sum(1, 2)).toBe(3);
    expect(sum(-1, 1)).toBe(0);
  });
});

Running the Unit Test

Run the test with the following command:

npx jest src/__tests__/sum.test.js

If everything works as expected, you’ll see a ✅ confirming that the test passed.

🔗 Integration Testing with Axios

Integration Testing ensures that different parts of your application work well together. Let’s test a function that fetches user data from an API using Axios.

Example: Fetching User Data

Suppose we have a function that retrieves user data from an API:

// src/apiService.js
import axios from 'axios';

export const fetchUserData = async (userId) => {
  const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`);
  return response.data;
};

Writing the Integration Test

To test this function, create a file src/__tests__/apiService.test.js. We’ll mock Axios to prevent real API calls.

// src/__tests__/apiService.test.js
import axios from 'axios';
import { fetchUserData } from '../apiService';

jest.mock('axios'); // Mocking Axios globally for tests

describe('fetchUserData', () => {
  it('should fetch user data successfully', async () => {
    const mockUserData = { id: 1, name: 'Alice' };
    axios.get.mockResolvedValue({ data: mockUserData });

    const userData = await fetchUserData(1);

    expect(userData).toEqual(mockUserData);
    expect(axios.get).toHaveBeenCalledWith('https://jsonplaceholder.typicode.com/users/1');
  });

  it('should throw an error if fetching fails', async () => {
    axios.get.mockRejectedValue(new Error('Fetch failed'));

    await expect(fetchUserData(1)).rejects.toThrow('Fetch failed');
  });
});

Key Points:

jest.mock('axios'): Mocks the entire Axios library.
mockResolvedValue: Simulates a successful API response.
mockRejectedValue: Simulates an API failure.

Running the Integration Test

Run the test with the following command:

npx jest src/__tests__/apiService.test.js

If successful, Jest will confirm the tests for both success and failure scenarios have passed. ✅

🎉 Conclusion

Unit and Integration Testing are essential tools for building reliable and maintainable applications. By using Jest and Axios, you can:

Validate individual functions with Unit Tests.
Verify interactions between modules with Integration Tests.

Unit and Integration Testing are powerful methods to ensure your code works well individually and collectively. Start adding tests to your codebase today and enjoy the peace of mind that comes with knowing your application is well-tested. Happy coding and testing! 🧑‍💻✨

🧪 Setup Jest with (Webpack, Vite)

Jorjis Hasan — Tue, 01 Oct 2024 11:21:57 +0000

"You should write tests before you write the code." ⏤ creator of TDD

Why Jest?

Jest is a powerful one-stop testing library that can be paired with React, React-Native, Angular, Vue, and Svelte. Almost all frameworks are powered by JavaScript. Its simplicity and fast learning curve make it a top choice for developers. Within an hour, you can start writing tests using their well docs resources. Companies like Meta, Amazon, and Microsoft rely on Jest for its robust features like mocking, snapshot testing, and code coverage.

Once you learn to test, you feel software better. How things work and how it is supposed to be. This keeps you confident while building software, no matter how big the software is.

Enough talking. Let's dive into the steps to set up Jest in the popular bundlers Webpack and Vite.

⛳️ Jest with Webpack

I'll use Webpacks popular template create-react-app for more straightforward setup. Jest comes out of the box by default in Webpack. Quickly start the project, and you'll be all set to write tests. To quick Start:

npx create-react-app my-app
cd my-app
npm start

By running the command, you'll get a boilerplate scaffold file structure and a live preview. Head into the project, you'll find src/ directory. Inside the src/ directory, you can write your tests. It's best practice to create a separate folder, __tests__/ and keep your test files inside the subdirectory src/__tests__/...*testfiles.

Any file with this convention filename.[test/specs].[js/tsx/jsx] will be treated as a test file.

Let's try two types of testing: basic function and component testing. We'll create two files inside the src/__tests__/... directory.

sum.test.js

import sum from "../sum";

test("Testing sum function", () => {
  expect(sum(2, 3)).toBe(5);
});

Header.test.js

import { render, screen } from "@testing-library/react";
import Header from "../components/Header";

test("Check Header load with specific text: 'Hey, Good Developers 😜'", () => {
  // render
  render(<Header />);

  // assertion
  const targetElement = screen.getByText("Hey, Good Developers 😜");

  // expect
  expect(targetElement).toBeInTheDocument();
});

To run tests:

npm test

⛳️ Jest with Vite

Vite is likely ~10x faster than Webpack in a production build and running development server. But Vite uses its own testing library called Vitest. Which is also good. So, we need to configure Jest separately.

Vite excels at speed, while Jest maintains consistency. If Vite and Jest clock together, they would have a superpower. Let's step into power:

Step 1: Install Vite with React

Install Vite via npm:

npm create vite@latest

After giving the project-name, choose React > JavaScript to initiate a project. Go inside the directory :

cd project-name

Install dependencies:

npm install

Now start the server:

npm run dev

It will be starting fresh like this 👇

Step 2: Install Jest

Install jest as a dev dependency:

npm install --save-dev jest

In package.json add "test": "jest" inside scripts,

  "scripts": {
    "test": "jest",
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },

Since vite by default uses test library called vitest. To use jest, we need Babel for transpilation. To use Babel, install required dependencies:

npm install --save-dev babel-jest @babel/core @babel/preset-env

Configure Babel to target your current version of Node by creating a babel.config.cjs file in the root of your project:

// project-name/babel.config.cjs
module.exports = {
  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};

You can use type definitions which ships with Jest and will update each time you update Jest. Install the @jest/globals package:

npm install --save-dev @jest/globals

And import the APIs from it:

// src/__tests__/sum.test.js

import { describe, expect, test } from "@jest/globals";
import sum from "../sum";

describe("sum module", () => {
  test("adds 1 + 2 to equal 3", () => {
    expect(sum(1, 2)).toBe(3);
  });
});

Execute the test command:

npm test

🥳 You're good to go with Jest for basic testing. Now, you can test basic functions. But if you want to test components(headers, body, footer), we need a browser-like environment because HTML is generally rendered on browsers. So we must configure jest by going through step 3 👇.

Step 3: Config Jest

Initiate jest :

npx jest --init

Choose these options carefully: jsdom(browser-like) > babel. After executing these commands, Jest will configure by creating a file jest.config.mjs. Just like this 👇

For DOM manipulation, we need to have a browserlike environment. For that, it needs another library called jsdom. To get started with the JSDOM test environment:

npm install --save-dev jest-environment-jsdom

To get started with React Testing Library, you'll need to install it together with its peerDependency @testing-library/dom:

npm install --save-dev @testing-library/react @testing-library/dom

After installing the React testing library, To support the .jsx syntax @babel/preset-react, this package needs to install:

npm install --save-dev @babel/preset-react

Include this plugin in babel.config.cjs, and update the babel config file with this:

// project-name/babel.config.cjs
module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    ["@babel/preset-react", { runtime: "automatic" }],
  ],
};

To get helpful matcher like [toBeInTheDocument,toBeInvalid,toBeRequired,
toBeValid,toBeVisible ], another dependency is needed:

npm install "@testing-library/jest-dom"

And import the APIs from it:

// src/__tests__/Header.test.js

import { expect, test } from "@jest/globals";
import Header from "../component/Header";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";

test("Check Header load with specific text 'Hey, Good Developers 😜'", () => {
  // render
  render(<Header />);

  // assertion
  const targetElement = screen.getByText("Hey, Good Developers 😜");

  // expect
  expect(targetElement).toBeInTheDocument();
});

Wala <🎉/> All set up has ✅Done. Now you've achieved a superpower. `Jest and Vite tune in together seamlessly, powering the application development process.

In case you get any error on following whole process, just comment down 💬. I'll try to resolve it.

PS: If anyone is new to testing, I'll hold your hand from here until the end of the series. I dedicated the whole series on 'testing'.

Context API: First Look 👀

Jorjis Hasan — Wed, 14 Aug 2024 14:47:08 +0000

React's built-in Context API came to solve props drilling. Before using ContextAPI we had to pass data through multiple layers to reach the target point. It eliminates unnecessary steps for data flow.

Imagine you have a central place to store data. From anywhere in your app, you can read/write those data. And this is ContextAPI under the hood. Before walking into your imagination, let's eyeball some practical use cases using context API.

Theming:
- Applying consistent styling (like dark or light themes) across different components.
User Authentication:
- Managing and accessing authentication status and user data across various components.
Multi-language Support:
- Implementing internationalization to allow components to access and change the app's language.

You are 3 steps behind to say hi 👋 to contextAPI:

(step 1) Create Context
(step 2) Read/Consume Context
(step 3) Write/Modify Context

⛳️ Step 1: Create Context:

// UserContext.js

import { createContext } from "react";

const UserContext = createContext({
  isLoggedIn: false,
});

export default UserContext;

Following the single responsibility principle , we make a separate UserContext.js to create a new context. Then import the createContext function.

We put an object with isLoggedIn value inside the createContext function and wrap it with a variable UserContext. Don't forget to export 😜.

⛳️ Step 2: Read/Consume Context:

Contact of Code: In body component, Show Login Status: to true if user is logged in else show false.

// Body.js
import { useContext } from "react";
import UserContext from "../context/UserContext";

const Body = () => {
  const { isLoggedIn } = useContext(UserContext);
  return <p>Login Status: {isLoggedIn ? "true" : "false"}</p>;
};

export default Body;

We import a hook useContext, to consume/read data from the context. After destructuring isLoggedIn value, do conditional rendering.

⛳️ Step 3: Write/Modify Context:

Contact of Code: The header will have a login/logout button. By clicking the button, the isLoggedIn value will toggle from true to false and vice-versa, and the change must be reflected in the body component.

// Header.js
import { useContext } from "react";
import UserContext from "../context/UserContext";

export const Header = ({ setIsLoggedIn }) => {
  const { isLoggedIn } = useContext(UserContext);
  return (
    <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
      {isLoggedIn ? "Logout" : "Login"}
    </button>
  );
};

export default Header;

// App.js
import "./App.css";
import Header from "./components/Header";
import Body from "./components/Body";
import { useContext, useState } from "react";
import UserContext from "./context/UserContext";

const App = () => {
  const { isLoggedIn: defaultStatus } = useContext(UserContext);
  const [isLoggedIn, setIsLoggedIn] = useState(defaultStatus);

  return (
    <UserContext.Provider value={{ isLoggedIn }}>
      <Header setIsLoggedIn={setIsLoggedIn} />
      <Body />
    </UserContext.Provider>
  );
};

export default App;

Entire BreakDown 👇

Header.js

Imports context and defines the Header component, accepting setIsLoggedIn as a prop.
Uses useContext(UserContext) to access isLoggedIn and toggles it via a button click.
Renders the button with dynamic text ("Login" or "Logout") and exports the component.

App.js

Retrieve Context Value: To avoid name conflict, rename the isLoggedIn variable to defaultLoginStatus while destructure.
Initialize State: Create a new State variable with the renamed variable(defaultLoginStatus) from UserContext.
Provide Context: Wrap the Header & Footer components with Providing new value using Provider.
Pass State Setter: The Header component receives the setIsLoggedIn function as a prop. This allows Header to update the isLoggedIn state, which will then be reflected in the UserContext.

Let's Speed-Up the Article.

TL;DR:
-> Create context using createContext() API.
-> Read the Context using useContext() hooks.
-> Provide the Context to Header and Body by Provider, modify context by a button from Header.

Props Drilling 🛠️

Jorjis Hasan — Mon, 08 Jul 2024 22:43:42 +0000

What ?

Passing data from a parent component down through multiple levels of nested child components via props is called props drilling. This can make the code hard to manage and understand as the application grows. It's not a topic but a problem. How it's a problem?

In react, Data flows from top to bottom component. Like this...

Parent -> Children -> Grand Children

Now I will show you two cases. Each case represents a different set of data-flow.

⛳️ Case 1

Description: A hand-drawn illustration to help visualize data-flow.

Code
👉🏽 TopLevelComponent.jsx

// TopLevelComponent.jsx
import React from 'react';
import IntermediateComponent1 from './IntermediateComponent1';

const TopLevelComponent = () => {
  const user = { name: 'Jorjis Hasan', age: 22 };

  return (
    <div>
      <h1>Top-Level Component</h1>
      <IntermediateComponent1 user={user} />
    </div>
  );
};

export default TopLevelComponent;

// IntermediateComponent1.jsx
import React from 'react';
import IntermediateComponent2 from './IntermediateComponent2';

const IntermediateComponent1 = ({ user }) => {
  return (
    <div>
      <h2>Intermediate Component 1</h2>
      <IntermediateComponent2 user={user} />
    </div>
  );
};

export default IntermediateComponent1;

// IntermediateComponent2.jsx
import IntermediateComponent3 from './IntermediateComponent3';

const IntermediateComponent2 = ({ user }) => {
  return (
    <div>
      <h3>Intermediate Component 2</h3>
      <IntermediateComponent3 user={user} />
    </div>
  );
};

export default IntermediateComponent2;

// IntermediateComponent3.jsx
import EndComponent from './EndComponent';

const IntermediateComponent3 = ({ user }) => {
  return (
    <div>
      <h4>Intermediate Component 3</h4>
      <EndComponent user={user} />
    </div>
  );
};

export default IntermediateComponent3;

// EndComponent.jsx
const EndComponent = ({ user }) => {
  return (
    <div>
      <h5>End Component</h5>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
    </div>
  );
};

export default EndComponent;

See how we had to pass data down through layers. For the sake of EndComponents needs, we had to pass user data through 3 extra components(IntermediateComponent1, IntermediateComponent3, IntermediateComponent3). This is absolutely not clean code.

⛳️ Case 2

Description: A hand-drawn illustration to help visualize data-flow.

Code:

Sorry! Sorry! Sorry!
I can't code it by just passing props, even though I do. That would not make sense.

Well, let's hand down the best practices. We have 2 consistent solutions that can be used against any complex data flow.

Built-in useContext() API in React
State Management Library (redux, zustand)

Props drilling 📸 useContext()

Jorjis Hasan — Mon, 08 Jul 2024 22:31:11 +0000

Props Drilling

Passing data from a parent component down through multiple levels of nested child components via props is called props drilling. This can make the code hard to manage and understand as the application grows. It's not a topic but a problem. How it's a problem?

In react, Data flows from top to bottom component. Like this...

Parent -> Children -> Grand Children

Now I will show you two cases. Each case represents a different set of data flow.

Case 1 👇

Description: A hand-drawn illustration to help visualize props drilling:

Code
👉🏽 TopLevelComponent.jsx

// TopLevelComponent.jsx
import React from 'react';
import IntermediateComponent1 from './IntermediateComponent1';

const TopLevelComponent = () => {
  const user = { name: 'Jorjis Hasan', age: 22 };

  return (
    <div>
      <h1>Top-Level Component</h1>
      <IntermediateComponent1 user={user} />
    </div>
  );
};

export default TopLevelComponent;

// IntermediateComponent1.jsx
import React from 'react';
import IntermediateComponent2 from './IntermediateComponent2';

const IntermediateComponent1 = ({ user }) => {
  return (
    <div>
      <h2>Intermediate Component 1</h2>
      <IntermediateComponent2 user={user} />
    </div>
  );
};

export default IntermediateComponent1;

// IntermediateComponent2.jsx
import IntermediateComponent3 from './IntermediateComponent3';

const IntermediateComponent2 = ({ user }) => {
  return (
    <div>
      <h3>Intermediate Component 2</h3>
      <IntermediateComponent3 user={user} />
    </div>
  );
};

export default IntermediateComponent2;

// IntermediateComponent3.jsx
import EndComponent from './EndComponent';

const IntermediateComponent3 = ({ user }) => {
  return (
    <div>
      <h4>Intermediate Component 3</h4>
      <EndComponent user={user} />
    </div>
  );
};

export default IntermediateComponent3;

// EndComponent.jsx
const EndComponent = ({ user }) => {
  return (
    <div>
      <h5>End Component</h5>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
    </div>
  );
};

export default EndComponent;

Case 2 🔽

Description: A hand-drawn illustration to help visualize Case 2 data flow.

Code:

Sorry! Sorry! Sorry!
I can't code it up by just passing props. Even though I code, that would not make sense.

Well, let's hand down the best practices. We have 2 consistent solutions that can be used against any complex data flow.

React built-in useContext Api
State Management Library

Lifting State 🏋🏻‍♀️

Jorjis Hasan — Tue, 04 Jun 2024 14:41:41 +0000

WHY ?

Think of an online grocery store containing 100,000+ products. Each product has a common feature, which is the toggle feature. They will show certain things on click. To function that feature in React, each product must have a state variable. Now, the popup question is, if 100,000 products have 100,000 state variables, would our app be efficient? And what about MILLION?

The answer is BIG NO ❌.

✅ What if there is just one state variable instead of 100,000 ? That state would be at the top of the parent component. When any product is clicked, only that product will get a share of the state variable and enable the toggle feature.

Doesn't it sound like solution? Yes, the Lifting state does that solution. Well, now you know the lifting state in theory. Let's give it a technical shot!

Before diving deep into State lifting, give it a well-read (controlled & uncontrolled components).

These 2 things are the same :

Lifting State
State Sharing

Lifting up state is a technique used in React to share states between multiple components. Instead of each component having its own local state, the state is lifted up to their closest ancestor. This common ancestor then passes the state down to the components via props.

Let it make easy steps for you to understand this example illustration:

Accordion is the parent component here if you see the hierarchy over the picture.
We create a state variable activeIndex with null value at the parent(Accordion) component. Why null? Because by default, no accordion is clicked.
We'll give children(AccordianFrame) access to modify the activeIndex state variable by sharing the setActiveIndex() function via props.
Now, when any accordion is clicked, it triggers setActiveIndex() with its own index value. The activeIndex variable will update accordingly.
When it matches the index === activeIndex, ' the accordion that was clicked will receive theisActive = true` value through props and be expanded.

Dev View: Live ✨

CODE: GITHUB

File-structures followed here ⬇️

├── src/ │ ├── AccordionFrame.jsx │ ├── App.jsx │ ├── constant.jsx │ ├── index.css ├── tailwind.config.js └── vite.config.js

Controlled & Uncontrolled Component

Jorjis Hasan — Mon, 03 Jun 2024 17:55:59 +0000

Uncontrolled 🔽

In the example, each accordion has its own state(isOpen). By default, it is set to false. On click, it flips the value of the state variable(isOpen) to true or false. Based on the isOpen value, it expands and collapses.

Since it controls its own state and doesn't rely on its parents, the children are uncontrolled components.

👉🏽 App.js

const AccordionSection = ({ title, children }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>{title}</button>
      <span>{isOpen && children}</span>
    </div>
  );
};

const UncontrolledAccordion = () => {
  return (
    <div>
      <AccordionSection title="Button 1">Content 1</AccordionSection>
      <AccordionSection title="Button 2">Content 2</AccordionSection>
      <AccordionSection title="Button 3">Content 3</AccordionSection>
    </div>
  );
};

export default UncontrolledAccordion;

Controlled ⬇️

Unlike an uncontrolled component, if the parent controls the child's state heavily or the child relies on his parent, that child is a Controlled component.

In the example below, we removed the accordion's ability to control itself and gave that power to the parent. Let's inspect the code.

Render the accordions without functionality.
Create state variable activeIndex with value null
Whenever any accordion gets clicked, the onClick function is invoked, and activeIndex is set to the current index.
By then, re-render happens. And this props isActive={activeIndex === index} validate and send True in props.
The accordion that gets clicked will get a True boolean value and will be expanded.

Even in the preview of our code, we can see that the parent's state changes every time a child clicks. The parent is controlling the child via props.

👉🏽 App.js

const AccordionSection = ({ title, children, isActive, onClick }) => {
  return (
    <div>
      <button onClick={onClick}>{title}</button>
      {isActive && <span>{children}</span>}
    </div>
  );
};

const ControlledAccordion = () => {
  const [activeIndex, setActiveIndex] = useState(null);

  return (
    <>
      {["Content 1", "Content 2", "Content 3"].map((content, index) => (
        <AccordionSection
          key={index}
          title={`Button ${index + 1}`}
          isActive={activeIndex === index}
          onClick={() => setActiveIndex(activeIndex === index ? null : index)}
        >
          {content}
        </AccordionSection>
      ))}
    </>
  );
};

export default ControlledAccordion;

NB: In case anyone is wondering how I got this developer view, it's actually a Chrome extension called React Developer Tools, available in the extension store.

InfinityScroll - Just like TikTok!

Jorjis Hasan — Fri, 24 May 2024 22:17:59 +0000

📺 preview.jpg
Watch it ✨ Live ✨

📝 infinityscroll.js
Don't dwell on the pain. Just take a quick look. After reading the article, everything will become clear to you. 📝 SOURCE CODE

import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

function App() {
  const [numArr, setNumArr] = useState(Array.from({ length: 20 }, (_, i) => i));

  const handleScroll = () => {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
      setNumArr((prevNums) => [
        ...prevNums,
        ...Array.from({ length: 20 }, (_, i) => i + prevNums.length),
      ]);
    }
  };

  // Listen for scroll events
  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <div className="font-serif text-3xl text-center">
      {numArr.map((num, index) => (
        <div
          key={index}
          className="m-2 p-5 bg-white shadow-md rounded cursor-pointer"
        >
          {num}
        </div>
      ))}
    </div>
  );
}


const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

I promise! Following my steps, you can natively implement Infinity Scrolling. This means you don't have to worry about installing extra packages or adding unnecessary weight to your app.

Initial Render
Event Listening
Event Handling

Don't be afraid of these jargon words 😄. I'm holding your hands 💪. Once you reach the end of the article, it'll make you proud.

STEP 1: ⏤ Initial Render 📃
Initially, let's load/fill the page with 20 elements.

CODE:

function App() {
  const [numArr, setNumArr] = useState(Array.from({ length: 20 }, (_, i) => i));

  return (
    <div className="font-serif text-3xl text-center">
      {numArr.map((num, index) => (
        <div
          key={index}
          className="m-2 p-5 bg-white shadow-md rounded cursor-pointer"
        >
          {num}
        </div>
      ))}
    </div>
  );

Explain: Create a numArr state variable on top of the App component with values 0 through 20. Over the return statement, render items of numArr as elements. STEP 1 is done.

STEP 2: ⏤ Event Listening 👂
Browsers offer us bunch of events: Mouse(click, mousemove, mouseover), Keybaord Event(keydown, keypress, keyup), and Window Event(scroll, resize, load).

Since we are implementing a feature based on scrolling, we need to keep track of scroll activity. To get notified, we'll set a watcher inside the App() component that continuously checks whether a scroll happens.

CODE:

function App() {
// Listen for scroll events
   useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);
}

Explain: We set the watcher or event-listener, that event listener window.addEventListener("scroll", handleScroll) takes 2 arguments: the event name scroll and a callback-function handleScroll that defines what to do when the event is triggered. Step 2 is done. The return statement does cleanup. You can skip it for now with this setup.

STEP-3: ⏤ Event Handling 💪
Assuming that scrolling happens, the contract of the handleScroll function would be to load more data when the user reaches the end of the page.

CODE:

  //This function will invoked when event triggered
  const handleScroll = () => {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
      setNumArr((prevNums) => [
        ...prevNums,
        ...Array.from({ length: 20 }, (_, i) => i + prevNums.length),
      ]);
    }
  };

Explain: The if statement verifies that the user has reached the end of the page. The code inside the if block accumulates 15 new data to the numArr variable. Since numArr is a state variable, it will re-render the state after every update. It's react's native state behavior.

Yay 😀! You have done the last step. You have achieved more optimized infinity scrolling.

NB: I used numbers as placeholders. In a real scenario, you'll fetch data across pages via API.

Higher Order Component

Jorjis Hasan — Fri, 10 May 2024 14:02:59 +0000

Higher Order component is a function that takes a component and returns a component. At the end of the day it's just a normal function.

Why do we use it ?
When do we use it ?
What component does it take ?
What component does it returns ?

Let me tell you the theory behind it. So, a higher-order component takes a component as input, enhances that component, adds some extra features to the component, and returns it. Still don't make any sense? Okay, I'm holding your hand and walking you through by example.

Example: From my movie list, I want to add a New 🌱 label to specific movie cards. Does it sound exciting?
Here is the live link and source code.

Visual Picture:

Step 1:

First, we need to make a basic utility movie card. After that we'll add features to that component.

//MovieCard.js

import { mediaUrl } from "./constants";

const MovieCard = ({ info }) => {
  const { id, backdrop_path, original_title } = info;

  return (
    <div className="rounded-lg overflow-hidden drop-shadow-md max-w-[400px] border-[1px] border-gray-400">
      <img key={id} src={mediaUrl + backdrop_path} />
      <div className="bg-w font-sans py-4 text-center font-semibold font-xl">
        {original_title}
      </div>
    </div>
  );
};

export default MovieCard;

This code block will render the core MovieCard with essential movie data like movie poster and title.

Step 2:
Now, without touching/modifying the core MovieCard code, let's create a version of MovieCard by adding the New label.

// WithNewLabel (higher-order-component)
export const WithNewLabel = (MovieCard) => {
  return (props) => {
    return (
      <div>
        <label className="absolute z-10 bg-blue-600 text-white rounded-lg py-2 px-4">
          New 🌱
        </label>
        <MovieCard {...props} />
      </div>
    );
  };
};

The new enhanced version of the movie card component will look like this.

For the sake of a higher-order component, it's easy to add/remove variable features like 'popular,' 'new,' or 'trending', anything that fits our needs.

Rendering On Condition:

We are done making components MovieCard and WithNewLabel as higher-order components. It's time to see the use cases in action.

import React from "react";
import ReactDOM from "react-dom/client";
import MovieCard, { WithNewLabel } from "./MovieCard";

const movieList = [
  {
    backdrop_path: "/6Xfj8wD7GoEysgcFayRKd6QLqai.jpg",
    id: 843527,
    original_title: "The Idea of You",
    release_year: 2024,
    release_month: 5,
  },
  {
    backdrop_path: "/nb3xI8XI3w4pMVZ38VijbsyBqP4.jpg",
    id: 872585,
    original_title: "Oppenheimer",
    release_year: 2023,
    release_month: 7,
  },
];

const isNewMovie = ({ release_year, release_month }) => {
  return release_year === 2024 && release_month > 2 ? true : false;
};

const Body = () => {
  <div className="flex flex-wrap flex-row gap-[16px] justify-evenly">
    {movieList.map((movie) => {
      const NewLabel = WithNewLabel(MovieCard);

      if (isNewMovie(movie)) {
        return <NewLabel key={movie.id} info={movie} />;
      } else {
        return <MovieCard key={movie.id} info={movie} />;
      }
    })}
  </div>;
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Body />);

The code written above will visually look like this:

💅 Button ~in 4 framework

Jorjis Hasan — Wed, 14 Feb 2024 13:19:48 +0000

Title: A simple Button is translating in almost all CSS frameworks.

Well, it's more likely saying I love you 🐶 to your love in Mandarin, Spanish, French or any different language. But it holds the same meanings. Now it gets funny. Let's jump.

Likewise, now I will style a button in the top 4 popular frameworks:

Tailwind
Bootstrap
MaterialUI
Styled-Component

Once you go with me, you'll get excellent hands-on on all the frameworks.

Pseudo Code:

color → #1f1f1f,
border → 1px solid #1f1f1f,
padding → top & bottom = 20px + right & left = 48px

While hovering 👇

color → #fff
background → #9747ff
transition → 300ms

In Tailwind

//App.js
const InTailwind = () => {
  return (
    <button className="text-[#1f1f1f] px-[48px] py-[20px] text-[32px] cursor-pointer border rounded-[7px] transition-colors duration-300 hover:bg-[#9747ff] hover:text-[#fff]">
      Button
    </button>
  );
};

Configure your tailwind project considering your bundler. Mine was parcel. And if you're using VS-Code as a code editor, then make sure to install an extension called Tailwind CSS IntelliSense.

In Bootstrap

/* custom.css */
.btn-custom {
  font-family: inherit;
  background-color: #fff;
  border: 1px solid #1f1f1f;
  border-radius: 7px;
  font-size: 32px;
  cursor: pointer;
  transition-duration: 0.3s;
  padding: 20px 48px;
}

.btn-custom:hover {
  background-color: #9747ff;
  color: #fff;
  border-color: #9747ff;
}

//App.js

import "bootstrap/dist/css/bootstrap.min.css";

const InBootstrap = () => {
  return <button className="btn btn-custom">Button</button>;
};

Bootstrap doesn't have built-in utility classes for our work done as required. To achieve the same properties(color, margin, padding, hover) as the description says, we used custom CSS.

In MaterialUI

//App.js
import { Button } from "@mui/material";

const InMaterialUi = () => {
  return (
    <Button
      sx={{
        fontFamily: "inherit",
        backgroundColor: "#fff",
        color: "#1f1f1f",
        border: "1px solid #1f1f1f",
        borderRadius: "7px",
        fontSize: "32px",
        cursor: "pointer",
        transitionDuration: "0.3s",
        padding: "20px 48px",
        "&:hover": {
          backgroundColor: "#9747ff",
          color: "#fff",
          borderColor: "#9747ff",
        },
      }}
    >
      Button
    </Button>
  );
};

installation. We have a few options(sx, theme, styled function) to customize CSS. Here, we used sx={} props which is available on every materialUI component. It's kinda like the normal style prop on HTML, but under the hood it gets converted into normal CSS classes and comes with some additional features.
Spotify, Netflix, Amazon, and Unity are all faang companies that use MaterialUI as their primary styling framework.

In Styled-Component

//App.js
import styled from "styled-components";

const StyledButton = styled.button`
  font-family: inherit;
  background-color: #fff;
  border: 1px solid #1f1f1f;
  border-radius: 7px;
  font-size: 32px;
  cursor: pointer;
  transition-duration: 0.3s;
  padding: 20px 48px;
  &:hover {
    background-color: #9747ff;
    color: #fff;
    border-color: #9747ff;
  }
`;

const InStyledComponent = () => {
  return <StyledButton>Button</StyledButton>;
};

installation. This framework is built for performance and simplicity. Most mid-tier companies like godaddy use styled-components for styling.

Every framework has its way of doing things. Each is used for especial purposes. I use Tailwind on a regular basis. It helps me style the entire app without leaving the jsx file.

Source Code →