The latest articles on Forem by Anjan Karmakar (@47anjan). https://forem.com/47anjan https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F773854%2Ff34379e5-6444-42ea-b76d-e12f926198d9.jpg https://forem.com/47anjan en Anjan Karmakar Wed, 28 Aug 2024 07:23:06 +0000 https://forem.com/47anjan/6-study-habits-of-successful-students-24d8 https://forem.com/47anjan/6-study-habits-of-successful-students-24d8 <p>This guide summarizes effective study habits based on research conducted among 700 medical students, focusing on those who excel academically. The following key habits are essential for maximizing learning and achieving academic success.</p> <h2> 1. <strong>Daily Study Routine</strong> </h2> <ul> <li> <strong>Time Commitment:</strong> Successful students study for about 3-4 hours each day, at least 5 days a week.</li> <li> <strong>Consistency:</strong> Maintaining a consistent study schedule helps the brain and body adapt to learning during specific times, making it easier to focus and retain information.</li> </ul> <h2> 2. <strong>Minimizing Distractions</strong> </h2> <ul> <li> <strong>Set Boundaries:</strong> During study time, put away your phone, inform friends and family that you are unavailable, and create a distraction-free environment.</li> <li> <strong>Focus:</strong> Understand that focus and attention are limited resources but can be renewed. Prioritize creating an environment conducive to deep concentration.</li> </ul> <h2> 3. <strong>Teaching Others</strong> </h2> <ul> <li> <strong>Peer Teaching:</strong> Students who teach their peers perform better. The "Watch One, Do One, Teach One" method is particularly effective: <ul> <li> <strong>Watch One:</strong> Observe a concept or skill being taught.</li> <li> <strong>Do One:</strong> Practice and apply the concept independently.</li> <li> <strong>Teach One:</strong> Teach the concept to others, reinforcing your understanding.</li> </ul> </li> </ul> <h2> 4. <strong>Studying in Isolation</strong> </h2> <ul> <li> <strong>Solo Study:</strong> Dedicate time to studying alone without distractions. This focused time is crucial for deep learning and mastery of the material.</li> </ul> <h2> 5. <strong>Sleep and Focus</strong> </h2> <ul> <li> <strong>Adenosine and Sleep:</strong> Adenosine builds up in the brain the longer you are awake, leading to decreased focus and alertness. Sleep helps reset adenosine levels, improving your ability to concentrate.</li> <li> <strong>Regular Sleep Schedule:</strong> Adhering to a consistent sleep schedule will enhance your study effectiveness and overall cognitive function.</li> </ul> <h2> 6. <strong>Regular Study Time</strong> </h2> <ul> <li> <strong>Routine:</strong> Establish a regular study time each day. It takes about 2-3 days to adjust to a new study routine, after which your brain will be better trained to focus during those times.</li> <li> <strong>Weekend Consistency:</strong> Try to maintain your study schedule even on weekends to keep your nervous system optimized for learning.</li> </ul> <p>This guide outlines the practices that top-performing students use to excel in their studies. By incorporating these habits into your routine, you can improve your focus, retention, and overall academic performance.</p> <p>Source: <a href="https://youtu.be/ddq8JIMhz7c?si=9mwXvgVwuTENRmLE" rel="noopener noreferrer">Optimal Protocols for Studying &amp; Learning - Andrew Huberman</a></p> productivity Anjan Karmakar Tue, 14 May 2024 03:55:18 +0000 https://forem.com/47anjan/describe-the-difference-between-and-for-optimal-website-performance-1eel https://forem.com/47anjan/describe-the-difference-between-and-for-optimal-website-performance-1eel <p>Ever wondered how to optimize JavaScript loading on your web pages? The answer lies in understanding the different ways to include scripts using the <code>&lt;script&gt;</code> tag. Here's a breakdown:</p> <p><strong>1. <code>&lt;script&gt;</code> (Default):</strong></p> <ul> <li>Blocks HTML parsing until the script is downloaded and executed.</li> <li>Use this for critical scripts that the page relies on to render initially.</li> </ul> <p><strong>2. <code>&lt;script async&gt;</code>:</strong></p> <ul> <li>Downloads the script in parallel with HTML parsing.</li> <li>Executes the script as soon as it's available, potentially before HTML parsing finishes.</li> <li>Order of execution isn't guaranteed.</li> <li>Ideal for non-critical scripts like analytics that don't depend on the DOM being fully built.</li> </ul> <p><strong>3. <code>&lt;script defer&gt;</code>:</strong></p> <ul> <li>Downloads the script in parallel with HTML parsing.</li> <li>Waits for the HTML to be fully parsed before executing the script, but before the DOMContentLoaded event fires.</li> <li>Scripts execute in the order they appear in the HTML.</li> <li>Use this for scripts that rely on the DOM being fully available, like manipulating page elements.</li> </ul> <p><strong>Key Takeaways:</strong></p> <ul> <li><strong><code>async</code> for independent, non-critical scripts.</strong></li> <li><strong><code>defer</code> for DOM-dependent scripts that preserve order.</strong></li> <li><strong>Both improve performance by allowing parallel parsing.</strong></li> <li><strong>Not for critical rendering scripts!</strong></li> </ul> <p><strong>Bonus Tip:</strong> Avoid <code>document.write()</code> with <code>async</code> or <code>defer</code> scripts.</p> <p>By understanding these options, you can ensure your website loads faster and delivers a smoother user experience!</p> javascript frontend performance interview Anjan Karmakar Thu, 09 May 2024 07:02:23 +0000 https://forem.com/47anjan/mastering-git-13-advanced-techniques-and-shortcuts-for-efficiency-10d1 https://forem.com/47anjan/mastering-git-13-advanced-techniques-and-shortcuts-for-efficiency-10d1 <p>Ready to elevate your Git game? Whether you're a seasoned developer with years of experience or just starting out on your coding journey, mastering Git can significantly enhance your development workflow and productivity. This blog post dives into 13 advanced techniques and shortcuts to navigate Git with efficiency and ease.</p> <ol> <li> <strong>Combine add &amp; commit:</strong> Streamline your workflow with <code>git commit -am "&lt;message&gt;"</code>. This powerful command stages all modified files <strong>(meaning it adds them to the staging area for the next commit)</strong> and commits them with a provided message in one step. This is a great time-saver for simple changes where you're modifying multiple files and the message is clear.</li> </ol> <p><strong>Code Sample:</strong><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>git commit <span class="nt">-am</span> <span class="s2">"Fixed typo in main function"</span> </code></pre> </div> <ol> <li> <strong>Aliases:</strong> Tired of typing long and repetitive Git commands? Customize them for frequently used actions with aliases in your Git config. This ensures faster execution without compromising accuracy. Here's an example of creating an alias for <code>git status</code>: </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>git config <span class="nt">--global</span> alias.st status </code></pre> </div> <p>Now, you can simply type <code>git st</code> to check the status of your repository.</p> <ol> <li><p><strong>Amend:</strong> Corrected a typo in your commit message? No sweat! Use <code>git commit --amend</code> to effortlessly update the message <strong>without creating unnecessary commits</strong>. This keeps your commit history clean and organized.</p></li> <li><p><strong>Force Push (Use with Caution):</strong> Take control of the remote repository with <code>git push --force</code>. <strong>Important:</strong> This rewrites remote history irreversibly, so use it cautiously. This should only be used in specific situations, like fixing a mistake you accidentally pushed to the remote repository. </p></li> <li><p><strong>Revert:</strong> Need to undo changes from a specific commit but want to preserve the overall history? Utilize <code>git revert &lt;commit_hash&gt;</code> to create a new commit that effectively undoes the changes introduced by the specified commit.</p></li> <li><p><strong>Codespaces:</strong> Unleash the power of GitHub and Git operations directly from your web browser with Codespaces. This eliminates the need for local Git installations and enables seamless development and collaboration from anywhere with an internet connection.</p></li> <li><p><strong>Stash:</strong> Temporarily set aside changes with <code>git stash</code>. This allows you to switch tasks without cluttering your commit history. Think of it like putting your current work on hold. Retrieve stashed changes with <code>git stash list</code> to see a list of your stashed changes and apply them selectively using <code>git stash pop</code>.</p></li> <li><p><strong>Main Branch:</strong> Embrace modern Git practices by renaming your default branch to <code>main</code>. This aligns with industry standards adopted post-2020. You can use the command <code>git branch -m master main</code> to rename your master branch to main.</p></li> <li><p><strong>Pretty Logs:</strong> Tired of scrolling through long lists of commits? Enhance readability of your commit history using <code>git log --graph --oneline --decorate</code>. This command provides a concise and visually appealing overview of your repository's changes, including branch names and authorship information.</p></li> <li><p><strong>Bisect:</strong> Debugging a complex issue can be time-consuming. Debug efficiently by isolating problematic commits with <code>git bisect</code>. This powerful tool allows you to systematically analyze your codebase, narrowing down the commit that introduced the bug.</p></li> <li><p><strong>Autosquash:</strong> Streamline commit management during feature development with <code>git rebase --interactive</code>. Utilize <code>fixup</code> and <code>squash</code> flags to automate the consolidation of commits. This can be helpful when you have a series of small commits related to a single feature and want to combine them into a single, cleaner commit.</p></li> <li><p><strong>Hooks:</strong> Extend Git's functionalities by leveraging hooks to execute custom scripts before or after specific Git events. Consider tools like Husky for simplified hook configuration. Hooks can be used for various purposes, such as running automated tests or enforcing code style guidelines before a commit.</p></li> <li><p><strong>Destroy Things (Safely):</strong> <strong>Always be cautious when modifying your Git history!</strong> Here's how to safely revert changes:</p></li> </ol> <ul> <li>After a <code>git fetch</code> to update your local repository with remote changes, use <code>git reset --hard HEAD^</code> to revert your local working directory to the state of the most recent commit on the remote branch (be aware that this discards any uncommitted changes). </li> <li>Utilize <code>git clean -f</code> to remove untracked files (files that haven't been added to the Git repository) and restore repository cleanliness. <strong>Remember:</strong> Use these commands with caution, as they can lead to data loss if not used properly.</li> </ul> <p><strong>Bonus Tip: Checkout to Last:</strong> Quickly switch back to your previous branch with <code>git checkout -</code>. This eliminates the need to manually recall branch names and is</p> git github opensource programming Anjan Karmakar Thu, 02 May 2024 16:14:15 +0000 https://forem.com/47anjan/magic-of-keyof-and-typeof-in-typescript-43ma https://forem.com/47anjan/magic-of-keyof-and-typeof-in-typescript-43ma <p>Ever get stuck writing out long unions for component props based on an object? There's a cleaner way! </p> <p>This post explores using <code>keyof</code> and <code>typeof</code> to automatically generate type unions from object keys for your React components. </p> <p><strong>The Problem:</strong></p> <p>Let's say you have a button component with different variants based on classNames:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">classNamesMap</span> <span class="o">=</span> <span class="p">{</span> <span class="na">primary</span><span class="p">:</span> <span class="dl">"</span><span class="s2">bg-blue-500 text-white</span><span class="dl">"</span><span class="p">,</span> <span class="na">secondary</span><span class="p">:</span> <span class="dl">"</span><span class="s2">bg-gray-200 text-black</span><span class="dl">"</span><span class="p">,</span> <span class="na">success</span><span class="p">:</span> <span class="dl">"</span><span class="s2">bg-green-500 text-white</span><span class="dl">"</span><span class="p">,</span> <span class="p">};</span> <span class="c1">// This approach is tedious and error-prone</span> <span class="nx">type</span> <span class="nx">ButtonProps</span> <span class="o">=</span> <span class="p">{</span> <span class="na">variant</span><span class="p">:</span> <span class="dl">"</span><span class="s2">primary</span><span class="dl">"</span> <span class="o">|</span> <span class="dl">"</span><span class="s2">secondary</span><span class="dl">"</span> <span class="o">|</span> <span class="dl">"</span><span class="s2">success</span><span class="dl">"</span><span class="p">;</span> <span class="p">};</span> </code></pre> </div> <p><strong>The Solution: Leverage <code>keyof</code> and <code>typeof</code>!</strong></p> <p>Here's how to achieve the same functionality with cleaner code:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// Get the type of classNamesMap</span> <span class="nx">type</span> <span class="nx">ClassNamesMapType</span> <span class="o">=</span> <span class="k">typeof</span> <span class="nx">classNamesMap</span><span class="p">;</span> <span class="c1">// Use keyof to create a union type from the object's keys</span> <span class="nx">type</span> <span class="nx">ButtonProps</span> <span class="o">=</span> <span class="p">{</span> <span class="na">variant</span><span class="p">:</span> <span class="nx">keyof</span> <span class="nx">ClassNamesMapType</span><span class="p">;</span> <span class="c1">// variant: "primary" | "secondary" | "success"</span> <span class="p">};</span> </code></pre> </div> <p>With typeof you will be able to get the type of your object, and with keyof you will be able to create union types based on the keys of your object.</p> <p><strong>Benefits:</strong></p> <ul> <li> <strong>Reduced Code:</strong> No more manually typing out unions!</li> <li> <strong>Improved Type Safety:</strong> TypeScript automatically enforces valid variants.</li> <li> <strong>Maintainability:</strong> Changes to <code>classNamesMap</code> are reflected in <code>ButtonProps</code>.</li> </ul> <p><strong>Bonus:</strong> </p> <ul> <li>Use this approach for any component prop based on an object of key-value pairs.</li> </ul> <p><strong>Spread the Knowledge!</strong></p> <p>Share this post with your fellow developers and elevate your React component typing game! </p> webdev typescript programming react Anjan Karmakar Sun, 21 Jan 2024 13:07:24 +0000 https://forem.com/47anjan/why-react-re-renders-4bao https://forem.com/47anjan/why-react-re-renders-4bao <h4> <strong>Why React Re-Renders?</strong> </h4> <ul> <li>Start with a fundamental every re-render in React starts with a state change.</li> <li>Re-renders only affect the component that owns the state + its descendants (if any).</li> <li>Some developers believe that a component will re-render because its props change, although that is a valid reason, it is not quite true when a component renders it all descends also re-renders, regardless of whether the descends components have props or not (pure components). The descends components can be exported with React.memo to prevent unnecessary re-rendering. If any pure components have props as a static value (object or function) you can use useMemo or useCallback hook to prevent re-rendering.</li> <li>Now What about context? Though some components have no props, if it uses a value form useContext If that state variable changes, a re-render will occur.</li> </ul> <p>These are the fundamentals of React and why it re-renders. </p> <p>If any of the points are incorrect, please feel free to correct me, as I am also learning, and I have learned this through reading many blogs and articles.</p> <p>Thank you for your attention 🙂</p> react webdev javascript programming Anjan Karmakar Fri, 01 Dec 2023 12:00:29 +0000 https://forem.com/47anjan/understanding-event-delegation-13kf https://forem.com/47anjan/understanding-event-delegation-13kf <p>Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The listener will fire whenever the event is triggered on the descendant elements due to event bubbling up the DOM. The benefits of this technique are:</p> <ul> <li><p>Memory footprint goes down because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant.</p></li> <li><p>There is no need to unbind the handler from elements that are removed and to bind the event for new elements.</p></li> </ul> <p><a href="https://davidwalsh.name/event-delegate" rel="noopener noreferrer">References</a></p> javascript webdev frontend interview Anjan Karmakar Fri, 20 Oct 2023 03:47:28 +0000 https://forem.com/47anjan/mastering-javascript-promises-all-allsettled-race-any-2b1d https://forem.com/47anjan/mastering-javascript-promises-all-allsettled-race-any-2b1d <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdy9m3jpsefpkzkwse0lb.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdy9m3jpsefpkzkwse0lb.jpg" alt="Image description" width="800" height="341"></a></p> <p>JavaScript Promise APIs revolutionize how we manage asynchronous operations in JavaScript, offering a structured and efficient approach. In this article, we will delve into four crucial Promise APIs: Promise.all, Promise.allSettled, Promise.race, and Promise.any.</p> <p><strong>Promise.all: Managing Concurrent Operations</strong></p> <p>Promise.all is your go-to choice when you need to perform multiple parallel API calls simultaneously, such as fetching data for 10 different users using 10 unique IDs. This method takes an array of promises as input and initiates multiple API calls concurrently.</p> <p>If you provide it with promises P1, P2, and P3, it will make these three parallel API calls and collect the results in an array. It waits for all three to complete, taking, for example, 3 seconds, and then returns the results.</p> <p><strong>Handling Failures with Promise.all</strong></p> <p>Should any of the promises in the array get rejected, Promise.all responds by throwing an error, matching the error type and message of the first rejected promise. Even if the others are pending, it quickly reports the error, illustrating how it operates.</p> <p>Remember that promises are immutable; they will either resolve or reject but cannot be canceled. The promise chain does not wait for all promises to succeed; if any fail, the entire collection fails. So, all promises will either succeed or fail, with an error thrown after 1 second in case of failure.</p> <p>If two seconds promises are rejected, the first rejection takes precedence, and the second one immediately returns the error. If you only need results from successful promises, Promise.all is the way to go.</p> <p><strong>Promise.allSettled: Comprehensive Promise Handling</strong></p> <p>When all promises fulfill, the output remains the same as when all promises succeed. However, if any promise gets rejected, the output changes. For instance, if there are three promises, one for success, one for error, and one for success again, any failure results in an immediate response. But if all three fail, it waits for all three and responds accordingly.</p> <p>If you need the results from all API calls to display a webpage, choose Promise.all. If you want to process results even if some promises fail, go for Promise.allSettled.</p> <p><strong>Promise.race: Optimized Execution</strong></p> <p>Promise.race, the third API, returns a value as soon as the first promise resolves, allowing for optimized execution. If the first promise succeeds, it immediately returns the value. If the second promise fails, it returns the error of the first settled promise after 1 second. If P3 fails after 2 seconds, it throws an error without waiting for the others to finish.</p> <p><strong>Managing Promise Resolution with Promise.any</strong></p> <p>Promise.any, the last API, waits for the first successful promise before returning its result. If the first promise gets rejected, it doesn't respond until 1 second has passed. If one of the promises succeeds, it returns that result. If all API calls fail, it aggregates all the errors into an array. However, if all fail, it returns an aggregate error after 1 second.</p> <p>Now that you understand these cases, let's move on to the code. I'll show you how to write and use these promises effectively.</p> <p><strong>Summary of Promise APIs</strong></p> <p>To recap:</p> <ul> <li>Promise.all takes an array of promises and returns an array of results if they all succeed, failing fast if any of them fail.</li> <li>Promise.race returns a result as soon as the first promise settles.</li> <li>Promise.any waits for the first successful promise to return its result, ignoring failures unless all promises fail.</li> <li>Promise.allSettled handles a mix of fulfilled and rejected promises gracefully.</li> </ul> <p><strong>Interview Questions + Clarifying Terminology: Settle, Resolve, Reject, Fulfilled</strong></p> <p>In interviews, remember that the first settled promise, whether successful or not, wins the race. Understanding the nuances of terminology, like resolved or rejected and fulfilled or rejected, is essential.</p> <p>Recognize that settling can be either a failure or a success, and a promise is generally said to be fulfilled or rejected. By grasping these nuances, you'll be better prepared for interviews and deepen your understanding of JavaScript Promise APIs.</p> javascript webdev frontend programming Anjan Karmakar Thu, 31 Aug 2023 02:29:31 +0000 https://forem.com/47anjan/mastering-event-debouncing-in-javascript-a-guide-with-practical-example-19oe https://forem.com/47anjan/mastering-event-debouncing-in-javascript-a-guide-with-practical-example-19oe <p>Debouncing is a technique used to control how often a particular function is executed in response to frequent events. It ensures that the function is called only after a certain amount of time has passed since the last event. In this blog, we'll explore the concept of debouncing and demonstrate its implementation using a practical example in JavaScript.</p> <p>Understanding Debouncing</p> <p>Imagine a search bar on a webpage that fetches search results as the user types. Without debouncing, every keystroke triggers a new search request, potentially overwhelming the server and causing unnecessary network traffic. Debouncing addresses this problem by delaying the execution of the function until the user has finished typing.</p> <p>Debouncing involves setting a timer that delays the function execution. If another event occurs before the timer expires, the timer is reset. This ensures that the function only fires after a certain quiet period.</p> <p>Practical Example: Implementing Debounce in JavaScript</p> <p>Let's dive into a practical example to demonstrate how to implement debouncing using JavaScript. We'll use the provided code as a starting point and explain each component.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">searchInput</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">search</span><span class="dl">"</span><span class="p">);</span> <span class="kd">function</span> <span class="nf">getData</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Fetching data.... </span><span class="dl">"</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">debounceFun</span><span class="p">(</span><span class="nx">getData</span><span class="p">,</span> <span class="nx">delay</span><span class="p">)</span> <span class="p">{</span> <span class="kd">let</span> <span class="nx">time</span><span class="p">;</span> <span class="k">return </span><span class="p">(...</span><span class="nx">args</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="kd">let</span> <span class="nb">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span> <span class="k">if </span><span class="p">(</span><span class="nx">time</span><span class="p">)</span> <span class="nf">clearTimeout</span><span class="p">(</span><span class="nx">time</span><span class="p">);</span> <span class="nx">time</span> <span class="o">=</span> <span class="nf">setTimeout</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nx">getData</span><span class="p">.</span><span class="nf">apply</span><span class="p">(</span><span class="nb">self</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span> <span class="p">},</span> <span class="nx">delay</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">);</span> <span class="p">};</span> <span class="p">}</span> <span class="kd">const</span> <span class="nx">optimizeFun</span> <span class="o">=</span> <span class="nf">debounceFun</span><span class="p">(</span><span class="nx">getData</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span> <span class="nx">searchInput</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">keyup</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nf">optimizeFun</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span> <span class="p">});</span> </code></pre> </div> <p>In this example, we have a search input element and a <code>getData</code> function that simulates fetching data based on the search query.</p> <ol> <li>The <code>debounceFun</code> function takes two arguments: the function to be debounced (<code>getData</code>) and a delay in seconds (<code>delay</code>).</li> <li>Inside the <code>debounceFun</code>, a closure is returned. This closure maintains a reference to the <code>time</code> variable, which stores the timer ID.</li> <li>When an event occurs (in this case, a <code>keyup</code> event on the search input), the <code>optimizeFun</code> (debounced version of <code>getData</code>) is called with the search value.</li> <li>Inside the <code>optimizeFun</code>, the existing timer is cleared using <code>clearTimeout</code> if it exists. Then, a new timer is set using <code>setTimeout</code>.</li> <li>The timer delays the execution of the <code>getData</code> function until the specified <code>delay</code> has passed since the last event.</li> </ol> <p>Benefits of Debouncing:</p> <ol> <li> <strong>Reduced Function Calls:</strong> Debouncing ensures that a function is called only after a pause in events, preventing excessive function calls and improving performance.</li> <li> <strong>Optimized Network Requests:</strong> For actions like search suggestions or fetching data, debouncing can help minimize the number of requests sent to the server.</li> <li> <strong>Enhanced User Experience:</strong> By avoiding rapid and unnecessary updates, debouncing creates a smoother user experience.</li> </ol> webdev javascript interview frontend Anjan Karmakar Wed, 30 Aug 2023 15:53:13 +0000 https://forem.com/47anjan/infinite-scrolling-in-react-a-comprehensive-guide-2o05 https://forem.com/47anjan/infinite-scrolling-in-react-a-comprehensive-guide-2o05 <p><strong>Implementing Infinite Scrolling in React</strong></p> <p>Infinite scrolling is a powerful technique used to enhance user experience when dealing with long lists of content. Rather than displaying all the data at once and overwhelming the user, infinite scrolling loads more content as the user scrolls down the page. In this article, we'll explore how to implement infinite scrolling in a React application, using a combination of state management, event listeners, and conditional rendering.</p> <h2> Getting Started </h2> <p>To implement infinite scrolling, we'll start by creating a component that displays a list of items. We'll name this component <code>InfiniteScrollList</code>.</p> <h3> State Management </h3> <p>First, set up the necessary state to track the current page or offset. This is crucial for determining which set of items to load next. We'll use React's <code>useState</code> and <code>useEffect</code> hooks for this.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight jsx"><code><span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">useState</span><span class="p">,</span> <span class="nx">useEffect</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="kd">function</span> <span class="nf">InfiniteScrollList</span><span class="p">()</span> <span class="p">{</span> <span class="kd">const</span> <span class="p">[</span><span class="nx">items</span><span class="p">,</span> <span class="nx">setItems</span><span class="p">]</span> <span class="o">=</span> <span class="nf">useState</span><span class="p">([]);</span> <span class="kd">const</span> <span class="p">[</span><span class="nx">page</span><span class="p">,</span> <span class="nx">setPage</span><span class="p">]</span> <span class="o">=</span> <span class="nf">useState</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> <span class="c1">// Load items whenever the page changes</span> <span class="nf">useEffect</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nf">loadItems</span><span class="p">();</span> <span class="p">},</span> <span class="p">[</span><span class="nx">page</span><span class="p">]);</span> <span class="c1">// Function to load more items</span> <span class="kd">const</span> <span class="nx">loadItems</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="c1">// Implement your logic to fetch more items (e.g., from an API)</span> <span class="c1">// Append the new items to the existing ones</span> <span class="c1">// Update the state using setItems</span> <span class="p">};</span> <span class="c1">// ...</span> <span class="p">}</span> </code></pre> </div> <h3> Scroll Event Listener </h3> <p>Next, add a scroll event listener to the <code>window</code> object to detect when the user reaches the bottom of the page. This is the trigger for loading more items.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight jsx"><code><span class="nf">useEffect</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">handleScroll</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="c1">// Calculate how close the user is to the bottom</span> <span class="kd">const</span> <span class="nx">scrollPosition</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span> <span class="o">+</span> <span class="nb">window</span><span class="p">.</span><span class="nx">scrollY</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">scrollMax</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">offsetHeight</span><span class="p">;</span> <span class="k">if </span><span class="p">(</span><span class="nx">scrollPosition</span> <span class="o">&gt;=</span> <span class="nx">scrollMax</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// User has reached the bottom, load more items</span> <span class="nf">setPage</span><span class="p">(</span><span class="nx">page</span> <span class="o">+</span> <span class="mi">1</span><span class="p">);</span> <span class="p">}</span> <span class="p">};</span> <span class="nb">window</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">scroll</span><span class="dl">'</span><span class="p">,</span> <span class="nx">handleScroll</span><span class="p">);</span> <span class="c1">// Clean up the event listener when the component unmounts</span> <span class="k">return </span><span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nb">window</span><span class="p">.</span><span class="nf">removeEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">scroll</span><span class="dl">'</span><span class="p">,</span> <span class="nx">handleScroll</span><span class="p">);</span> <span class="p">};</span> <span class="p">},</span> <span class="p">[</span><span class="nx">page</span><span class="p">]);</span> </code></pre> </div> <h3> Rendering Items </h3> <p>Now, in the <code>render</code> function of your component, map over the <code>items</code> array and render each item.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight jsx"><code><span class="k">return </span><span class="p">(</span> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> <span class="si">{</span><span class="nx">items</span><span class="p">.</span><span class="nf">map</span><span class="p">((</span><span class="nx">item</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">(</span> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">key</span><span class="p">=</span><span class="si">{</span><span class="nx">index</span><span class="si">}</span><span class="p">&gt;</span><span class="si">{</span><span class="cm">/* Render your item here */</span><span class="si">}</span><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> <span class="p">))</span><span class="si">}</span> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> <span class="p">);</span> </code></pre> </div> <h3> Conditional Rendering </h3> <p>To provide a smooth user experience, consider showing a loading indicator while new items are being fetched.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight jsx"><code><span class="k">return </span><span class="p">(</span> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> <span class="si">{</span><span class="nx">items</span><span class="p">.</span><span class="nf">map</span><span class="p">((</span><span class="nx">item</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">(</span> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">key</span><span class="p">=</span><span class="si">{</span><span class="nx">index</span><span class="si">}</span><span class="p">&gt;</span><span class="si">{</span><span class="cm">/* Render your item here */</span><span class="si">}</span><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> <span class="p">))</span><span class="si">}</span> <span class="si">{</span><span class="nx">loading</span> <span class="o">&amp;&amp;</span> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>Loading...<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span><span class="si">}</span> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> <span class="p">);</span> </code></pre> </div> <h2> Conclusion </h2> <p>Implementing infinite scrolling in a React application can significantly improve the way users interact with long lists of content. By progressively loading more items as the user scrolls down, you create a seamless and engaging browsing experience. Keep in mind that while the steps provided here offer a simplified overview, you'll need to tailor the implementation to your specific data fetching logic, error handling, and design requirements.</p> <p>By following the techniques outlined in this guide, you can effortlessly create a dynamic and user-friendly application that keeps users engaged without overwhelming them with excessive content all at once.</p> webdev javascript react interview Anjan Karmakar Mon, 28 Aug 2023 14:07:28 +0000 https://forem.com/47anjan/embracing-the-future-progressive-web-apps-pwas-unveiled-58lb https://forem.com/47anjan/embracing-the-future-progressive-web-apps-pwas-unveiled-58lb <p>In an age where digital experiences are seamlessly intertwined with our lives, the emergence of Progressive Web Apps (PWAs) marks a significant milestone in the evolution of web applications. PWAs bring together the best of both web and mobile apps, offering an immersive and dynamic user experience that transcends traditional boundaries. Let's delve into the world of PWAs and uncover how they're reshaping our digital interactions.</p> <h2> The Fusion of Web and Apps </h2> <p>Progressive Web Apps, often referred to as PWAs, represent a groundbreaking convergence of web and native app technologies. These applications are designed to embody the qualities we value most in both platforms. Here's what sets PWAs apart:</p> <h3> Progressive Enhancement </h3> <p>PWAs ensure universal access, catering to every user regardless of their device or browser. The principle of progressive enhancement is at the core of their design, ensuring inclusivity.</p> <h3> Responsive Design </h3> <p>Adaptability is key. PWAs seamlessly adjust to diverse screen sizes, offering a consistent and enjoyable experience on smartphones, tablets, and desktops alike.</p> <h3> App-Like Features </h3> <p>PWAs blur the lines between websites and native apps by delivering features such as offline access, push notifications, and installability on users' devices.</p> <h3> Always Up-to-Date </h3> <p>Unlike traditional apps that necessitate time-consuming updates, PWAs can be effortlessly deployed, guaranteeing users have access to the latest features.</p> <h3> Speed and Performance </h3> <p>Leveraging cutting-edge web technologies, PWAs load swiftly and perform seamlessly, elevating user satisfaction.</p> <h3> Engaging Interactions </h3> <p>Features like push notifications and app shortcuts keep users engaged, fostering a deeper connection with the application.</p> <h3> Shareable and Secure </h3> <p>PWAs can be conveniently shared via URLs, ensuring accessibility. Moreover, they're served over HTTPS, prioritizing security.</p> <h2> Under the Hood: Technologies Powering PWAs </h2> <p>The brilliance of PWAs is underpinned by a trio of powerful technologies:</p> <h3> Web App Manifest </h3> <p>A JSON file defines the app's characteristics, enabling users to install PWAs on their home screens, akin to native apps.</p> <h3> Service Workers </h3> <p>These background scripts empower PWAs to deliver advanced functionalities like push notifications, offline support, and background synchronization.</p> <h3> Caching APIs </h3> <p>Utilizing APIs like Cache Storage and Cache API, PWAs can cache resources, enabling offline access and enhancing performance.</p> <h2> Unveiling the Benefits of PWAs </h2> <p>PWAs offer a multitude of advantages that cater to the modern digital landscape:</p> <h3> Unified Experience </h3> <p>Blending the finest attributes of both web and native apps, PWAs provide a unified, engaging, and fluid user experience.</p> <h3> Streamlined Development </h3> <p>Developing and deploying PWAs often requires less complexity compared to traditional native app development.</p> <h3> Cross-Platform Accessibility </h3> <p>With PWAs, the need for separate apps for various operating systems diminishes, reaching a wider audience.</p> <h3> App Store Bypass </h3> <p>Say goodbye to intricate app store approvals. PWAs allow you to release updates swiftly and efficiently.</p> <h3> Instant Updates </h3> <p>Users instantly access the latest features, as PWAs seamlessly update in the background.</p> <h2> Real-World PWA Champions </h2> <p>Leading brands have embraced PWAs to elevate their user experiences. Notable examples include Google Maps, Pinterest, Twitter Lite, and Instagram.</p> <h2> Joining the PWA Revolution </h2> <p>As we venture further into an era where connectivity and user engagement define success, embracing PWAs holds the key to staying ahead of the curve. The realms of web and apps have converged, and PWAs are at the forefront of this transformation.</p> <p>This article is your gateway to understanding and exploring the dynamic world of PWAs. Feel free to dive in, contribute, and become a part of the PWA revolution. The future of digital interactions has arrived, and it's exhilarating.</p> pwa frontend webdev mobile Anjan Karmakar Mon, 28 Aug 2023 03:36:22 +0000 https://forem.com/47anjan/standing-out-as-a-front-end-developer-mastering-the-art-of-web-innovation-38jd https://forem.com/47anjan/standing-out-as-a-front-end-developer-mastering-the-art-of-web-innovation-38jd <p>In the fast-paced world of web development, being a proficient front-end developer is just the starting point. To truly excel and seize remarkable opportunities, it's crucial to stand out from the crowd. This README offers insights and strategies to help you shine as a front-end developer and make your mark in the industry.</p> <h2> Table of Contents </h2> <ul> <li>Solidify Your Fundamentals</li> <li>Meticulous Attention to Design</li> <li>Responsive and Mobile-First Approach</li> <li>Embrace JavaScript Frameworks</li> <li>Continuous Learning and Upgrading</li> <li>Version Control and Collaboration</li> <li>Performance Optimization</li> <li>Soft Skills and Effective Communication</li> <li>Build an Impressive Portfolio</li> <li>Create Valuable Content</li> </ul> <h2> Solidify Your Fundamentals </h2> <p>Master the core technologies – HTML, CSS, and JavaScript. Stay updated with the latest specifications and advanced techniques. A strong grasp of the fundamentals ensures you create efficient, accessible, and visually appealing web applications.</p> <h2> Meticulous Attention to Design </h2> <p>Understanding UX and UI design principles bridges the gap between designers and developers. Craft pixel-perfect interfaces, maintain design patterns, and deliver superior end products by merging development and design perspectives.</p> <h2> Responsive and Mobile-First Approach </h2> <p>Prioritize mobile design and create responsive layouts that adapt to various screen sizes and devices. Embrace the mobile-first approach to provide seamless user experiences across the digital landscape.</p> <h2> Embrace JavaScript Frameworks </h2> <p>Master popular frameworks like React, Angular, or Vue.js to build dynamic and interactive web applications. Component-based architecture, state management, and routing are your allies in creating robust projects.</p> <h2> Continuous Learning and Upgrading </h2> <p>Stay updated with the latest trends, tools, and best practices. Engage with communities, follow influential blogs, and participate in events. Embrace change and new technologies to keep your skills relevant.</p> <h2> Version Control and Collaboration </h2> <p>Proficiency in version control systems like Git is essential. Collaborate effectively by using platforms like GitHub to manage codebase changes and work seamlessly with teams.</p> <h2> Performance Optimization </h2> <p>Prioritize website speed and performance by implementing techniques like code splitting and lazy loading. Optimizing assets showcases your commitment to delivering fast-loading and efficient web applications.</p> <h2> Soft Skills and Effective Communication </h2> <p>Develop strong soft skills such as communication, teamwork, and problem-solving. Effective collaboration with cross-functional teams and the ability to translate technical concepts into understandable terms are key differentiators.</p> <h2> Build an Impressive Portfolio </h2> <p>Curate a diverse portfolio showcasing your skills, creativity, and problem-solving abilities. Personal and passion projects demonstrate your capabilities beyond standard assignments.</p> <h2> Create Valuable Content </h2> <p>Share your expertise through blogging, tutorials, or videos on platforms like Hashnode, Medium, or YouTube. By creating valuable content, you establish yourself as an authority in the field and contribute to the developer community.</p> <p>In conclusion, becoming an exceptional front-end developer goes beyond technical mastery. By embracing design principles, continuous learning, collaboration, and effective communication, you can carve a niche for yourself in the dynamic world of front-end development. Create memorable user experiences, showcase your skills, and stand out as a true innovator in the industry.</p> frontend softwareengineering webdev programming Anjan Karmakar Sat, 26 Aug 2023 13:53:24 +0000 https://forem.com/47anjan/building-a-custom-hook-to-track-users-onlineoffline-status-in-react-12h6 https://forem.com/47anjan/building-a-custom-hook-to-track-users-onlineoffline-status-in-react-12h6 <p>In today's digitally connected world, understanding the user's online or offline status within a web application is becoming increasingly important. Whether you need to deliver real-time updates, enhance user experience, or manage data synchronization, having insights into the user's connectivity can be pivotal. In this guide, we will walk you through the process of creating a custom React hook that effortlessly tracks a user's online or offline status.</p> <h2> Table of Contents </h2> <ul> <li>Introduction</li> <li>Understanding the Code</li> <li>Using the Custom Hook</li> <li>Conclusion</li> </ul> <h2> Introduction </h2> <p>With the internet being an integral part of modern life, web applications often need to adapt to users' varying connectivity. Imagine a chat application where you need to show when a user is online or offline, or an online document editor that needs to synchronize changes in real time. These scenarios illustrate the significance of knowing whether a user is currently online or offline. This guide will walk you through creating a custom React hook, <code>useOnline</code>, that addresses this need effectively.</p> <h2> Understanding the Code </h2> <p>Let's delve into the code you've provided and break it down step by step:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight jsx"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">useState</span><span class="p">,</span> <span class="nx">useEffect</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react</span><span class="dl">"</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">useOnline</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="kd">const</span> <span class="p">[</span><span class="nx">isOnline</span><span class="p">,</span> <span class="nx">setOnline</span><span class="p">]</span> <span class="o">=</span> <span class="nf">useState</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">handleOnline</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nf">setOnline</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">handleOffline</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nf">setOnline</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span> <span class="nf">useEffect</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nb">document</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">online</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleOnline</span><span class="p">);</span> <span class="nb">document</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">offline</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleOffline</span><span class="p">);</span> <span class="k">return </span><span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nb">document</span><span class="p">.</span><span class="nf">removeEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">online</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleOnline</span><span class="p">);</span> <span class="nb">document</span><span class="p">.</span><span class="nf">removeEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">offline</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleOffline</span><span class="p">);</span> <span class="p">};</span> <span class="p">},</span> <span class="p">[]);</span> <span class="k">return</span> <span class="nx">isOnline</span><span class="p">;</span> <span class="p">};</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">useOnline</span><span class="p">;</span> </code></pre> </div> <ol> <li> <p><strong>Importing Dependencies</strong>:</p> <ul> <li>The code begins by importing essential dependencies from the React library: <code>useState</code> and <code>useEffect</code>. These hooks are fundamental for managing state and side effects within functional components.</li> </ul> </li> <li> <p><strong>Defining the Custom Hook</strong>:</p> <ul> <li>The custom hook, <code>useOnline</code>, is crafted using the concise arrow function syntax. This hook serves to determine whether the user is presently online or offline.</li> </ul> </li> <li> <p><strong>Initializing State</strong>:</p> <ul> <li>Within the hook, a state variable <code>isOnline</code> is initialized using the <code>useState</code> hook. Its default value is <code>false</code>, assuming the user starts in an offline state.</li> </ul> </li> <li> <p><strong>Defining Event Handlers</strong>:</p> <ul> <li>Two event handler functions, <code>handleOnline</code> and <code>handleOffline</code>, are defined. These functions update the <code>isOnline</code> state based on the online and offline events, respectively.</li> </ul> </li> <li> <p><strong>Setting Up Event Listeners</strong>:</p> <ul> <li>The <code>useEffect</code> hook is employed to attach event listeners to the <code>online</code> and <code>offline</code> events on the <code>document</code> object. These listeners respond to changes in the user's connectivity status.</li> </ul> </li> <li> <p><strong>Cleaning Up Event Listeners</strong>:</p> <ul> <li>To prevent memory leaks, the <code>useEffect</code> hook returns a cleanup function. This function removes the event listeners when the component using the hook is unmounted.</li> </ul> </li> <li> <p><strong>Return Statement</strong>:</p> <ul> <li>The hook's return statement provides the <code>isOnline</code> state variable. This allows components using the hook to access the current online status of the user.</li> </ul> </li> </ol> <h2> Using the Custom Hook </h2> <p>Now that we've dissected the code, let's demonstrate how to integrate this custom hook into your components:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight jsx"><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react</span><span class="dl">"</span><span class="p">;</span> <span class="k">import</span> <span class="nx">useOnline</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">./useOnline</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// Adjust the import path as needed</span> <span class="kd">const</span> <span class="nx">OnlineStatus</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">isOnline</span> <span class="o">=</span> <span class="nf">useOnline</span><span class="p">();</span> <span class="k">return </span><span class="p">(</span> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>You are currently <span class="si">{</span><span class="nx">isOnline</span> <span class="p">?</span> <span class="dl">"</span><span class="s2">online</span><span class="dl">"</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">offline</span><span class="dl">"</span><span class="si">}</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> <span class="p">);</span> <span class="p">};</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">OnlineStatus</span><span class="p">;</span> </code></pre> </div> <p>In this example, a new component named <code>OnlineStatus</code> is created. Within this component, the <code>useOnline</code> hook is harnessed to ascertain the user's current online status. Based on the value of <code>isOnline</code>, an appropriate message is displayed.</p> <h2> Conclusion </h2> <p>Developing custom hooks in React can significantly enhance code reusability and organization. The <code>useOnline</code> hook we've constructed empowers you to seamlessly track user online or offline status, offering valuable insights to optimize your application's behavior. Whether you're building a dynamic chat platform, a collaborative document editor, or any innovative application, this custom hook can serve as a valuable asset in your development toolkit. Embrace the power of custom hooks to create more efficient and effective React applications.</p> react javascript webdev frontend