<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Dushyant Singh Rao</title>
    <description>The latest articles on DEV Community by Dushyant Singh Rao (@dushyant_singhrao_08).</description>
    <link>https://dev.to/dushyant_singhrao_08</link>
    <image>
      <url>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%2F2974585%2F7de77403-fba2-4138-83e8-0379d96e4872.jpg</url>
      <title>DEV Community: Dushyant Singh Rao</title>
      <link>https://dev.to/dushyant_singhrao_08</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/dushyant_singhrao_08"/>
    <language>en</language>
    <item>
      <title>Comparing `std::set` and `std::unordered_set` in C++</title>
      <dc:creator>Dushyant Singh Rao</dc:creator>
      <pubDate>Thu, 03 Jul 2025 06:22:40 +0000</pubDate>
      <link>https://dev.to/dushyant_singhrao_08/comparing-stdset-and-stdunorderedset-in-c-29gg</link>
      <guid>https://dev.to/dushyant_singhrao_08/comparing-stdset-and-stdunorderedset-in-c-29gg</guid>
      <description>&lt;p&gt;import Image from 'next/image'&lt;/p&gt;

&lt;h2&gt;
  
  
  🚀 Introduction
&lt;/h2&gt;

&lt;p&gt;C++ gives you two powerful tools to store unique values: &lt;code&gt;std::set&lt;/code&gt; and &lt;code&gt;std::unordered_set&lt;/code&gt;. Both avoid duplicates, but the way they work under the hood—and how fast they are—differs quite a bit.&lt;/p&gt;

&lt;p&gt;This post breaks down the differences in a way that’s easy to understand. Whether you’re coding for performance or clarity, you’ll know exactly which one to choose by the end.&lt;/p&gt;




&lt;h2&gt;
  
  
  🏗️ Under the Hood: How They Work
&lt;/h2&gt;

&lt;h3&gt;
  
  
  🔧 &lt;code&gt;std::set&lt;/code&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Internally built on a &lt;strong&gt;Red-Black Tree&lt;/strong&gt;, which is a kind of balanced binary search tree.&lt;/li&gt;
&lt;li&gt;Automatically keeps elements &lt;strong&gt;sorted&lt;/strong&gt; in ascending order.&lt;/li&gt;
&lt;li&gt;All basic operations—&lt;code&gt;insert&lt;/code&gt;, &lt;code&gt;find&lt;/code&gt;, &lt;code&gt;erase&lt;/code&gt;—run in &lt;strong&gt;O(log n)&lt;/strong&gt; time.&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;Imagine a bookshelf where books are always arranged in alphabetical order. That’s how &lt;code&gt;std::set&lt;/code&gt; behaves.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  ⚡ &lt;code&gt;std::unordered_set&lt;/code&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Uses a &lt;strong&gt;hash table&lt;/strong&gt; under the hood.&lt;/li&gt;
&lt;li&gt;Doesn't guarantee any specific order of elements.&lt;/li&gt;
&lt;li&gt;Offers &lt;strong&gt;average-case O(1)&lt;/strong&gt; time for inserts, lookups, and deletions.&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;Think of it like tossing items into labeled bins. You can grab them quickly, but they're not arranged in any particular order.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  👍 Pros &amp;amp; 👎 Cons
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Feature&lt;/th&gt;
&lt;th&gt;
&lt;code&gt;std::set&lt;/code&gt; (Red-Black Tree)&lt;/th&gt;
&lt;th&gt;
&lt;code&gt;std::unordered_set&lt;/code&gt; (Hash Table)&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Time Complexity&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;O(log n) — consistent and predictable&lt;/td&gt;
&lt;td&gt;O(1) average, O(n) worst-case (collisions)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Element Order&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Maintains ascending order&lt;/td&gt;
&lt;td&gt;No order guaranteed&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Memory Usage&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;More efficient in memory&lt;/td&gt;
&lt;td&gt;Slightly heavier due to hash buckets&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Supports Range Ops?&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Yes — lower/upper bounds, etc.&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Security&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Safe from DoS via hash attacks&lt;/td&gt;
&lt;td&gt;Vulnerable if custom hash is poor&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Custom Key Support&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Works if &lt;code&gt;&amp;lt;&lt;/code&gt; is defined&lt;/td&gt;
&lt;td&gt;Needs &lt;code&gt;std::hash&lt;/code&gt; + &lt;code&gt;==&lt;/code&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  🧪 Performance in Real Life
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;For &lt;strong&gt;small datasets&lt;/strong&gt;, &lt;code&gt;std::set&lt;/code&gt; can actually be faster because it avoids hash setup overhead.&lt;/li&gt;
&lt;li&gt;For &lt;strong&gt;large datasets&lt;/strong&gt;, &lt;code&gt;std::unordered_set&lt;/code&gt; shines with blazing fast average-time operations.&lt;/li&gt;
&lt;li&gt;If you're working in &lt;strong&gt;real-time systems&lt;/strong&gt;, &lt;code&gt;std::set&lt;/code&gt; is more reliable thanks to its consistent performance.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Example Benchmark:
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcpp-tip-of-the-day.blogspot.com%2F2013%2F11%2Fhow-does-stdunorderedset-compare-to.html" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcpp-tip-of-the-day.blogspot.com%2F2013%2F11%2Fhow-does-stdunorderedset-compare-to.html" alt="Benchmark Comparison" width="" height=""&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  🧩 Quick Code Comparison
&lt;/h2&gt;

