Forem: IHesamI

React Alternative to Redux: useSyncExternalStore

IHesamI — Fri, 24 Oct 2025 15:38:34 +0000

Hello everyone Recently, I interviewed a few front-end developers and asked them this question:

“If you wanted to implement a state management system in pure React, what hooks would you use?”

Most mentioned Context API, useReducer, or useState — all solid answers, but not quite enough to create a true state management system like Redux. These tools work well for smaller apps, but they have some important limitations when it comes to scalability and predictable updates.

The real answer I was looking for is useSyncExternalStore — a built-in React hook designed for subscribing to external data sources.

This hook essentially implements the Observer Design Pattern:
components subscribe to a store, and whenever the store’s state changes, all subscribed components automatically re-render.

Here’s a simple example 👇

const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot);

And here’s a minimal implementation of the store:

let state = { counter: 0 };

export const store = {
    listeners: [],
    updateState(){
        state={...state};
    },
    increaseCount() {
        state.counter += 1;
        store.updateState();
        store.notify();
    },
    changeCounter(callBack) {
        if (typeof callBack == 'function') {
            state.counter = callBack(state.counter);
        } else {
            state.counter = callBack;
        }
        store.updateState();
        store.notify();
    },
    decreaseCount() {
        state.counter -= 1;
        store.updateState();
        store.notify();
    },
    subscribe(listener) {
        store.listeners.push(listener);
        return () => {
            store.listeners = store.listeners.filter(storeListener => storeListener != listener)
        }
    },
    getSnapshot() {
        return state;
    },
    notify() {
        store.listeners.forEach(listener => listener());
    }
}

This is a minimal example, but you can easily extend it to handle complex state logic, multiple slices, or middleware — all while keeping full control over your codebase.

If you’d like to dive deeper, check out the official React docs on useSyncExternalStore.

Thanks for reading, Would love to see your thoughts in the comments!

React Performance Trick: Updating Large Lists with Generators

IHesamI — Thu, 04 Sep 2025 06:12:59 +0000

Hi everyone. Recently, I had to implement a feature where items in a large list needed to update at very short intervals (as fast as 10 milliseconds).

At first, I took the straightforward route: keep an index in state, iterate over the list, and update items one by one. But this approach wasn’t ideal:

Too many re-renders because the interval was so short.
Extra overhead from constantly saving and retrieving the index state.

So, I tried a different approach: using a generator to control updates while each item manages its own visibility state.

Imagine we want to hide characters in a large string, one by one, with precise control over start, stop, and resume actions.

We’ll create a Char component that manages its own isVisible state and exposes its setter to the parent.

import { useEffect, useState, type Dispatch, type SetStateAction } from "react";

export default function Char({
  char,
  index,
  oninitial,
}: {
  char: string;
  index: number;
  oninitial: (x: Dispatch<SetStateAction<boolean>>) => void;
}) {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    oninitial(setIsVisible);
  }, []);

  return <span>{isVisible ? char : ""}</span>;
}

The Parent Component

The parent (CharsList) stores all setters in a ref and uses a generator to walk through them at a controlled pace.

import { useRef, type Dispatch, type SetStateAction } from "react";
import Char from "./Char";

function CharsList({ largeString }: { largeString: string }) {
  const iterationRef = useRef<
    Generator<Dispatch<SetStateAction<boolean>>, void, unknown> | null
  >(null);

  const intervalRef = useRef<number | null>(null);

  const setters = useRef<Record<number, Dispatch<SetStateAction<boolean>>>>({});

  // Generator to yield each setter
  function* startChanger(arrayOfSetters: Dispatch<SetStateAction<boolean>>[]) {
    for (const setter of arrayOfSetters) yield setter;
  }

  const startHiding = () => {
    const iteration = startChanger(Object.values(setters.current));
    iterationRef.current = iteration;

    intervalRef.current = setInterval(() => {
      const result = iteration.next();
      if (result.done) {
        iterationRef.current = null;
        return clearInterval(intervalRef.current as number);
      }
      result.value(false);
    }, 10);
  };

  const stopHiding = () => clearInterval(intervalRef.current as number);

  const continueHiding = () => {
    const iteration = iterationRef.current!;
    intervalRef.current = setInterval(() => {
      const result = iteration.next();
      if (result.done) return clearInterval(intervalRef.current as number);
      result.value(false);
    }, 10);
  };

  return (
    <>
      <div className="card">
        <button onClick={startHiding}>Start Hiding</button>
        <button onClick={stopHiding}>Stop Hiding</button>
        <button onClick={continueHiding}>Continue Hiding</button>
      </div>

      <p className="large-string-text">
        {largeString.split("").map((char, index) => (
          <Char
            key={index}
            char={char}
            index={index}
            oninitial={(setter) => {
              setters.current[index] = setter;
            }}
          />
        ))}
      </p>
    </>
  );
}

