<?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: Subash</title>
    <description>The latest articles on DEV Community by Subash (@iamsubash).</description>
    <link>https://dev.to/iamsubash</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4059268%2Fc95fe638-e836-438d-9aa6-ed2c55e529c2.webp</url>
      <title>DEV Community: Subash</title>
      <link>https://dev.to/iamsubash</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/iamsubash"/>
    <language>en</language>
    <item>
      <title>Variable and Data Types in Java</title>
      <dc:creator>Subash</dc:creator>
      <pubDate>Mon, 26 Oct 2026 14:00:10 +0000</pubDate>
      <link>https://dev.to/iamsubash/variable-and-data-types-in-java-1o4o</link>
      <guid>https://dev.to/iamsubash/variable-and-data-types-in-java-1o4o</guid>
      <description>&lt;p&gt;In Java, there are two types of data types: &lt;strong&gt;Primitive and Non-Primitive (Reference) Data Types.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Primitive Data Types
&lt;/h2&gt;

&lt;p&gt;In Java, we have 8 primitive data types:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;byte&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;short&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;int&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;long&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;float&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;double&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;boolean&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;char&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These are the basic data types available in Java.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Non-Primitive Data Types
&lt;/h2&gt;

&lt;p&gt;In non-primitive data types, we have &lt;code&gt;String&lt;/code&gt;, arrays, and classes that we create.&lt;/p&gt;

&lt;p&gt;For example, if we create a class called &lt;code&gt;Home&lt;/code&gt;, it is a user-defined class and its type is a reference type.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight java"&gt;&lt;code&gt;&lt;span class="nc"&gt;String&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"Stark"&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="nc"&gt;Home&lt;/span&gt; &lt;span class="n"&gt;home&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Home&lt;/span&gt;&lt;span class="o"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here, &lt;code&gt;String&lt;/code&gt; and &lt;code&gt;Home&lt;/code&gt; are reference types.&lt;/p&gt;

&lt;p&gt;We also use &lt;code&gt;System.out.println()&lt;/code&gt; to print something in Java. Here, &lt;code&gt;System&lt;/code&gt; is a predefined class in Java, and &lt;code&gt;println()&lt;/code&gt; is a method used to print output.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. What is a Variable?
&lt;/h2&gt;

&lt;p&gt;A variable is a name given to a storage location that holds a value.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight java"&gt;&lt;code&gt;&lt;span class="nc"&gt;String&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"Stark"&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here, &lt;code&gt;String&lt;/code&gt; is the data type, &lt;code&gt;name&lt;/code&gt; is the variable, and &lt;code&gt;"Stark"&lt;/code&gt; is the value assigned to it.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Types of Variables in Java
&lt;/h2&gt;

&lt;p&gt;We commonly discuss local variables, instance variables, and static variables in Java.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Local Variable:&lt;/strong&gt; A variable declared inside a method, constructor, or block. It can be accessed within its declared scope.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Instance Variable:&lt;/strong&gt; A variable declared inside a class but outside methods and without the &lt;code&gt;static&lt;/code&gt; keyword. Each object has its own copy of an instance variable.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Static Variable:&lt;/strong&gt; A variable declared using the &lt;code&gt;static&lt;/code&gt; keyword inside a class. It belongs to the class, and the class shares it among its objects.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight java"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Home&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;static&lt;/span&gt; &lt;span class="nc"&gt;String&lt;/span&gt; &lt;span class="n"&gt;type&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"House"&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
    &lt;span class="nc"&gt;String&lt;/span&gt; &lt;span class="n"&gt;owner&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"Stark"&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;

    &lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;display&lt;/span&gt;&lt;span class="o"&gt;()&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
        &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;number&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
        &lt;span class="nc"&gt;System&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;out&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;println&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="n"&gt;number&lt;/span&gt;&lt;span class="o"&gt;);&lt;/span&gt;
    &lt;span class="o"&gt;}&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;type&lt;/code&gt; is a static variable because it is declared using the &lt;code&gt;static&lt;/code&gt; keyword.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;owner&lt;/code&gt; is an instance variable because it belongs to each object.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;number&lt;/code&gt; is a local variable because it is declared inside the &lt;code&gt;display()&lt;/code&gt; method.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>javadatatypes</category>
      <category>java</category>
      <category>javavariables</category>
      <category>javabackend</category>
    </item>
    <item>
      <title>About a Programing Paradigm</title>
      <dc:creator>Subash</dc:creator>
      <pubDate>Sat, 24 Oct 2026 13:03:51 +0000</pubDate>
      <link>https://dev.to/iamsubash/about-a-programing-paradigm-1kkc</link>
      <guid>https://dev.to/iamsubash/about-a-programing-paradigm-1kkc</guid>
      <description>&lt;p&gt;Imperative Paradigms&lt;/p&gt;