&lt;h3&gt;
  
  
  &lt;code&gt;std::set&lt;/code&gt; Example
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight cpp"&gt;&lt;code&gt;&lt;span class="cp"&gt;#include&lt;/span&gt; &lt;span class="cpf"&gt;&amp;lt;set&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;
&lt;/span&gt;&lt;span class="n"&gt;std&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="n"&gt;set&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="n"&gt;s&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;insert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="n"&gt;s&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;insert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="n"&gt;s&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;insert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// Automatically sorted: 1, 3, 5&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;code&gt;std::unordered_set&lt;/code&gt; Example
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight cpp"&gt;&lt;code&gt;&lt;span class="cp"&gt;#include&lt;/span&gt; &lt;span class="cpf"&gt;&amp;lt;unordered_set&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;
&lt;/span&gt;&lt;span class="n"&gt;std&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="n"&gt;unordered_set&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;us&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="n"&gt;us&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;insert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="n"&gt;us&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;insert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="n"&gt;us&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;insert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// No guaranteed order: could be 5, 1, 3&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  When Should You Use Each?
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Use &lt;code&gt;std::set&lt;/code&gt; when:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;You care about the elements being &lt;strong&gt;sorted&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;You need functions like &lt;code&gt;lower_bound()&lt;/code&gt; or &lt;code&gt;upper_bound()&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;You’re in a &lt;strong&gt;real-time&lt;/strong&gt; or &lt;strong&gt;security-sensitive&lt;/strong&gt; environment&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Use &lt;code&gt;std::unordered_set&lt;/code&gt; when:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;You want &lt;strong&gt;maximum performance&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;You’re storing &lt;strong&gt;lots of data&lt;/strong&gt; and don’t care about order&lt;/li&gt;
&lt;li&gt;You’ve defined good hash functions (or are using built-in types)&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;std::set&lt;/code&gt; is perfect when you need order, reliability, and predictability. It's slower than its counterpart, but consistent.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;std::unordered_set&lt;/code&gt; is the go-to for raw speed and high-performance applications—just make sure you understand its hash-based limitations.&lt;/p&gt;




&lt;p&gt;Need more STL breakdowns like this? Let me know which container you'd like explained next!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>HTTP for beginner</title>
      <dc:creator>Dushyant Singh Rao</dc:creator>
      <pubDate>Fri, 11 Apr 2025 19:11:56 +0000</pubDate>
      <link>https://dev.to/dushyant_singhrao_08/http-for-beginner-4jcl</link>
      <guid>https://dev.to/dushyant_singhrao_08/http-for-beginner-4jcl</guid>
      <description>&lt;p&gt;http are just a set of protocols &lt;/p&gt;

&lt;p&gt;state less protocol :&lt;br&gt;
   every time you visit a page, you are a new user.&lt;/p&gt;

&lt;p&gt;session : stored state between frontend and backend&lt;br&gt;
cookie : Is just a information &lt;/p&gt;

&lt;p&gt;I need to send data to browser form server&lt;br&gt;
http Header: client&lt;br&gt;
             Browser Info&lt;br&gt;
             date time&lt;br&gt;
             cookie to store&lt;/p&gt;

&lt;p&gt;request response architecture:&lt;br&gt;
      browser ---------------&amp;gt; server&lt;br&gt;
     (GET,POST)--&amp;gt;         &amp;lt;--(200,404)&lt;/p&gt;

&lt;p&gt;response code [ 200, 404 ]&lt;br&gt;
      -&amp;gt;what action to perform  (GET,POST,DELETE)&lt;br&gt;
      -&amp;gt;where to perform "&lt;a href="http://example.com/auth" rel="noopener noreferrer"&gt;http://example.com/auth&lt;/a&gt;&lt;br&gt;
      -&amp;gt;was it done&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;HTTP/2:&lt;/strong&gt; &lt;br&gt;
 http means http2&lt;br&gt;
       http/1.1 is a fallback(substitute) &amp;amp; is still used&lt;br&gt;
uses compressions&lt;br&gt;
uses multiplexing (many files at same time)&lt;br&gt;
uses encryption (https)&lt;/p&gt;

&lt;p&gt;In AWS, we don't use http for internal communication &lt;/p&gt;