export default CharsList;

This approach gives you:

Better performance — only one component updates at a time.
Pause & resume control — thanks to the generator’s statefulness.

but Higher complexity — not as straightforward as the index-based solution.

If you’re working with large lists and ultra-short intervals, the performance tradeoff is worth it.

This was a fun problem to solve. At first, the generator approach felt unintuitive, but it became a powerful pattern for precise, performant updates.

Thanks for reading. Would love to hear your thoughts or alternative solutions in the comments!

Strapi Tips #1: Adding Custom JWT Protection to Your API

IHesamI — Sun, 03 Aug 2025 13:34:52 +0000

Hello!
This is the first post in a series where I’ll share my experiences and current knowledge about Strapi.

In this post, we’ll create a custom middleware to authenticate JWT tokens in your Strapi project.

Creating a JWT Authentication Middleware
Let’s start by creating a new middleware file named:
src/middlewares/jwt-authentication.ts

Now, add the following code:

import jwt from 'jsonwebtoken';
import { Context } from 'koa';

export default (config, { strapi }) => {
  return async (ctx: Context, next) => {
    try {
      const token = ctx.req.headers.authorization?.split(' ')[1];
      const tokenInfo = jwt.verify(token, process.env.YOUR_JWT_SECRET);
      ctx.state.user = tokenInfo;
      await next();
    } catch (err) {
      console.error(err);
      return ctx.unauthorized();
    }
  };
};

This middleware does the following:

Extracts the JWT token from the Authorization header.

Verifies and decodes the token using the secret key.

Attaches the user info to ctx.state.user if the token is valid.

Calls ctx.unauthorized() if the token is missing or invalid.

Make sure to store your JWT secret in an environment variable called YOUR_JWT_SECRET.

Using the Middleware in a Custom Route
To protect a route using this middleware, define it like this:

{
  method: 'GET',
  path: '/your_protected_route',
  handler: 'your_controller',
  config: {
    middlewares: ['global::jwt-authentication'],
  },
}

You now have a working JWT authentication middleware to protect your custom API routes.

Thanks for reading — stay tuned for more Strapi tips in upcoming posts!

How AI Helped Me Launch My First EdTech Startup

IHesamI — Fri, 30 May 2025 17:17:59 +0000

In this post, I want to share my experience of starting an online business—and how AI played a key role in speeding up the process.

Part 1: The Idea
The core idea was to build a platform that helps students prepare for English language proficiency tests, like TOEFL, at a lower cost. After doing some research, I realized that creating TOEFL-related content would be a practical starting point, as it was easier to structure and produce compared to other exams. My goal was to make high-quality test preparation accessible and affordable.

Part 2: Technical Journey
This was a full-stack project, and to be honest, I had never written serious back-end code before. So I started learning everything from scratch. Whenever I ran into problems or the documentation wasn’t clear enough, I turned to AI. It helped me find answers quickly and gave me the confidence to keep moving forward.

AI also played a role in areas I wasn’t familiar with—like SEO and digital marketing. With its guidance, I managed to implement several strategies correctly, even without prior experience.

That said, I never relied entirely on AI. I strongly believe that developers should stay in control of their codebase. Overusing AI can lead to a lack of understanding and ownership, which is risky in the long term.

Part 3: Looking Ahead
I believe AI will continue to drive down the cost of services that were once expensive, especially in education and content creation. In my opinion automating routine tasks and producing scalable learning materials opens up incredible opportunities for future businesses.

As for me, I plan to keep improving the platform—adding new features, supporting more exams, and making the experience even better for learners.

If you're interested in collaborating, feel free to check out my website: SmartTestify.com . I'd be happy to connect.

Thank you for reading this post, hope you find it useful.

Donut Chart With visx in React

IHesamI — Sat, 21 Sep 2024 09:05:30 +0000

Hello, In this guide, we will learn how to create a Progress Donut chart using visx. A Donut chart is a variant of a pie chart featuring a central hole, resembling a donut.

Understanding the Math