&lt;p&gt;Procedural programming Paradigm: A traditional method where code is written as a top-down list of step-by-step instructions or routines for the computer to follow.   &lt;/p&gt;

&lt;p&gt;Object Oriented Programming: A style that groups related variables and functions into everyday "objects," as covered in the earlier post.   &lt;/p&gt;

&lt;p&gt;Parallel Processing Approach: A method that divides complex tasks into smaller chunks so the computer's processors can execute them all at the exact same time.   &lt;/p&gt;

&lt;p&gt;Declarative Paradigms&lt;/p&gt;

&lt;p&gt;Logic Programming Paradigm: A system where the programmer sets up a list of facts and rules, and the computer uses formal logic to deduce the answers.   &lt;/p&gt;

&lt;p&gt;Functional Programming: A style that treats computation like mathematical equations, strictly avoiding changing or mutating data once it is created.   &lt;/p&gt;

&lt;p&gt;Database Processing Approach: A method used for interacting with large databases, where you simply state what data you want to retrieve without writing the search algorithm.   &lt;/p&gt;

</description>
    </item>
    <item>
      <title>Finding Error in a simple "Hello World!" Program.</title>
      <dc:creator>Subash</dc:creator>
      <pubDate>Sat, 24 Oct 2026 10:03:49 +0000</pubDate>
      <link>https://dev.to/iamsubash/finding-error-in-a-simple-hello-world-program-4hi0</link>
      <guid>https://dev.to/iamsubash/finding-error-in-a-simple-hello-world-program-4hi0</guid>
      <description>&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Foczob1yosrvuy7080kuu.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Foczob1yosrvuy7080kuu.png" alt=" " width="453" height="193"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Above is the simple Hello Universe! program and we can see how the simple syntax error cause the program to fail to run.
&lt;/h4&gt;

&lt;h4&gt;
  
  
  1)If we remove the class name Home below error occurs
&lt;/h4&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fc16ri0spzr4r4bzyk1vz.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fc16ri0spzr4r4bzyk1vz.png" alt=" " width="454" height="83"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  2)If we remove the class form the first line below error occurs
&lt;/h4&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fvp6luoy34wy6un46h78c.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fvp6luoy34wy6un46h78c.png" alt=" " width="800" height="198"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;3)If we remove the semicolon from the output line below error occurs&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5eagmrkr2r043yjoema9.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5eagmrkr2r043yjoema9.png" alt=" " width="404" height="79"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  4)If we remove the double quotation from the string Hey Universe below error occurs
&lt;/h4&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fkb1r4uiwzig4hbqusvp0.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fkb1r4uiwzig4hbqusvp0.png" alt=" " width="437" height="194"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  5)If we put single quotation instead of double quotation in string below error may occurs
&lt;/h4&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fmdyyf63ybe69gxbbk1je.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fmdyyf63ybe69gxbbk1je.png" alt=" " width="478" height="196"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  6)If we remove the main in psvm below error occurs
&lt;/h4&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fyuc00lcn9va448pmxyqf.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fyuc00lcn9va448pmxyqf.png" alt=" " width="447" height="81"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It ask for identifier expected...&lt;/p&gt;

&lt;h4&gt;
  
  
  7)If we remove void form public static void main(psvm) below error occurs
&lt;/h4&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fht0clee4s0wk92xhwel5.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fht0clee4s0wk92xhwel5.png" alt=" " width="720" height="71"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;its asks for return type...&lt;/p&gt;

&lt;h4&gt;
  
  
  8)If we remove the System form the code below error occurs
