DEV Community: Animesh Srivastava

Centralized API Logic in Next.js with an External Backend

Animesh Srivastava — Sat, 09 Nov 2024 08:21:27 +0000

When using an external backend with a Next.js application, maintaining centralized logic for API calls is crucial. This approach improves code maintainability, reusability, and consistency across both client and server components.

In this guide, we’ll create a centralized API service and show how to use it across different components in three simple steps. This blog will also help you gain a deeper understanding of data-fetching and caching principles tailored to various component types in Next.js.

Why Centralize API Logic?

Maintainability: Centralized functions handle all API calls, making updates or bug fixes easy in a single location.
Reusability: Write once, use anywhere—whether in server-side, static, or client-side components.
Consistency: Centralized error handling ensures predictable responses across your app.

Step 1: Create the API Service Layer

Define API functions in a dedicated service file, services/userService.js, to fetch data from your backend:

// services/userService.js
export async function fetchUserData(userId) {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/users/${userId}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch user data: ${response.statusText}`);
  }
  return response.json();
}

Step 2: Use the Service in Server-Side Components

For server-rendered pages, call the service function directly within getServerSideProps or getStaticProps. This allows server-side data fetching with zero client-side JavaScript overhead.

// pages/user/[id].js
import { fetchUserData } from '@/services/userService';

export async function getServerSideProps({ params }) {
  const { id } = params;
  try {
    const user = await fetchUserData(id);
    return { props: { user } };
  } catch (error) {
    console.error(error);
    return { notFound: true };
  }
}

export default function UserPage({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

Step 3: Use the Service in Client-Side Components

For dynamic or interactive client components, wrap the service function in a custom hook that handles loading and error states.

// hooks/useUser.js
import { useState, useEffect } from 'react';
import { fetchUserData } from '@/services/userService';

export function useUser(userId) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!userId) return;

    const getUserData = async () => {
      setLoading(true);
      try {
        const data = await fetchUserData(userId);
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    getUserData();
  }, [userId]);

  return { user, loading, error };
}

Then, use this custom hook in your client-side component:

// components/UserProfile.js
'use client';

import { useUser } from '@/hooks/useUser';

export default function UserProfile({ userId }) {
  const { user, loading, error } = useUser(userId);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error loading user data</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

Summary

Centralizing API calls in Next.js with an external backend simplifies data-fetching logic across server and client components. By organizing API logic in a service layer, we streamline updates, improve reusability, and ensure consistent error handling across your application. This setup keeps your code clean and maintainable, whether you’re fetching data on the server or client side.

React Memoization Cheat Sheet

Animesh Srivastava — Mon, 04 Nov 2024 09:10:41 +0000

React provides three main tools for memoization to optimize component performance by minimizing unnecessary re-renders and re-computations:

1. `useMemo` – Memoize Computed Values

Purpose: Caches the result of a computation, only re-calculating if dependencies change.
Usage: Use for expensive calculations or derived data that should only update with specific dependencies.
```
const memoizedValue = useMemo(() => complexCalculation(), [dependencies]);
```
Best Practices:
- Include all dependencies used within the function in the dependency array.
- Avoid creating new references (arrays, objects) or inline functions within useMemo.
- Note: Don’t use useMemo for functions; it caches values, not function references.

2. `useCallback` – Memoize Function References

Purpose: Caches a function reference, preventing re-creation on each render.
Usage: Use for stable function references, especially for callbacks (e.g., event handlers) passed to child components.
```
const memoizedFunction = useCallback(() => { /* logic */ }, [dependencies]);
```
Best Practices:
- Include all dependencies used within the function in the dependency array to avoid stale values.
- Avoid declaring inline functions within useCallback, as this can break memoization.
- Note: Use useCallback for functions only. Misusing useCallback for values results in inefficient code with unnecessary function calls.

3. `React.memo` – Memoize Entire Components

Purpose: Prevents a functional component from re-rendering if its props haven’t changed.
Usage: Use to optimize child components that don’t need to re-render when the parent changes.
```
const MemoizedComponent = React.memo(ChildComponent);
```
Best Practices:
- Use with components receiving stable props or props that rarely change.
- Avoid frequent changes in props (like new objects/arrays) to maximize React.memo’s effectiveness.
- Note: Works well with useCallbackmemoized functions to maintain stable props passed to child components.

Key Points to Remember

Use useMemo for values and useCallback for functions.
- Using useMemo for functions results in immediate execution, not a stable function reference.
- Using useCallback for values returns a function, which leads to inefficient code with extra function calls.
Memoization Summary:
- useMemo: Caches computed values (return values of functions).
- useCallback: Caches function references (callbacks).
- React.memo: Caches entire components based on props to prevent re-renders from parent updates.
Selectively Use Memoization: Memoization improves performance when used correctly but can add complexity if overused or misused.

Data Fetching in Next.js

Animesh Srivastava — Mon, 04 Nov 2024 08:36:36 +0000

Before diving into this topic I will highly recommend to go through the different types of components and different ways of rendering done in next.js discussed in this post.

1. Client-Side Rendering (CSR)

Data Fetching: Data is fetched on the client side, typically inside useEffect or a custom hook.
Method: Fetching is done directly within the component using the browser’s fetch API or a client-side data-fetching library like SWR or React Query.
Execution: Fetching happens after the page loads and relies on JavaScript for rendering and interactivity.
Caching: Dependent on the browser’s caching mechanism and any HTTP headers returned by the server. Client-side caching can also be managed through libraries (e.g., SWR).
Use Case: Good for highly interactive, dynamic pages (e.g., dashboards) where SEO is not a priority, or where data is personalized and user-specific.

Example:

import { useEffect, useState } from 'react';

function CSRComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return <div>{data ? data.content : 'Loading...'}</div>;
}

2. Server-Side Rendering (SSR)

Data Fetching: Data is fetched on the server for each request, using getServerSideProps.
Method: getServerSideProps executes on every request, retrieving data and passing it to the component as props.
Execution: Runs on the server at request time, generating fresh HTML for each request.
Caching: You can configure server or CDN caching, but by default, it generates new HTML for every request.
Use Case: Ideal for frequently updated or user-specific data, where the latest data is essential on every load (e.g., personalized dashboards or live data feeds).

Example:

export async function getServerSideProps() {
  const res = await fetch('<https://api.example.com/data>');
  const data = await res.json();

  return { props: { data } };
}

function SSRPage({ data }) {
  return <div>{data.content}</div>;
}

3. Static Site Generation (SSG)

Data Fetching: Data is fetched once at build time using getStaticProps.
Method: getStaticProps retrieves data at build time, generating a static HTML file that is cached until the next build.
Execution: Runs only during the build process, making the page content static.
Caching: Content is fully cacheable by CDNs and does not change until the site is rebuilt.
Use Case: Ideal for static or rarely changing content (e.g., blog posts, product pages) where load speed and SEO are a priority.

Example:

export async function getStaticProps() {
  const res = await fetch('<https://api.example.com/data>');
  const data = await res.json();

  return { props: { data } };
}

function SSGPage({ data }) {
  return <div>{data.content}</div>;
}

4. Incremental Static Regeneration (ISR) (SSG with Regular Updates)

Data Fetching: Data is fetched at build time but can be refreshed at regular intervals using the revalidate option in getStaticProps.
Method: getStaticProps fetches data and uses the revalidate field to specify an interval for regeneration.
Execution: Initially generated at build time, but after the specified interval, the page will be regenerated in the background on the next request.
Caching: Cached globally on CDNs with periodic regeneration based on the revalidate interval.
Use Case: Ideal for semi-static content that needs occasional updates (e.g., product listings, news articles) without needing to rebuild the entire site.

Example with ISR:

export async function getStaticProps() {
  const res = await fetch('<https://api.example.com/data>');
  const data = await res.json();

  return {
    props: { data },
    revalidate: 60, // Regenerates every 60 seconds
  };
}

function ISRPage({ data }) {
  return <div>{data.content}</div>;
}

Summary Table

Rendering Method	Data Fetching Method	Execution Time	Caching and Update	Use Case
CSR	Inside `useEffect` on client	After page load (client)	Browser cache	Interactive, user-specific content
SSR	`getServerSideProps`	On every request (server)	Optional CDN	Frequently updated, dynamic content
SSG	`getStaticProps`	At build time	CDN cached	Static, rarely updated content
ISR	`getStaticProps` with revalidate	At build + intervals	CDN with periodic updates	Semi-static with occasional updates

Rendering in Next.js

Animesh Srivastava — Mon, 04 Nov 2024 05:55:00 +0000

Client-Side Rendering (CSR)
- Components are rendered on the client, unlike traditional React, which has a blank HTML root. CSR relies heavily on JavaScript for hydration and user interactivity (states, hooks).
- Uses 'use client' directive to indicate client-rendered components.
Server-Side Rendering (SSR) and Variants
- Server Components: Rendered entirely on the server and sent as HTML. They don’t include JavaScript on the client unless they embed Client Components, in which case a minimal JS bundle is sent for interactivity.
  
  If a Server Component does not contain any Client Components, it will not include any JavaScript in the client bundle. This is ideal for static, non-interactive content and improves performance.
- SSR with getServerSideProps: Generates pages dynamically per request, sending JavaScript for client hydration.
- SSG with getStaticProps: Generates static HTML at build time, ideal for mostly static content.
- ISR with revalidate: Allows periodic regeneration of SSG pages to provide fresh content at intervals.

Why Minimal JS is Sent for Server Components ?

In Next.js, Server Components (SSCs) render completely on the server, sending only HTML to the client. Client Components, marked with 'use client', require JavaScript for interactivity. When a Server Component includes a Client Component, only the JavaScript needed for that interactivity is sent, minimizing the client bundle and improving performance.

Example:

// app/page.js (Server Component)
import InteractiveComponent from './InteractiveComponent';

export default function Page({ data }) {
  return (
    <div>
      <h1>Server Rendered Content</h1>
      <InteractiveComponent /> {/* Client Component */}
    </div>
  );
}

// app/InteractiveComponent.js (Client Component)
'use client';
import { useState } from 'react';

export default function InteractiveComponent() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

In this setup, Page renders on the server, streaming HTML to the client, while InteractiveComponent is a Client Component, sending only its JavaScript to enable interactivity.

Benefits of this approach:

Smaller Client Bundles: Only necessary JavaScript is sent.
Performance Gains: Faster loading and parsing.
Enhanced Caching: Server Components leverage server caching without client-side interference.

Summary Table

Rendering Type	Key Characteristics	Data Fetching Method	Use `'use client'`	SEO Impact
CSR	Client-rendered, interactive, ideal for dynamic UIs	Direct fetch inside component (e.g., in `useEffect`)	Yes	Limited (SEO can be challenging)
SSR	Server-rendered per request, good for frequently changing or user-specific data	`getServerSideProps`	No	Good (HTML available at request time)
SSG	Pre-rendered at build time, best for static content	`getStaticProps` and optionally `getStaticPaths`	No (except for interactive components)	Excellent (very fast and fully pre-rendered)

Setting Up ESLint and Prettier for Consistent Code Quality and Formatting

Animesh Srivastava — Thu, 03 Oct 2024 10:01:29 +0000

This guide will help configure ESLint (for code quality) and Prettier (for code formatting) in a React project to ensure consistency across the team.

1. Install ESLint and Prettier

Install the necessary dependencies:

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev

eslint-config-prettier: Disables ESLint rules that conflict with Prettier.
eslint-plugin-prettier: Runs Prettier as an ESLint rule to flag formatting issues.

2. Configure ESLint

Create or update the .eslintrc.json file in the root of the project:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    // Optional: Add extra linting rules if required
  }
}

plugin:prettier/recommended: Ensures Prettier rules are enforced and disables conflicting ESLint rules.

3. Create Prettier Configuration

Customize Prettier's behavior by placing .prettierrc file in the project root:

{
  "singleQuote": true,
  "semi": true,
  "trailingComma": "es5"
}

Note : This can be optional if we want to honor Prettier's default settings but we will keep it for finer control.

4. Configure VSCode for Consistency

Create a .vscode/settings.json file to enforce formatting and linting in VSCode:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

editor.formatOnSave: Automatically formats code using Prettier on save.
source.fixAll.eslint: Automatically fixes ESLint issues on save.

5. Push `.vscode` to the Repository

Ensure that the .vscode folder is added to version control so everyone has the same settings. Add this to .gitignore:

.vscode/*
!.vscode/settings.json

6. Set Up Husky for Pre-Commit Hooks [If you are not using VSCode]

To enforce linting and formatting before code is committed, use Husky and lint-staged, this is specially useful if you are not using VSCode as your IDE:

npx husky-init && npm install
npm install lint-staged --save-dev

Add the following to your package.json:

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"]
  }
}

7. Running ESLint and Prettier (Optional manual step)

Lint your code: npx eslint .
Format your code: npx prettier --write .

Note : Setting up .vscode/settings.json or husky eliminates the need to do this manual step.

Result

VSCode: Automatically applies consistent formatting and linting across all machines with shared settings.
ESLint & Prettier: Enforce code correctness (ESLint) and consistent formatting (Prettier).
Pre-commit hooks (if not using VSCode): Ensure no code is committed without passing lint and format checks.

Creating your own database like join using {code}

Animesh Srivastava — Sun, 02 Jun 2024 14:30:51 +0000

Joining Algorithm in ETL Frameworks

There are several tools to combine datasets and perform different types of joins namely:

Inner
Outer
Left &
Right

Tools like Pandas, Spark and other ETL tools does this job exceptionally well, ofcourse apart form the databases themselves.

However, a few years back, I was working on an ETL framework that required join-like features. In this article, I will discuss the idea behind the joining algorithm that I applied to solve that problem.

Before we dive into the algorithm, let's look at the datasets and try to understand the end goal.

Employees Data

id	name	dept_id	salary
1	Justin	101	7000.0
2	Jacob	102	3000.0
3	Jolly	103	3800.0
4	Jatin	102	4500.0
5	Jacky	101	5000.0

Department Data

dept_id	dept_name
101	Engineering
102	Data Science
103	IT Operations

Expected Data after join operation

id	name	dept_id	salary	dept_id_	dept_name_
1	Justin	101	7000.0	101	Engineering
2	Jacob	102	3000.0	102	Data Science
3	Jolly	103	3800.0	103	IT Operations
4	Jatin	102	4500.0	102	Data Science
5	Jacky	101	5000.0	101	Engineering

With this understanding, I will now start by using the join module to demonstrate these functionalities step by step.

Implementation

There are 2 implementations that we are going to use:

DataSet : A wrapper class to create a wrapper on top of "namedtuples" for each row and create a dataset for the whole chunk of data.
joiner : This method will be our joining algorithm which will actually join the data.

Step 1 : Import DataSet, joiner from the module

from core.join import DataSet, joiner

Step 2 : Prepare the data sets

emp_header = ["id", "name", "dept_id", "salary"]

emp_data = [
            (1,"Justin", 101, 7000.00),
            (2,"Jacob", 102, 3000.00),
            (3,"Jolly", 103, 3800.00),
            (4,"Jatin", 102, 4500.00),
            (5,"Jacky", 101, 5000.00)
            ]

dept_header = ["dept_id", "dept_name"]

dept_data = [
            (101, "Engineering"),
            (102, "Data Science"),
            (103, "IT Operations")
            ]

emp_data_set = DataSet(emp_header, emp_data)

dept_data_set = DataSet(dept_header, dept_data)

Step 3 : Verify the datasets using count and show methods

DataSet has implementations for the helper methods like count() for checking the number of rows and printing the dataset using show() methods which we will check later.

print("Employees count : ")
emp_data_set.count()

print("Employees data : ")
emp_data_set.show()

print("Department count :")
dept_data_set.count()

print("Department data :")
dept_data_set.show()

Output

Employees count : 
5

Employees data : 
+ | id=1  || name='Justin'|| dept_id=101 || salary=7000.0 | +
+ | id=2  || name='Jacob' || dept_id=102 || salary=3000.0 | +
+ | id=3  || name='Jolly' || dept_id=103 || salary=3800.0 | +
+ | id=4  || name='Jatin' || dept_id=102 || salary=4500.0 | +
+ | id=5  || name='Jacky' || dept_id=101 || salary=5000.0 | +

Department count :
3

Department data :
+ | dept_id=101 || dept_name='Engineering' | +
+ | dept_id=102 || dept_name='Data Science' | +
+ | dept_id=103 || dept_name='IT Operations' | +

Step 4 : Join the 2 datasets and create a joined dataset

# joining the datasets using the joiner method

joined_data_set = joiner(emp_data_set, dept_data_set, ["dept_id"])

Step 5 : Check the result for the joiner

print("Joined data count : ")
joined_data_set.count()

print("Joined data : ")
joined_data_set.show()

Output

Joined data count : 
5

Joined data : 
id=1 || name='Justin'|| dept_id=101 || salary=7000.0 || dept_id_=101 || dept_name_='Engineering' 
id=5 || name='Jacky' || dept_id=101 || salary=5000.0 || dept_id_=101 || dept_name_='Engineering' 
id=2 || name='Jacob' || dept_id=102 || salary=3000.0 || dept_id_=102 || dept_name_='Data Science'
id=4 || name='Jatin' || dept_id=102 || salary=4500.0 || dept_id_=102 || dept_name_='Data Science'
id=3 || name='Jolly' || dept_id=103 || salary=3800.0 || dept_id_=103 || dept_name_='IT Operations'

Detailed Implementation

Storing the data using DataSets with column definitions (type safety in future)

Datasets will be a collection of Row objects which is a wrapper on top of the namedtuple from pythons collection module.

Row Object

class Row:
    def __init__(self, header:List[str], row:tuple=None)->None:
        '''
        A wrapper on top of namedtuple to create a Row object.
            :param header - List of column names
            :param row - A tuple of row [optional]
        '''
        self.header = header
        self.schema = namedtuple("Row", [col_name.lower() for col_name in header])
        if row:
            self.row = self.schema(*row)
        else:
            self.row = self.schema(*[None]*len(self.header))

Note: Without row argument object will create Row with all values as None.
Ex : Row(id=None, name=None)

We can go ahead and write helper method to print the row with the column information in a tabular fashion and call it show()

    def __repr__(self) -> str:
        return self.show()

    def show(self) -> str:
        string = "+ "
        field_width = [len(col) for col in self.header]
        for col_name, col_val, width in zip(self.row._fields, self.row, field_width):
            string += "| {i}={j!r:<{k}} |".format(i=col_name, j=col_val, k=width)
        return string += " +"

Dataset

We will use __generate_data_set method to generate a list of Rows object using a simple list of tuple containing the data.

class DataSet:
    def __init__(self, header:List[str], rows:List[Tuple[Union[int, str, date, datetime, float]]]) -> None:
        '''
        A wraper on top of Row class to create a complete dataset.
            :param header - List of column names
            :param rows - List of tuples of rows
        '''
        self.header = header
        self.rows = rows
        self.data_set = self.__generate_data_set()

    def __generate_data_set(self)->List[NamedTuple]:
        '''
        Row object factory; generates a list of row objects

        '''
        row_set = []
        for row in self.rows:
            if not len(self.header) == len(row):
                raise Exception(f"Columns mismatched expected : [{len(self.header)}] actual : [{len(row)}]")
            else:
                row_set.append(Row(self.header, row))
        else:
            return row_set

Once we have this implementation we can go ahead and add some helper methods like count() and show() just like spark.

These methods will help us check the count of rows and print the data in pandas / spark like tabular manner.

    def size(self)->int:
        '''
        get the number of rows
        '''
        return len(self.data_set)

    def show(self)->None:
        '''
        Prints dataset
        '''
        for row in self.data_set:
            print(row.show())
        else:
            print()

    def count(self)->None:
        '''
        Prints count
        '''
        print(self.size())
        print()

Join Algorithm

Before we go ahead and implement the last and the core part i.e the joiner; lets see a simple sql statement which joins the emp_data and dept_data on the basis of the dept_id as the key.

select e.*, d.* 
from emp_data e
inner join dept_data d
on e.dept_id = d.dept_id

Alright; now lets define the body of the method:

from itertools import product
def joiner(left_data_set:DataSet, right_data_set:DataSet, on:List[str])->DataSet:
    '''
    Performs inner join on datasets
        :param left_data_set - dataset with left data
        :param right_data_set - dataset with right data
        :param on - join on key 

    Returns -> joined DataSet 
    '''

    left_rows = left_data_set.data_set
    right_rows = right_data_set.data_set

    # creating the main data-structure to store the Rows for the same keys
    data_set = {}
    # Final list to contain all the Joined Row objects later to be converted to a data set
    joined_set = []

    # Form all the left rows by appending at the 0th index
    for left_row in left_rows:
        left_key = "".join([str(getattr(left_row.row, key)) for key in on])
        data_set.setdefault(left_key, ([],[]))[0].append(left_row.row)

    # Form all the right rows by appending at the 1st index
    for right_row in right_rows:
        right_key = "".join([str(getattr(right_row.row, key)) for key in on])
        data_set.setdefault(right_key, ([],[]))[1].append(right_row.row)

    # Finally perform the cartesian product on the left and right datasets and join them
    for ds_cols in data_set.values():
        for left_cols, right_cols in product(*ds_cols):
            joined_set.append(left_cols+right_cols)

    # Get the column names from the left and right data sets for creating the DataSet for the joined data
    result_headers = list(left_rows[0].row._fields) + [col+"_" for col in right_rows[0].row._fields]

    # Finally return the DataSet object using the joined data
    return DataSet(result_headers, joined_set)

Thats it; finally we are able to solve the problem of performing inner joins, which can support below operations:

Inner join
Joining on multiple keys
Representation of data in DataSets

However we can further modify this algorithm and create the implementation for the left/right and the outer joins also add type safety for the data by implementing Column type and create DataSets of Rows of Columns.

If you want to improve this or add more functionalities to it then I ll encourage you to contribute using this github repo->Github_dbjoin_anisriva

Finally, I'd like to conclude that this is just an experimental exercise and ofcourse there are better tools to perform this operation.

DEV Community: Animesh Srivastava

Centralized API Logic in Next.js with an External Backend

Why Centralize API Logic?

Step 1: Create the API Service Layer

Step 2: Use the Service in Server-Side Components

Step 3: Use the Service in Client-Side Components

Summary

React Memoization Cheat Sheet

1. useMemo – Memoize Computed Values

2. useCallback – Memoize Function References

3. React.memo – Memoize Entire Components

Key Points to Remember

Data Fetching in Next.js

1. Client-Side Rendering (CSR)

2. Server-Side Rendering (SSR)

3. Static Site Generation (SSG)

4. Incremental Static Regeneration (ISR) (SSG with Regular Updates)

Summary Table

Rendering in Next.js

Why Minimal JS is Sent for Server Components ?

Summary Table

Setting Up ESLint and Prettier for Consistent Code Quality and Formatting

1. Install ESLint and Prettier

2. Configure ESLint

3. Create Prettier Configuration

4. Configure VSCode for Consistency

5. Push .vscode to the Repository

6. Set Up Husky for Pre-Commit Hooks [If you are not using VSCode]

7. Running ESLint and Prettier (Optional manual step)

Result

Creating your own database like join using {code}

Joining Algorithm in ETL Frameworks

Employees Data

Department Data

Expected Data after join operation

Implementation

Step 1 : Import DataSet, joiner from the module

Step 2 : Prepare the data sets

Step 3 : Verify the datasets using count and show methods

Output

Step 4 : Join the 2 datasets and create a joined dataset

Step 5 : Check the result for the joiner

Output

Detailed Implementation

Storing the data using DataSets with column definitions (type safety in future)

Row Object

Dataset

Join Algorithm

1. `useMemo` – Memoize Computed Values

2. `useCallback` – Memoize Function References

3. `React.memo` – Memoize Entire Components

5. Push `.vscode` to the Repository