To effectively implement the features of our chart, it is essential to grasp the mathematical principles behind it. The chart is a circle with 360 degrees or 2 * Pi radians. Here's how we determine the angles for each progress segment :

2 * PI / (number of progress data points)

The starting angle for each progress segment is derived by multiplying the index by 2 * Pi divided by the total number of progress data points :

(index) * 2 * PI / (number of progress data points )

The ending angle of a progress segment is calculated by adding the progress percentage to the index and then multiplying by 2 * Pi divided by the total number of progress data points :

(index + (progress / 100)) * 2 * PI / (number of progress data points  )

For the track bar representing remaining progress, the start angle is the same as the end angle of the progress segment, while the end angle is the start angle of the progress segment plus the total progress of that segment.

(index + (progress / 100)) * 2 * PI / (number of progress data points  )

the track bar endAngle :

(index + 1) * 2 * PI / (number of progress data points)

Donut Chart Code

The first step in developing the chart is to organize the necessary data. In the data.js file, you will define symbols for progress data, the progress amount, and corresponding colors.

export const coins = [
    { symbol: "r", color: "#121212", progress: 30, },
    { symbol: "l", color: "#91235d", progress: 37,  },
    { symbol: "s", color: "#5ef13f", progress: 90,  },
    { symbol: "w", color: "#643dfe", progress: 50, },
    { symbol: "d", color: "#ef0de6", progress: 45, },
];

Next, let's implement the Donut Chart Component. Utilize the math calculations described above to dynamically generate each progress segment's angles and accompanying track bar.

import { Pie } from "@visx/shape";
import { Group } from "@visx/group";
import { scaleOrdinal } from "@visx/scale";
import { Text } from "@visx/text";

const margin = { top: 10, right: 10, bottom: 10, left: 10 };
const thickness = 25;

export default function Donut({
    width,
    height,
    data,
    title,
}: {
    width: number;
    height: number;
    data: { symbol: string; progress: number; color: string }[];
    title: string;
}) {

    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;
    const radius = Math.min(innerWidth, innerHeight) / 2;
    const centerY = innerHeight / 2;
    const centerX = innerWidth / 2;

    const getBrowserColor = scaleOrdinal({
        domain: data.map((d) => d.symbol),
        range: data.map(item => item.color),
    });

    return (
        <svg width={width} height={height}>
            <Group top={centerY + margin.top} left={centerX + margin.left}>
                <Pie
                    data={data}
                    pieValue={(d) => d.progress / 100}
                    outerRadius={radius}
                    innerRadius={radius - thickness + 21}
                >
                    {({ arcs, path }) => {
                        arcs = arcs.map((item, index) => {
                            return ({
                            ...item, 
                                startAngle: (index) * (Math.PI * 2 / data.length),
                                endAngle: (((index + (item.data.progress / 100)) * (Math.PI * 2 / data.length))),
                            })
                        })
                        return (
                            <g >
                                {arcs.map((arc, i) => {
                                    const firstArc = { ...arc, startAngle: arc.startAngle, endAngle: arc.endAngle }
                                    const second = { ...arc, startAngle: arc.endAngle, endAngle: arc.startAngle + Math.PI * 2 /data.length}

                                    return (
                                        <>
                                            <g key={`pie-arc-${i}+1`}>
                                                <path
                                                    className={`arc${i}`}
                                                    d={path(firstArc)}
                                                    fill={getBrowserColor(arc.data.symbol)}
                                                />
                                            </g>
                                            <g key={`pie-arc-${i}+2`}>
                                            <path
                                                className={`arc${i}`}
                                                d={path(second)}
                                                fill={'#E4E4E4'}
                                            />
                                        </g>

                                        </>
                                    )
                                })}
                            </g>
                        )
                    }}
                </Pie>
                <Text className="whitespace-wrap" textAnchor="middle" verticalAnchor={'middle'} fill="black" scaleToFit fontFamily="sans-serif" >
                    {title}
                </Text>
            </Group>

        </svg>)
}

Please don't hesitate to reach out if you require further clarification or assistance with constructing the Donut Chart Component. Thank you for reading this article the live demo is here.

Decorator design pattern in React

IHesamI — Tue, 16 Jul 2024 17:22:04 +0000

Greetings, in this article we will be discussing the implementation of the decorator design pattern in React. The decorator design pattern involves wrapping objects and adding new functionalities to them. For instance, if you are working on a store management system within your React application, you can utilize this design pattern to interact with the store manager and access data.