</description>
    </item>
    <item>
      <title>TCP protocols</title>
      <dc:creator>Dushyant Singh Rao</dc:creator>
      <pubDate>Thu, 10 Apr 2025 11:04:43 +0000</pubDate>
      <link>https://dev.to/dushyant_singhrao_08/tcp-protocols-23ja</link>
      <guid>https://dev.to/dushyant_singhrao_08/tcp-protocols-23ja</guid>
      <description>&lt;p&gt;TCP (Transmission Control Protocol) is a connection-oriented, reliable protocol used to establish a communication channel between two devices, ensuring data is transmitted accurately and in the correct order. It's a crucial part of the TCP/IP protocol suite, working alongside IP (Internet Protocol) to facilitate data transfer over networks.&lt;/p&gt;

&lt;h2&gt;
  
  
  How TCP Works:
&lt;/h2&gt;

&lt;p&gt;Connection Establishment: The sender and receiver establish a connection using the three-way handshake.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdhwctwih5uyi4pdq53c3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdhwctwih5uyi4pdq53c3.png" alt="Image description" width="800" height="388"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Data Segmentation: The sender breaks the data into segments, adds TCP headers, and sends them across the network.&lt;/p&gt;

&lt;p&gt;Data Transmission: IP handles the routing of these segments across the network.&lt;/p&gt;

&lt;p&gt;Reassembly: The receiver reassembles the segments into the original data stream.&lt;/p&gt;

&lt;p&gt;Acknowledgement: TCP uses acknowledgements (ACKs) to confirm that segments have been received correctly, and retransmits lost or corrupted segments.&lt;/p&gt;

&lt;p&gt;Connection Termination: Once the data transmission is complete, the connection is terminated using a four-way handshake&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foimplwvxl0fvbaj8y2fy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foimplwvxl0fvbaj8y2fy.png" alt="Image description" width="800" height="770"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>network</category>
      <category>beginners</category>
    </item>
    <item>
      <title>React Fundamentals</title>
      <dc:creator>Dushyant Singh Rao</dc:creator>
      <pubDate>Wed, 09 Apr 2025 14:23:13 +0000</pubDate>
      <link>https://dev.to/dushyant_singhrao_08/react-fundamentals-5624</link>
      <guid>https://dev.to/dushyant_singhrao_08/react-fundamentals-5624</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;React Basics You Should Know&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Let's begin with understanding how to create elements in React using the &lt;strong&gt;React.createElement&lt;/strong&gt; method.&lt;/p&gt;

&lt;p&gt;As we can see in the example below, the element nested is essentially a virtual representation of a nested HTML structure. In this case, a &lt;/p&gt; contains an &lt;h1&gt; element as its child.

&lt;/h1&gt;
&lt;p&gt;In React, we create such elements using:&lt;br&gt;
&lt;/p&gt;

&lt;pre class="highlight plaintext"&gt;&lt;code&gt;React.createElement('type of tag', { attributes like 'id', 'className' }, children);
&lt;/code&gt;&lt;/pre&gt;



&lt;p&gt;Now, what do you think will happen if we console.log(heading)?&lt;/p&gt;

&lt;p&gt;You might guess that it will print an actual HTML element—but in reality, it logs a JavaScript object that represents that element. This object is what React uses to manage and render the UI efficiently.&lt;/p&gt;

&lt;p&gt;All of this abstraction is handled behind the scenes by React.&lt;/p&gt;

&lt;p&gt;Here’s an example (App.js):&lt;br&gt;
&lt;/p&gt;

&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const nested = 
  React.createElement(
    'div', 
    { id: 'parent' }, 
    React.createElement('h1', { id: 'child' }, 'This is child')
  );

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(nested);
&lt;/code&gt;&lt;/pre&gt;



&lt;h2&gt;
  
  
  JSX Introduction
&lt;/h2&gt;

&lt;p&gt;While **React.createElement **is useful to understand what happens behind the scenes, writing complex UIs using it can quickly become verbose and hard to read. This is where JSX comes in.&lt;/p&gt;

&lt;p&gt;JSX (JavaScript XML) is a syntax extension for JavaScript that looks similar to HTML. It allows you to write UI elements in a more intuitive and readable way.&lt;/p&gt;

&lt;p&gt;Here’s the same example using JSX:&lt;br&gt;
&lt;/p&gt;

&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const nested = (
  &amp;lt;div id="parent"&amp;gt;
    &amp;lt;h1 id="child"&amp;gt;This is child&amp;lt;/h1&amp;gt;
  &amp;lt;/div&amp;gt;
);
&lt;/code&gt;&lt;/pre&gt;



&lt;p&gt;Under the hood, this JSX code is compiled to the same **React.createElement **call you saw earlier:&lt;br&gt;
&lt;/p&gt;