&lt;/h4&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F6ecgn0roc8s9ikc3ia8e.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F6ecgn0roc8s9ikc3ia8e.png" alt=" " width="430" height="120"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  9)If we remove the curly braces from psvm it shows the error below:
&lt;/h4&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgjksgyz835coh4ebliat.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgjksgyz835coh4ebliat.png" alt=" " width="655" height="137"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  10)If we remove println form the output line below error occurs
&lt;/h4&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fp6ng34zk24z7igmpw8s3.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fp6ng34zk24z7igmpw8s3.png" alt=" " width="489" height="122"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>java</category>
      <category>javahelloworld</category>
      <category>javaerror</category>
      <category>javabackend</category>
    </item>
    <item>
      <title>useEffect-Hooks</title>
      <dc:creator>Subash</dc:creator>
      <pubDate>Thu, 01 Oct 2026 13:38:20 +0000</pubDate>
      <link>https://dev.to/iamsubash/useeffect-hooks-17lg</link>
      <guid>https://dev.to/iamsubash/useeffect-hooks-17lg</guid>
      <description>&lt;h2&gt;
  
  
  1. Run Only Once
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Print "Component Mounted" only once when page loads.
&lt;/h3&gt;

&lt;h4&gt;
  
  
  - How will you write useEffect?
&lt;/h4&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F0vlndp7ndalrv84fbw6y.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F0vlndp7ndalrv84fbw6y.png" alt=" " width="381" height="116"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  - What should be in dependency array? Why?
&lt;/h4&gt;

&lt;p&gt;The dependency array should be an empty array [ ].&lt;/p&gt;

&lt;p&gt;An empty dependency array tells React to run the useEffect after the component's initial render, so the effect runs only once when the component is mounted.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Run on Every Render
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Print "Rendered" on every render.
&lt;/h3&gt;

&lt;h4&gt;
  
  
  - How will you write useEffect?
&lt;/h4&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fpda5t7967yssx8qivocm.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fpda5t7967yssx8qivocm.png" alt=" " width="400" height="111"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  - What happens if dependency array is not provided?
&lt;/h4&gt;

&lt;p&gt;If we don't provide a dependency array, the useEffect will run after every render of the component.&lt;/p&gt;

&lt;p&gt;For example, if the component renders 5 times, the useEffect will also run 5 times.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Run When State Changes
&lt;/h2&gt;

&lt;p&gt;const [count, setCount] = useState(0);&lt;br&gt;
Log "Count changed" only when count changes.&lt;/p&gt;

&lt;h4&gt;
  
  
  - What should dependency array contain?
&lt;/h4&gt;

&lt;p&gt;The dependency array should contain the count variable.&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fit71l7pg8lzd663xay71.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fit71l7pg8lzd663xay71.png" alt=" " width="413" height="107"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This means the useEffect will run whenever the count value changes.&lt;/p&gt;

&lt;h4&gt;
  
  
  - What happens if it is empty [ ]?
&lt;/h4&gt;

&lt;p&gt;If the dependency array is empty [ ], the useEffect will run only once after the component's initial render.&lt;/p&gt;

&lt;p&gt;It will not run again when count changes.&lt;/p&gt;

&lt;p&gt;So, if we want the effect to run whenever count changes, we need to put count in the dependency array: [count]&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Two States, One Effect
&lt;/h2&gt;

&lt;p&gt;const [count, setCount] = useState(0);&lt;br&gt;
const [name, setName] = useState("");&lt;br&gt;
Run effect when count OR name changes.&lt;/p&gt;

&lt;h4&gt;
  
  
  - How will dependency array look?
&lt;/h4&gt;

&lt;p&gt;The dependency array should contain both count and name:&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5mmd7v26ckimf6o9m0sf.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5mmd7v26ckimf6o9m0sf.png" alt=" " width="609" height="522"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This means the useEffect will run whenever count changes OR name changes.&lt;/p&gt;

&lt;h4&gt;
  
  
  - What if only count is added?
&lt;/h4&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flkabinkbkzqx47xfp0u2.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flkabinkbkzqx47xfp0u2.png" alt=" " width="287" height="73"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The useEffect will run whenever count changes.&lt;/p&gt;

&lt;p&gt;Changes to name will not trigger this useEffect because name is not included in the dependency array.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Derived Logic
&lt;/h2&gt;

&lt;p&gt;Show "Even Number" whenever count becomes even.&lt;/p&gt;

&lt;h4&gt;
  
  
  - Should this logic be inside render or useEffect? Why?