We will proceed to the implementation stage, starting with creating a Wrapper function that serves as the decorator.

import { FC } from "react";

function Wrapper<T>(ReactComponent: FC<T>) {
    function ComponentWrapper(props: T & JSX.IntrinsicAttributes) {
        return <ReactComponent {...props} />
    }
    return ComponentWrapper;
}

export default Wrapper;

In the code provided, the Wrapper function acts as a decorator for the ReactComponent, which is a functional component in React. The ComponentWrapper serves as the parent component that interacts with the ReactComponent as its child. You can use any hooks within the ComponentWrapper. Let's now use the Wrapper.

import { FC } from 'react';
import Wrapper from './Wrapper';

type props = { title: string; }

const Header: FC<props> = ({ title }) => {
    return (
        <div>
            {title}
        </div>
    );
}

export const HeaderComponent = Wrapper<props>(Header);
export default HeaderComponent;

The code above demonstrates the utilization of the decorator that was created earlier. The Header is a basic react component that is enclosed within the Wrapper component. This component can be utilized just like any other component.

import HeaderComponent from './Header'

function App() {

  return (
    <>
      <HeaderComponent title='Hello DEV.to' />
    </>)
}

export default App

The example above demonstrates how the HeaderComponent is utilized.

Decorator is a robust design pattern commonly found in various JavaScript frameworks such as Angular or NestJS. By implementing this straightforward approach, decorators can also be incorporated into React.

Thank you for taking the time to read this. I hope you found this post useful. Please feel free to share your thoughts in the comments section.

Save your life with Git Worktree

IHesamI — Wed, 01 May 2024 18:19:18 +0000

Hello, today I would like to discuss an issue that I encountered in my recent project.

Lately, I have embarked on a project that has been in development for several years and relies on outdated tools. Consequently, my primary task is to modernize the project and occasionally address issues within the old codebase. The most challenging aspect for me is dealing with the node_modules directory, as I am required to reinstall all the packages whenever I switch between branches.

worktree is the ultimate solution for tackling such issues. By utilizing this command, you can effortlessly link a specific directory to a designated repository. For instance, if you want to create a branch named new-version and this branch requires a dedicated directory, which can be easily achieved by this command. Let's delve into its practical implementation:

git worktree add new-version

The provided code snippet will generate a new directory and branch named new-version. Additionally, it will duplicate the contents of the HEAD branch into the new-version directory.

It is also feasible to create a directory for the branches that already exist:

git worktree add path_to_new_directory existing_branch_name

This command will create a directory in the provided path from the chosen branch.

Thank you for taking the time to read this post. For further details regarding this command, please refer to the official document available at the following link.

Don't use State for Theme

IHesamI — Wed, 24 Apr 2024 04:04:21 +0000

Greetings, In this article I will show a simple technique for changing and setting multiple themes in a React application. To begin, we will need to create a file named theme.js and input the following code into the file:


let rootNode;

export function initRoot(root) {
    rootNode = root;
}
export function changeTheme() {
    const rootTheme = rootNode.dataset?.theme
    rootNode.dataset.theme = rootTheme == 'dark'? 'light' : 'dark';
}

The root element of the tree is declared in the first line, and the initRoot function is tasked with initializing this element. This function should be invoked at the highest level of the react tree in main.js, with a parameter of the root node.

The changeTheme function is responsible for altering the theme, and can be called whenever a button or click handler is required.
something like this :

import { changeTheme } from "./theme";

export default function ThemeChanger(/* your props */) {
    return (
        <button onClick={changeTheme}>{/*your title*/}</button>
    )
}

Update the properties within the css file to customize them for various themes.

:root {
  --background-color: #fff;
  --text-color: #000;
}

#root[data-theme=dark] {
  --background-color: #000;
  --text-color: #fff;

}

.app-container {
  color: var(--text-color);
  background-color: var(--background-color);
}

Every desired color that you intend to utilize must be declared as a property and possess a corresponding equivalent in the dark theme mode. Subsequently, employ the var function in CSS to make use of these colors.

It is crucial to refrain from altering the DOM since React utilizes a virtual DOM. However, this method is simple and does not impact the actual DOM.

Thank you for taking the time to read this. I hope you found this post useful. Please feel free to share your thoughts in the comments section.

Utilizing Intersection Observer in React

IHesamI — Wed, 17 Apr 2024 08:16:07 +0000