&lt;pre class="highlight plaintext"&gt;&lt;code&gt;React.createElement(
  'div', 
  { id: 'parent' }, 
  React.createElement('h1', { id: 'child' }, 'This is child')
);
&lt;/code&gt;&lt;/pre&gt;



&lt;p&gt;Using JSX makes your code cleaner, especially when you start building components with multiple nested elements.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>react</category>
      <category>basic</category>
      <category>programming</category>
    </item>
    <item>
      <title>connected components</title>
      <dc:creator>Dushyant Singh Rao</dc:creator>
      <pubDate>Sat, 05 Apr 2025 09:46:08 +0000</pubDate>
      <link>https://dev.to/dushyant_singhrao_08/connected-components-5cla</link>
      <guid>https://dev.to/dushyant_singhrao_08/connected-components-5cla</guid>
      <description>&lt;h2&gt;
  
  
  connected components
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;What Are Connected Components?&lt;/strong&gt;&lt;br&gt;
In graph theory, a connected component is a group of nodes where there is a path between any two nodes in the group, and no path exists from nodes in one component to any node in another component.&lt;/p&gt;

&lt;p&gt;If you imagine a social network, a connected component is like a group of people who all know each other, directly or indirectly — but no one in that group knows anyone in a different group.&lt;/p&gt;

&lt;p&gt;In simple language they are groups of connected nodes &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftxpdb6vdmr4omk3d48pv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftxpdb6vdmr4omk3d48pv.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example: Number of Islands (LeetCode 200)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Input:&lt;br&gt;
[&lt;br&gt;
  ['1','1','0','0','0'],&lt;br&gt;
  ['1','1','0','0','0'],&lt;br&gt;
  ['0','0','1','0','0'],&lt;br&gt;
  ['0','0','0','1','1']&lt;br&gt;
]&lt;/p&gt;

&lt;p&gt;'1' represents land&lt;br&gt;
'0' represents water&lt;/p&gt;

&lt;p&gt;They are all in same grid but different chunks of ones can be referred as nodes and collectively in this example as island&lt;/p&gt;

&lt;p&gt;You treat this grid as a graph, where each land cell ('1') is a node, and it’s connected to adjacent land cells (up, down, left, right).&lt;/p&gt;

&lt;p&gt;Your task: Count how many such connected land groups exist.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Solution {
public:
    void bfs(vector&amp;lt;vector&amp;lt;char&amp;gt;&amp;gt;&amp;amp; grid, vector&amp;lt;vector&amp;lt;int&amp;gt;&amp;gt;&amp;amp; visited, int i, int j) {
        int n = grid.size();{% embed  %}
        int m = grid[0].size();
        queue&amp;lt;pair&amp;lt;int, int&amp;gt;&amp;gt; q;
        visited[i][j] = 1;
        q.push({i, j});

        int dx[] = {1, -1, 0, 0};
        int dy[] = {0, 0, 1, -1};

        while (!q.empty()) {
            int x = q.front().first;
            int y = q.front().second;
            q.pop();

            for (int d = 0; d &amp;lt; 4; ++d) {
                int nx = x + dx[d];
                int ny = y + dy[d];

                if (nx &amp;gt;= 0 &amp;amp;&amp;amp; nx &amp;lt; n &amp;amp;&amp;amp; ny &amp;gt;= 0 &amp;amp;&amp;amp; ny &amp;lt; m &amp;amp;&amp;amp;
                    grid[nx][ny] == '1' &amp;amp;&amp;amp; !visited[nx][ny]) {
                    visited[nx][ny] = 1;
                    q.push({nx, ny});
                }
            }
        }
    }

    int numIslands(vector&amp;lt;vector&amp;lt;char&amp;gt;&amp;gt;&amp;amp; grid) {
        int n = grid.size();
        int m = grid[0].size();
        vector&amp;lt;vector&amp;lt;int&amp;gt;&amp;gt; visited(n, vector&amp;lt;int&amp;gt;(m, 0));
        int count = 0;

        for (int i = 0; i &amp;lt; n; ++i) {
            for (int j = 0; j &amp;lt; m; ++j) {
                if (grid[i][j] == '1' &amp;amp;&amp;amp; !visited[i][j]) {
                    bfs(grid, visited, i, j);
                    count++;
                }
            }
        }
        return count;
    }
};

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;in hindi&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Isme extra space use ki gayi hai but bina visited ke bhi ho sakta hai magar esa mana jata hai agar apko koi data diya jata hai to use na chade &lt;br&gt;
data may lost to uski copy ban le parantu app usme grid[j][j] = '0' karke bhi visited ka track rakh sakte hai yadi apko extra space acchi nahi lagi to&lt;/p&gt;

</description>
      <category>graph</category>
      <category>leetcode</category>
      <category>programming</category>
      <category>learning</category>
    </item>
  </channel>
</rss>
