Prateek Singh

AbortController is a JavaScript interface that allows you to cancel one or more DOM requests (like Fetch API calls) as and when needed. It provides a way to abort fetch requests. Why Abort Requests? 🚫 Imagine you’re building a search feature for an e-commerce app. Every time a user types a letter (like “w”, then “wi”, then “wir”…), your app sends a new Fetch request. If the user types fast, older requests might resolve after newer ones, causing outdated results to flicker on the screen. Worse, if they leave the page mid-fetch, React might try to update a component that’s already gone, leading to errors. By using AbortController, you can cancel pending Fetch requests, ensuring that your application remains efficient. How to Use AbortController with Fetch API Now, let’s see how to use AbortController with React . Step 1: Create an AbortController const controller = new AbortController(); const signal = controller.signal; The signal property is an AbortSignal object that can be passed to the Fetch API to associate it with the controller. Step 2: Pass the Signal to Fetch Next, you pass the signal to the fetch function as part of the options object. fetch('https://api.example.com/data', { signal }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => { if (error.name === 'AbortError') { console.log('Fetch aborted'); } else { console.error('Fetch error:', error); } }); Step 3: Abort the Fetch Request controller.abort(); To abort the fetch request, you call the abort method on the AbortController instance. Using AbortController in ReactJS Let’s create a React component for searching products. We’ll use AbortController to cancel outdated searches. import React, { useState, useEffect } from 'react'; function ProductSearch() { const [query, setQuery] = useState(''); // Search input, like "wireless headphones" const [results, setResults] = useState([]); // Search results const [loading, setLoading] = useState(false); useEffect(() => { // Step 1: Create the AbortController const controller = new AbortController(); const { signal } = controller; const fetchResults = async () => { if (!query) return; // Don't search for empty queries setLoading(true); try { // Step 2: Pass the signal to Fetch const response = await fetch( `https://api.example.com/products?search=${query}`, { signal } ); const data = await response.json(); setResults(data); } catch (err) { // Step 3: Handle cancellation gracefully if (err.name === 'AbortError') { console.log('Request aborted! Moving on...'); } else { console.error('Oops!', err); } } finally { setLoading(false); } }; fetchResults(); // Step 4: Abort if the query changes or the component unmounts return () => controller.abort(); }, [query]); // Re-run effect when `query` changes return ( <div> <input type="text" value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search for products..." /> {loading && <p>Searching for "{query}"...</p>} <ul> {results.map((product) => ( <li key={product.id}>{product.name}</li> ))} </ul> </div> ); } export default ProductSearch; Breaking It Down 🔍 The useEffect Hook: Whenever the user types (updating query), this effect runs. Each new search creates a fresh AbortController. The Cleanup Function: When the effect re-runs (because query changed) or the component unmounts, React calls controller.abort(). This cancels the previous Fetch request if it’s still pending. Handling Errors: If a request is aborted, Fetch throws an AbortError. We ignore it because it’s intentional. Real errors (like network failures) are logged for debugging. Pro Tips 💡 Avoid Memory Leaks: Always abort requests when a component unmounts. React’s cleanup function in useEffect is perfect for this. Debounce for Extra Smoothness: Combine AbortController with a debounce function (like a 300ms delay) to avoid spamming the API on every keystroke. Not Just for Search: Use AbortController for any Fetch call that might become irrelevant — like canceling a file upload when the user closes a modal. Conclusion Using AbortController with the Fetch API in ReactJS is a powerful way to manage and cancel fetch requests. It helps in making your application more efficient and responsive by avoiding unnecessary network requests and potential memory leaks. Happy coding!

You can use GitHub Pages to host your website for free. In this guide will show you how you can deploy your Vite React applications to GitHub Pages in an easy way. this easy-to-follow tutorial will help you publish your projects. So, let’s dive in and get your website live! Photo by Lautaro Andreani on Unsplash What is GitHub pages? It is a static site hosting service offered by GitHub. It allows users to effortlessly publish websites directly from their repositories. With GitHub Pages, developers and organizations can showcase their projects, portfolios, documentation, and more to the world. You can even use your own custom domain or use the free domain github.io which is provided by GitHub. It’s all done using Git and GitHub, so it’s super easy! Setup a simple react application To begin, make sure you have Node.js installed on your machine. You can then create a new React project by running the following command in your terminal: npm create vite my-project cd my-project npm install npm run dev now install install gh-pages package as a dev-dependency: npm install gh-pages --save-dev Add Script in package.json In the package.json file add two new scripts predeploy & deploy something like this: "scripts": { // ... "predeploy": "npm run build", "deploy": "gh-pages -d dist" } Add Base Path in vite config In the vite.config.js add a base path which is the name of the GitHub repository you created and it will look like this: import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], base: "/my-project", }); Setting Up Git Before deploying your website, you’ll need to set up a Git repository to track your project’s changes. Follow these steps: #create a new git repository $ git init #add all changed file paths to staged changes $ git add . #commit all staged changes $ git commit -m 'initial commit' #add remote repository $ git remote add origin [HTTPS URL of the your repo] #pushed local repository to remote repository on GitHub $ git push origin master Deploy Now it’s time for deployment. This process involves building your React application and pushing it to the gh-pages branch of your repository : npm run deploy After running this command, git pushes the contents of the dist directory (which contains the built assets) to the gh-pages branch of your repository. This branch serves as the source for your GitHub Pages website. GitHub automatically detects changes to this branch and updates your website accordingly. Once the deployment process is complete, your website is live! You can access it using the URL : https://username.github.io/repository-name where username is your GitHub username and repository-name is the name of your GitHub repository. Conclusion: Congratulations! Your Vite React website is now successfully deployed to GitHub Pages, and it’s ready to be accessed by users around the world. Any future updates to your project can be deployed using the same process

Code splitting is a technique used in React applications to enhance performance and improve user experience by breaking down large bundles of JavaScript code into smaller, more manageable chunks. In essence, it allows you to load only the necessary code for the current view or feature, rather than downloading the entire application upfront. This can significantly reduce initial loading times, especially for larger applications with complex UIs. Photo by Lautaro Andreani on Unsplash Importance of Code Splitting: In modern web development, performance is paramount. Users expect fast-loading websites and applications, and studies have shown that even small delays in page load times can lead to decreased user engagement and increased bounce rates. Code splitting addresses this challenge by optimizing the delivery of JavaScript code, ensuring that only essential code is loaded upfront, while additional code is fetched as needed. Moreover, with the rise of single-page applications (SPAs) and complex web interfaces, the size of JavaScript bundles has grown significantly. This can lead to longer loading times, particularly on slower network connections or less powerful devices. By implementing code splitting, developers can mitigate this issue by dividing the codebase into smaller chunks and loading them asynchronously, thus improving overall performance and enhancing the user experience. Techniques for Code Splitting Using Dynamic Imports with React.lazy() and Suspense React.lazy() and Suspense provide a built-in way to implement code splitting in React applications. This approach allows components to be loaded asynchronously when they are needed, rather than being included in the initial bundle. import { lazy, Suspense } from 'react'; const MyComponent = lazy(() => import('./MyComponent')); const App = () => { return ( <div> <h1>My React App</h1> <Suspense fallback={<div>Loading...</div>}> <MyComponent /> </Suspense> </div> ); }; export default App; In the above example, lazy() dynamically imports the component MyComponent from a separate file using the import() function. By wrapping the component with <Suspense>, you can specify a loading indicator (fallback) to display while the component is being loaded. Conclusion: Code splitting is a crucial technique for optimizing performance and enhancing the user experience in React applications. By selectively loading components and dependencies, we can reduce the initial bundle size, improve load times, and increase the responsiveness of our applications. Thank you for reading! If you have any questions or insights to share, feel free to leave a comment below. Happy coding!

How to setup path aliases in Vite React Tired of confusing import paths in React, like ../../assets/ or ../../../assets/? You’re not alone! Luckily, there’s a way to simplify these paths, avoid errors, and make your code cleaner and easier to organize Understanding Path Aliases: Path aliases are essentially shortcuts for long file paths. Instead of writing out the full path every time you import a file or module, you can create an alias that represents a specific directory. This not only improves code readability but also simplifies maintenance by making it easier to update file structures without modifying countless import statements. Setting Up a React Vite Project: Before we dive into path aliases, let’s make sure we have a React Vite project set up. If you haven’t already, you can create a new project using the following commands: npm create vite my-react-app --template react cd my-react-app npm install Configuring Path Aliases: To configure your app to use absolute import, you need to resolve alias in vite.config.js file, which is found at the root of your project directory. Your vite.config.js should now look like this: import path from "path"; import react from "@vitejs/plugin-react"; import { defineConfig } from "vite"; export default defineConfig({ plugins: [react()], resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, }); Configuring VS Code IntelliSense: To configure VS Code intelliSense, you simply need to create a new file named jsconfig.json in the root directory of your project and add the following code to the file: { "compilerOptions": { "paths": { "@/*": [ "./src/*" ] } } } Utilizing Path Aliases in Your Code: Now that path aliases are set up, you can start using them in your code. For example, instead of writing: import Button from "../../../components/Button" You can now use path aliases: import Button from "@/components/Button" Conclusion: In this guide, we’ve explored the power of path aliases in React Vite projects. By setting up path aliases, you can enhance code readability, simplify maintenance, and make your development workflow more efficient. With these techniques, you’ll be well on your way to creating more maintainable and scalable React applications. Happy coding!