Today, I want to talk about the IntersectionObserver, a built-in JavaScript API which is primarily used for lazy-loading images and implementing infinite scrolling. Creating an instance of this API is straightforward, as demonstrated below:

const observer = new IntersectionObserver(callback,options);

A callback function is required to trigger when intersecting entities change, while options is an object that defines the observer's behavior and policy. Utilizing this API enables the lazy loading of images in a React app. Refer to this page for a comprehensive understanding of this API.

To utilize this API in a React application, you need to follow a few steps.
Firstly Create a file called Observer.js which contains the observer object and its corresponding callback function. The structure of Observer.js will appear as follows:

export let observer;

export function initObserver() {
  observer = new IntersectionObserver(observerCallback);
}


function observerCallback(entries) {
  // TODO
}

The initObserver function initializes the observer object, the body of the observerCallback function will be completed later. The initObserver needs to be called at the top level of the react tree, such as in main.jsx.

To render the images and enable observation, we need to create an Image component, which enables us to use the observer. The code snippet provided below demonstrates the implementation of the Image component.

import React, { useEffect, useRef, useState } from "react";
import { observer } from "./Observer";

export default function Image({ src }) {
  const [isSeen, setIsSeen] = useState(false);
  const containerRef = useRef(null);


  useEffect(() => {
    if (containerRef.current) {
      containerRef.current.onObserve = () => {
        setIsSeen(true);
      };
      observer.observe(containerRef.current);
    }
    return () => observer.unobserve(containerRef.current);
  }, []);


  return isSeen ? (
    <img src={src} />
  ) : (
    <div
      ref={containerRef}
      style={{ width: "250px", height: "350px", backgroundColor: "black" }}
    />
  );
}

This component uses a prop named src, which represents the URL source of the image. Additionally, it requires a ref to reference an alternative element for the image which is called containerRef. In the example given, a basic div with a black background is used, but you have the flexibility to customize this element according to your specific requirements.

In the useEffect setup function, we first check if the containerRef has a reference. If it has, we add a function called onObserve to it. Inside this function, we change the component state isSeen to true, indicating that the image should be rendered and displayed. Then, we make the observer intersects the containerRef. Finally, in the clean-up function of the useEffect, we remove the containerRef from the list of observed entries by calling the unobserve function.

Now, moving on to the final step, we will go back to the Observer.js file and proceed with initializing the body of the observerCallback function. It should verify if an entry intersects and then invoke its onObserve function. Therefore, the updated code will appear as follows:

function observerCallback(entries) {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.onObserve();
      }
    });
  }

Thank you for taking the time to read this article. I hope you found it helpful. If you have any questions or comments, please share them with me.

Tricky Question for React interview

IHesamI — Fri, 12 Apr 2024 05:25:40 +0000

Greetings, In this article, we will delve into a specific scenario and provide a solution for it. Now, let's take a look at the following code snippet:

import { useState } from "react";
import "./App.css";
import ChangeCounter from "./ChangeCounter";

function App() {
  const [counter, setCounter] = useState(0);
  const incrementCounter = () => {
    setCounter(counter + 1);
  };

  const decrementCounter = () => {
    setCounter(counter - 1);
  };

  return (
    <div>
      <ChangeCounter increment={incrementCounter} decrement={decrementCounter} />
      {counter}
    </div>
  );
}

export default App;

In this block of code, there is a state called counter and two functions incrementCounter, decrementCounter which are responsible for changing the counter, these two functions are props of the ChangeCounter component which has two buttons to increase and decrease the counter, the ChangeCounter component looks like this :

import React, { memo } from "react";