&lt;/h4&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fa6ibr51ixmq8dfaznm7r.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fa6ibr51ixmq8dfaznm7r.png" alt=" " width="557" height="387"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The logic is inside useEffect because we want to perform the console log when count changes. The [count] dependency makes the UseEffect to run whenever count changes, and the if condition checks whether the new count is even.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. API Call on Mount
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Fetch users when component loads.
&lt;/h3&gt;

&lt;h4&gt;
  
  
  - Why do we use [ ]?
&lt;/h4&gt;

&lt;p&gt;We use an empty dependency array [ ] because we want the API call to run only after the component's initial render&lt;/p&gt;

&lt;h4&gt;
  
  
  - What happens if we remove [ ]?
&lt;/h4&gt;

&lt;p&gt;If we remove [ ], the useEffect runs after every render. Therefore, the API call will be made after every render, which can cause unnecessary API requests and may lead to performance problems.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Infinite Loop Trap
&lt;/h2&gt;

&lt;h3&gt;
  
  
  useEffect(() =&amp;gt; {
&lt;/h3&gt;

&lt;h3&gt;
  
  
  setCount(count + 1);
&lt;/h3&gt;

&lt;h3&gt;
  
  
  }, [count]);
&lt;/h3&gt;

&lt;h4&gt;
  
  
  - What will happen?
&lt;/h4&gt;

&lt;p&gt;The setCount will increase the count value. Since count is in the dependency array, the useEffect will run again whenever count changes, creating an infinite loop.&lt;/p&gt;

&lt;h4&gt;
  
  
  - Why does this cause infinite re-render?
&lt;/h4&gt;

&lt;p&gt;Since count is in the dependency array, changing count triggers the effect again, which changes count again, causing an infinite re-render loop.&lt;/p&gt;

&lt;h2&gt;
  
  
  8. Fix the Infinite Loop
&lt;/h2&gt;

&lt;h4&gt;
  
  
  - How can you increment count only once using useEffect?
&lt;/h4&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fyp08a59ki1j8n17k653r.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fyp08a59ki1j8n17k653r.png" alt=" " width="292" height="75"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If we give an empty dependency array [ ], the useEffect will run only once after the initial render. Therefore, setCount will increment the count only once, avoiding the infinite loop.&lt;/p&gt;

&lt;h2&gt;
  
  
  9. Document Title Sync
&lt;/h2&gt;

&lt;h3&gt;
  
  
  useEffect(() =&amp;gt; {
&lt;/h3&gt;

&lt;h3&gt;
  
  
  document.title = count;
&lt;/h3&gt;

&lt;h3&gt;
  
  
  }, [?]);
&lt;/h3&gt;

&lt;h4&gt;
  
  
  - What should go inside ? Why?
&lt;/h4&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgb32q7z42yexfu94cl79.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgb32q7z42yexfu94cl79.png" alt=" " width="312" height="84"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We should put &lt;strong&gt;&lt;code&gt;count&lt;/code&gt;&lt;/strong&gt; inside the dependency array because whenever &lt;code&gt;count&lt;/code&gt; changes, the &lt;code&gt;useEffect&lt;/code&gt; will run and update the document title with the new &lt;code&gt;count&lt;/code&gt; value.&lt;/p&gt;

&lt;h2&gt;
  
  
  10. Cleanup Basic
&lt;/h2&gt;

&lt;h3&gt;
  
  
  useEffect(() =&amp;gt; {
&lt;/h3&gt;

&lt;h3&gt;
  
  
  window.addEventListener("click", handleClick);
&lt;/h3&gt;

&lt;h3&gt;
  
  
  });
&lt;/h3&gt;

&lt;h4&gt;
  
  
  - What problem may happen?
&lt;/h4&gt;

&lt;p&gt;Without cleanup, a new click event listener will be added on every render. This can cause the handleClick function to run multiple times for a single click.&lt;/p&gt;

&lt;h4&gt;
  
  
  - How to fix properly?
&lt;/h4&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F9rsalaocx0sxis14jlxv.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F9rsalaocx0sxis14jlxv.png" alt=" " width="508" height="144"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  - When does cleanup run?
&lt;/h4&gt;

&lt;p&gt;The cleanup function runs before the effect runs again and when the component is unmounted (removed from the screen).&lt;/p&gt;

</description>
      <category>react</category>
      <category>useeffecthooks</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