const ChangeCounter = ({ increment, decrement }) => {
    return (
    <div>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
};
export default memo(ChangeCounter);

This component is memoized using memo which prevents unnecessary re-renders when the props remain unchanged. However, clicking the buttons will still trigger a re-render. What could be causing this issue?

The issue lies in the incrementCounter and decrementCounter declarations. Whenever the counter is modified, the App component will re-render, causing these two functions to be recreated. Due to having a different reference from the last props, the ChangeCounter will also re-render! The key solution here is useCallback which caches these two functions.
The code is being updated to the following:

import { useCallback, useState } from "react";
import "./App.css";
import ChangeCounter from "./ChangeCounter";

function App() {
  const [counter, setCounter] = useState(0);
  const incrementCounter = useCallback(() => {
    setCounter(counter + 1);
  },[]);

  const decrementCounter = useCallback(() => {
    setCounter(counter - 1);
  },[]);

  return (
    <div>
      <ChangeCounter increment={incrementCounter} decrement={decrementCounter} />
      {counter}
    </div>
  );
}

export default App;

The ChangeCounter will no longer undergo re-rendering. However, a new issue arises with the decrementCounter and incrementCounter functions as they are not functioning correctly. This is due to their body using the values from the initial render, which look like this:

  const incrementCounter = () => {
    setCounter(0 + 1);
   };

  const decrementCounter = () => {
    setCounter(0 - 1);
   };

These functions only assign the values 1 or -1 to the counter!

One way to solve this is to include the counter in the useCallback dependency list. However, this approach makes decrementCounter and incrementCounterto be recreated and the ChangeCounter will re-render again.

A better solution would be to use an updater function in the setCounter. Using the updater function, the setCounter will always update the previous value in the rendering queue. For more detailed information, you can refer to this link.

As a result, the updated version of the App component should appear as follows:

import { useCallback , useState } from "react";
import "./App.css";
import ChangeCounter from "./ChangeCounter";

function App() {
  const [counter, setCounter] = useState(0);
  const incrementCounter = useCallback(() => {
    setCounter(state=>state + 1);
  },[]);

  const decrementCounter = useCallback(() => {
    setCounter(state=>state - 1);
  },[]);

  return (
    <div>
      <ChangeCounter increment={incrementCounter} decrement={decrementCounter} />
      {counter}
    </div>
  );
}

export default App;

In the latest version, the setCounter includes an updater function that uses the state from the previous render to update the counter.

Thank you for taking the time to read this post. I suggest checking out the React official documentation for further insights on Hooks and React Apis.

Deploy a React application with multiple pages to Github

IHesamI — Wed, 10 Apr 2024 12:22:28 +0000

Hello, In this guide we will learn how to deploy a React project with multiple pages created in Vite environment to Github pages.

To begin, navigate to your project directory in the command line and enter the following command to create a new project:

npm create vite .

When setting up your project with Vite, you will need to choose between JavaScript or TypeScript. For this example, we will proceed with JavaScript.

Next, install the project dependencies and run the project:

npm i && npm run dev

Once the project is running smoothly, create a new repository on Github and link it to your project by initializing a Git repository:

git init

Add the remote repository:

git remote add origin YOUR_REPOSITORY_LINK

It is recommended to push your main branch to the remote repository at this point.

To create routes, you will need to install react-router-dom for handling routes and gh-pages for deploying the project to Github pages. Install these dependencies by running:

npm i gh-pages react-router-dom

Additionally, create Login and SignUp components for rendering different routes. You will also need a router to manage routes and URLs. Create a file named routes.jsx to define your routes.

import { createHashRouter } from "react-router-dom";
import App from "./App";
import SignUp from "./SignUp";
import Login from "./Login";

export const routes = createHashRouter([
    {
        path: "/",
        element: <App />,
    },
    {
        path: "/signup",
        element: <SignUp />,
    },
    {
        path: "/login",
        element: <Login />,
    },
]);

The routes variable within this file is responsible for generating multiple routes. Due to the lack of support for routes utilizing the pushState API on Github Pages, we need to utilize createHashRouter instead. For further details, please refer to the following link. Now, let's make modifications to the main.jsx file.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { RouterProvider } from "react-router-dom";
import { routes } from "./routes.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={routes} />
  </React.StrictMode>
);

It is necessary to modify vite.config.js. The base URL of the application needs to be added, and since gh-pages inspects the build directory for deployment, the default path of vite build scripts should be altered. Therefore, include these lines in your vite.config.js.

  base:"/YOUR_REPOSITORY_NAME/",
  build: {
    outDir: "build",
  },

In the final step, the package.json file needs to be edited. Begin by inserting a line into the file and replacing it with your username and repository name.

"homepage": "https://your_user_name.github.io/YOUR_REPOSITORY_NAME",

Then add gh-pages scripts like this:

"predeploy": "npm run build", "deploy": "gh-pages -d build"

Now, we can proceed with deploying the application by executing this command.

npm run deploy

The application has been successfully deployed on the github pages. I appreciate you taking the time to read this post, hope it provides you with valuable information.

optional

To keep the default Vite build directory unchanged, you may include the following script in your package.json file:

"deploy": "gh-pages -d dist"

Additionally, make sure to avoid altering the build directory in the vite.config.js file.