<?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: Mohan Mogi</title>
    <description>The latest articles on DEV Community by Mohan Mogi (@mohan_mogi_61a3367e66b67c).</description>
    <link>https://dev.to/mohan_mogi_61a3367e66b67c</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.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3756893%2F42392817-0085-43da-a370-04eacb314473.png</url>
      <title>DEV Community: Mohan Mogi</title>
      <link>https://dev.to/mohan_mogi_61a3367e66b67c</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/mohan_mogi_61a3367e66b67c"/>
    <language>en</language>
    <item>
      <title>Java Constructor Programming Examples for Beginners</title>
      <dc:creator>Mohan Mogi</dc:creator>
      <pubDate>Thu, 09 Jul 2026 08:08:06 +0000</pubDate>
      <link>https://dev.to/mohan_mogi_61a3367e66b67c/java-constructor-programming-examples-for-beginners-26ib</link>
      <guid>https://dev.to/mohan_mogi_61a3367e66b67c/java-constructor-programming-examples-for-beginners-26ib</guid>
      <description>&lt;h2&gt;
  
  
  What is Constructor?
&lt;/h2&gt;

&lt;p&gt;1.Constructorin java is special method that is used to initailze    objects.&lt;br&gt;
 2.It is automatically called when an object of a class is created.&lt;br&gt;
 3.It is used to set initial values for object attributes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Rules of Constructor:
&lt;/h2&gt;

&lt;p&gt;◆ Constructor name must be the same as the class name.&lt;br&gt;
◆ Constructor has no return type (not even void).&lt;br&gt;
◆ Constructor is called automatically when using the new keyword.&lt;br&gt;
◆ Constructors can be overloaded.&lt;/p&gt;

&lt;h2&gt;
  
  
  Types of Constructors:
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Default Constructor&lt;/li&gt;
&lt;li&gt;No-Argument Constructor&lt;/li&gt;
&lt;li&gt;Parameterized Constructor&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Important Keywords:
&lt;/h2&gt;

&lt;p&gt;◆ new → Creates an object and calls the constructor.&lt;br&gt;
◆ this() → Calls another constructor in the same class.&lt;br&gt;
◆ super() → Calls the parent class constructor.&lt;/p&gt;

&lt;h2&gt;
  
  
  Create a constructor:
&lt;/h2&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%2F5jzmfjgp3pwju7oatxx0.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%2F5jzmfjgp3pwju7oatxx0.png" alt=" " width="448" height="295"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Explanation:&lt;br&gt;
*Creates a class named Main.&lt;br&gt;
  public class Main {&lt;/p&gt;

&lt;p&gt;*Declares an instance variable x.&lt;br&gt;
  int x;&lt;/p&gt;

&lt;p&gt;*Declares an instance variable x.&lt;br&gt;
  public Main() {&lt;br&gt;
    x = 5;&lt;br&gt;
  }&lt;/p&gt;

&lt;p&gt;◆ This is the constructor.&lt;br&gt;
◆ It has the same name as the class (Main).&lt;br&gt;
◆ It has no return type.&lt;br&gt;
◆ It runs automatically when an object is created.&lt;br&gt;
◆ It initializes x to 5.&lt;/p&gt;

&lt;p&gt;Main myObj = new Main();&lt;/p&gt;

&lt;p&gt;◆  Creates a new object.&lt;br&gt;
◆ Automatically calls the constructor.&lt;br&gt;
◆ The constructor sets x = 5.&lt;/p&gt;

&lt;p&gt;System.out.println(myObj.x);&lt;br&gt;
◆ Prints the value of x.&lt;/p&gt;

&lt;p&gt;output: 5&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Java Static Variable vs Non-Static Variable (Beginner Guide)</title>
      <dc:creator>Mohan Mogi</dc:creator>
      <pubDate>Tue, 07 Jul 2026 07:07:50 +0000</pubDate>
      <link>https://dev.to/mohan_mogi_61a3367e66b67c/java-static-variable-vs-non-static-variable-beginner-guide-3n42</link>
      <guid>https://dev.to/mohan_mogi_61a3367e66b67c/java-static-variable-vs-non-static-variable-beginner-guide-3n42</guid>
      <description>&lt;p&gt;A variable in Java stores data. Variables can be of two types:&lt;br&gt;
 1.Static Variable (Class Variable)&lt;br&gt;
 2.Non-Static Variable (Instance Variable)&lt;/p&gt;

&lt;p&gt;1.Static Variable:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Belongs to
*A static variable belongs to the class, not to any individual    object.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;2.Keyword&lt;br&gt;
*A static variable is declared using the static keyword.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Number of Copies&lt;br&gt;
*Only one copy of the static variable exists, and it is shared by    all objects.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Memory Creation&lt;br&gt;
*Memory for a static variable is created once when the class is loaded into memory.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Access&lt;br&gt;
*A static variable is usually accessed using the class name, for example: Student.college.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Shared&lt;br&gt;
*A static variable is shared by all objects of the class.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Use&lt;br&gt;
*A static variable is used to store common data that is the same for every object, such as a company name or college name.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;2.Non-Static Variable:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Belongs to
*A non-static variable belongs to an object (instance) of the class.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;2.Keyword&lt;br&gt;
*A non-static variable is declared without the static keyword.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Number of Copies&lt;br&gt;
*Every object has its own separate copy of the non-static variable.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Memory Creation&lt;br&gt;
*Memory for a non-static variable is created each time a new object is created.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Access&lt;br&gt;
*A non-static variable is accessed using an object, for example: student.name.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Shared&lt;br&gt;
*A non-static variable is not shared. Each object has its own value.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Use&lt;br&gt;
*A non-static variable is used to store individual object data, such as a student's name, roll number, or age.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

</description>
    </item>
    <item>
      <title>Introduction to Java (Beginner Guide)</title>
      <dc:creator>Mohan Mogi</dc:creator>
      <pubDate>Tue, 07 Jul 2026 06:36:17 +0000</pubDate>
      <link>https://dev.to/mohan_mogi_61a3367e66b67c/introduction-to-java-beginner-guide-2b9b</link>
      <guid>https://dev.to/mohan_mogi_61a3367e66b67c/introduction-to-java-beginner-guide-2b9b</guid>
      <description>&lt;p&gt;&lt;strong&gt;1. What is Java?&lt;/strong&gt;&lt;br&gt;
Java is a high-level, object-oriented, platform-independent programming language that allows developers to write code once and run it anywhere using the Java Virtual Machine (JVM).Java &lt;br&gt;
developed by Sun Microsystems in 1995 (now owned by Oracle).&lt;/p&gt;

&lt;p&gt;Java is used to build:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Web Applications&lt;/li&gt;
&lt;li&gt;Desktop Applications&lt;/li&gt;
&lt;li&gt;Android Applications&lt;/li&gt;
&lt;li&gt;Enterprise Software&lt;/li&gt;
&lt;li&gt;Banking Systems&lt;/li&gt;
&lt;li&gt;Cloud Applications&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;2. Why Learn Java?&lt;/strong&gt;&lt;br&gt;
Java is one of the most popular programming languages because it is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Easy to learn&lt;/li&gt;
&lt;li&gt;Secure&lt;/li&gt;
&lt;li&gt;Fast&lt;/li&gt;
&lt;li&gt;Platform Independent&lt;/li&gt;
&lt;li&gt;Object-Oriented&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
    <item>
      <title>Understanding the Platform Architecture of Java, JavaScript, and Python</title>
      <dc:creator>Mohan Mogi</dc:creator>
      <pubDate>Fri, 26 Jun 2026 06:23:07 +0000</pubDate>
      <link>https://dev.to/mohan_mogi_61a3367e66b67c/understanding-the-platform-architecture-of-java-javascript-and-python-30hj</link>
      <guid>https://dev.to/mohan_mogi_61a3367e66b67c/understanding-the-platform-architecture-of-java-javascript-and-python-30hj</guid>
      <description>&lt;ol&gt;
&lt;li&gt;Java Platform Architecture&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Java Source Code (.java)&lt;br&gt;
          │&lt;br&gt;
          ▼&lt;br&gt;
      Java Compiler (javac)&lt;br&gt;
          │&lt;br&gt;
          ▼&lt;br&gt;
      Bytecode (.class)&lt;br&gt;
          │&lt;br&gt;
          ▼&lt;br&gt;
 Java Virtual Machine (JVM)&lt;br&gt;
          │&lt;br&gt;
          ▼&lt;br&gt;
      Machine Code&lt;br&gt;
          │&lt;br&gt;
          ▼&lt;br&gt;
        Output&lt;/p&gt;

&lt;p&gt;Explanation:&lt;br&gt;
*Write code in .java files.&lt;br&gt;
*javac compiles it into bytecode.&lt;br&gt;
*The JVM converts bytecode into machine code.&lt;br&gt;
*The program runs on any operating system with a JVM.&lt;/p&gt;

&lt;p&gt;Advantage&lt;br&gt;
Platform Independent ("Write Once, Run Anywhere")&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;JavaScript Platform Architecture&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;JavaScript Code (.js)&lt;br&gt;
          │&lt;br&gt;
          ▼&lt;br&gt;
 JavaScript Engine&lt;br&gt;
(V8 / SpiderMonkey / JavaScriptCore)&lt;br&gt;
          │&lt;br&gt;
          ▼&lt;br&gt;
 Machine Code&lt;br&gt;
          │&lt;br&gt;
          ▼&lt;br&gt;
       Output&lt;/p&gt;

&lt;p&gt;Explanation:&lt;br&gt;
*JavaScript does not need compilation like Java.&lt;br&gt;
*It runs inside a JavaScript Engine.&lt;br&gt;
*Browsers use different engines:&lt;br&gt;
*Google Chrome → V8&lt;br&gt;
*Mozilla Firefox → SpiderMonkey&lt;br&gt;
*Safari → JavaScriptCore&lt;br&gt;
*Node.js also uses the V8 engine.&lt;/p&gt;

&lt;p&gt;Advantage&lt;br&gt;
*Fast execution.&lt;br&gt;
*Runs directly in browsers.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Python Platform Architecture&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Python Source Code (.py)&lt;br&gt;
          │&lt;br&gt;
          ▼&lt;br&gt;
 Python Interpreter&lt;br&gt;
          │&lt;br&gt;
          ▼&lt;br&gt;
 Bytecode (.pyc)&lt;br&gt;
          │&lt;br&gt;
          ▼&lt;br&gt;
Python Virtual Machine (PVM)&lt;br&gt;
          │&lt;br&gt;
          ▼&lt;br&gt;
 Machine Code&lt;br&gt;
          │&lt;br&gt;
          ▼&lt;br&gt;
       Output&lt;/p&gt;

&lt;p&gt;Explanation:&lt;br&gt;
*Write code in .py files.&lt;br&gt;
*The Python interpreter converts it to bytecode.&lt;br&gt;
*The Python Virtual Machine (PVM) executes the bytecode.&lt;br&gt;
*The operating system runs the machine code.&lt;/p&gt;

&lt;p&gt;Advantage&lt;br&gt;
*Easy to write and understand.&lt;br&gt;
*Portable across operating systems with a Python interpreter.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Java Error Messages Explained with Examples</title>
      <dc:creator>Mohan Mogi</dc:creator>
      <pubDate>Wed, 24 Jun 2026 06:42:38 +0000</pubDate>
      <link>https://dev.to/mohan_mogi_61a3367e66b67c/java-error-messages-explained-with-examples-4dh4</link>
      <guid>https://dev.to/mohan_mogi_61a3367e66b67c/java-error-messages-explained-with-examples-4dh4</guid>
      <description>&lt;p&gt;1.&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%2Fzrt6cjv1egygdzsu16rx.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%2Fzrt6cjv1egygdzsu16rx.png" alt=" " width="799" height="181"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Game.java:6: error: ';' expected&lt;br&gt;
*Game.java → File name&lt;br&gt;
*6 → Error is on line 6&lt;br&gt;
*';' expected → Java expected a semicolon&lt;/p&gt;

&lt;p&gt;2.&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%2Fahvx9lvjpqcdn6y5ssh0.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%2Fahvx9lvjpqcdn6y5ssh0.png" alt=" " width="800" height="168"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;System.out.println("Hello world");&lt;br&gt;
*System → Built-in Java class&lt;br&gt;
*out → Output stream object&lt;br&gt;
*. → Access operator&lt;br&gt;
*println() → Prints text and moves to the next line&lt;/p&gt;

&lt;p&gt;The dots are very important:&lt;br&gt;
System.out.println("Hello");&lt;br&gt;
      ↑   ↑&lt;/p&gt;

&lt;p&gt;Without the second dot:&lt;br&gt;
System.out println("Hello");&lt;/p&gt;

&lt;p&gt;Java cannot understand the statement.&lt;/p&gt;

&lt;p&gt;3.&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%2Faue3ncizttxvwyr4n480.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%2Faue3ncizttxvwyr4n480.png" alt=" " width="798" height="156"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The parameter is missing a variable name.&lt;br&gt;
In Java, method parameters need both a type and a name.&lt;/p&gt;

&lt;p&gt;*String[] → Type&lt;br&gt;
*args → Parameter name (identifier)&lt;/p&gt;

&lt;p&gt;4.&lt;br&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%2Fknqcsxjvgiknqfk3lq7o.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%2Fknqcsxjvgiknqfk3lq7o.png" alt=" " width="800" height="162"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The problem is that after public static, Java expects a return type and a method name.&lt;/p&gt;

&lt;p&gt;5.&lt;br&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%2Feqtn7l0h6qsnbevnj6pc.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%2Feqtn7l0h6qsnbevnj6pc.png" alt=" " width="800" height="166"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Java expects class, interface, enum, or record after public.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>useMemo Hook in React</title>
      <dc:creator>Mohan Mogi</dc:creator>
      <pubDate>Wed, 10 Jun 2026 07:01:51 +0000</pubDate>
      <link>https://dev.to/mohan_mogi_61a3367e66b67c/usememo-hook-in-react-1ka8</link>
      <guid>https://dev.to/mohan_mogi_61a3367e66b67c/usememo-hook-in-react-1ka8</guid>
      <description>&lt;p&gt;useMemo:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;useMemo is a React Hook used for performance optimization.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;It returns a memoized value by storing the result of an expensive calculation in memory (cache) and reusing it during rerenders.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;React recalculates the value only when one of its dependencies changes, helping avoid unnecessary calculations and improve application performance.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;syntax:&lt;br&gt;
const memoizedValue = useMemo(() =&amp;gt; {&lt;br&gt;
  return calculation;&lt;br&gt;
}, [dependencies]);&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%2Fi75gzezcfoo3k9iecnbk.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%2Fi75gzezcfoo3k9iecnbk.png" alt=" " width="476" height="522"&gt;&lt;/a&gt;&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%2Fy0nhlzgqpricgfkg3m6m.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%2Fy0nhlzgqpricgfkg3m6m.png" alt=" " width="378" height="215"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>useRef Hook</title>
      <dc:creator>Mohan Mogi</dc:creator>
      <pubDate>Tue, 09 Jun 2026 08:01:03 +0000</pubDate>
      <link>https://dev.to/mohan_mogi_61a3367e66b67c/useref-hook-2169</link>
      <guid>https://dev.to/mohan_mogi_61a3367e66b67c/useref-hook-2169</guid>
      <description>&lt;p&gt;useRef Hook:&lt;br&gt;
useRef is a React Hook.Access and manipulate DOM elements directly.&lt;br&gt;
Store values without causing a component re-render.&lt;/p&gt;

&lt;p&gt;Syntax:&lt;br&gt;
import { useRef } from "react";&lt;/p&gt;

&lt;p&gt;function App() {&lt;br&gt;
  const inputRef = useRef(null);&lt;/p&gt;

&lt;p&gt;return ;&lt;br&gt;
}&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%2F2iqw74bxa8atge5m20sl.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%2F2iqw74bxa8atge5m20sl.png" alt=" " width="480" height="336"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;output:&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%2Fapsnfti5im8pcbqqegzg.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%2Fapsnfti5im8pcbqqegzg.png" alt=" " width="797" height="91"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>React useReducer Explained with Simple Examples</title>
      <dc:creator>Mohan Mogi</dc:creator>
      <pubDate>Fri, 05 Jun 2026 07:30:15 +0000</pubDate>
      <link>https://dev.to/mohan_mogi_61a3367e66b67c/react-usereducer-explained-with-simple-examples-43jg</link>
      <guid>https://dev.to/mohan_mogi_61a3367e66b67c/react-usereducer-explained-with-simple-examples-43jg</guid>
      <description>&lt;p&gt;useReducer Hook:&lt;br&gt;
The useReducer Hook is similar to the useState Hook.Track of multiple pieces of state that rely on complex logic, useReducer may be useful.&lt;/p&gt;

&lt;p&gt;Syntax&lt;br&gt;
The useReducer Hook accepts three arguments.&lt;/p&gt;

&lt;p&gt;useReducer(reducer, initialState, init)&lt;/p&gt;

&lt;p&gt;Understanding the Parameters and Return Values of useReducer:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;reducer&lt;br&gt;
The reducer is a function that defines how the state should change in response to an action. It receives the current state and an action object as arguments and returns the next state.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;initialState&lt;br&gt;
The initialState is the value used to determine the initial state of the reducer. It can be any data type, such as a number, object, array, or string.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;3.dispatch&lt;br&gt;
The dispatch function is returned by useReducer and is used to send actions to the reducer. Whenever an action is dispatched, React executes the reducer, calculates the new state.The action object typically contains a type property and may include additional data.&lt;/p&gt;

&lt;p&gt;4.state&lt;br&gt;
The state value represents the current state managed by the reducer. It starts with the initial state and updates whenever an action is dispatched.&lt;/p&gt;

&lt;p&gt;example:&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%2F3f5z76sld77f3c0265ko.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%2F3f5z76sld77f3c0265ko.png" alt=" " width="561" height="561"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;output:&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%2Fdq527suparwf7sdt6mch.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%2Fdq527suparwf7sdt6mch.png" alt=" " width="434" height="215"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>React Hooks Explained in Simple Terms</title>
      <dc:creator>Mohan Mogi</dc:creator>
      <pubDate>Tue, 02 Jun 2026 10:28:11 +0000</pubDate>
      <link>https://dev.to/mohan_mogi_61a3367e66b67c/react-hooks-explained-in-simple-terms-3gnf</link>
      <guid>https://dev.to/mohan_mogi_61a3367e66b67c/react-hooks-explained-in-simple-terms-3gnf</guid>
      <description>&lt;p&gt;React Hooks: &lt;br&gt;
Hooks are built-in React functions that allow Functional Components to use React features such as state management, lifecycle methods, context, references, and performance optimizations without writing Class Components.Hooks were introduced in React 16.8.&lt;/p&gt;

&lt;p&gt;Why Use Hooks?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Reusing stateful logic between components&lt;/li&gt;
&lt;li&gt;Managing complex component lifecycle code&lt;/li&gt;
&lt;li&gt;Reducing the need for Class Components&lt;/li&gt;
&lt;li&gt;Making components simpler and easier to understand.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Before Hooks, Functional Components could only receive props and render UI. They could not manage state or lifecycle behavior. Hooks changed that.&lt;/p&gt;

&lt;p&gt;1.useState Hook:&lt;br&gt;
   The React useState Hook allows us to track state in a function component.State generally refers to data or properties that need to be tracking in an application.&lt;/p&gt;

&lt;p&gt;Import useState&lt;br&gt;
To use the useState Hook, first need to import it into component.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
At the top of component, import the useState Hook.&lt;br&gt;
import { useState } from "react";&lt;/p&gt;

&lt;p&gt;useState accepts an initial state and returns two values:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;*The current state.
*A function that updates the state.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;import { useState } from "react";&lt;/p&gt;

&lt;p&gt;function FavoriteColor() {&lt;br&gt;
  const [color, setColor] = useState("red");&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;explanation;&lt;br&gt;
The first value, color, is current state.&lt;br&gt;
The second value, setColor, is the function that is used to update  state.&lt;/p&gt;

&lt;p&gt;Read State explample:&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%2Fycebf4twjfjhuta7yvi2.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%2Fycebf4twjfjhuta7yvi2.png" alt=" " width="435" height="172"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;output:&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%2Fwgvl4k997y94lkakct86.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%2Fwgvl4k997y94lkakct86.png" alt=" " width="800" height="153"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Update State&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%2F07tu355tll999h716jui.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%2F07tu355tll999h716jui.png" alt=" " width="437" height="310"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;output:&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%2F44itaf2x89lp6e9d92w3.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%2F44itaf2x89lp6e9d92w3.png" alt=" " width="800" height="152"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;2.useEffect Hook:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The useEffect Hook allows  to perform side effects in  components.&lt;/li&gt;
&lt;li&gt;Some examples of side effects are: fetching data, directly updating the DOM, and timers.&lt;/li&gt;
&lt;li&gt;useEffect accepts two arguments. The second argument is optional.
useEffect(, )&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>beginners</category>
      <category>javascript</category>
      <category>react</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Understanding useEffect in React:</title>
      <dc:creator>Mohan Mogi</dc:creator>
      <pubDate>Fri, 29 May 2026 08:05:09 +0000</pubDate>
      <link>https://dev.to/mohan_mogi_61a3367e66b67c/understanding-useeffect-in-react-18cn</link>
      <guid>https://dev.to/mohan_mogi_61a3367e66b67c/understanding-useeffect-in-react-18cn</guid>
      <description>&lt;p&gt;useEffect:&lt;br&gt;
useEffect is a React Hook that lets you perform side effects in a functional component.&lt;br&gt;
Common side effects are:&lt;br&gt;
Fetching data from an API,Updating the document title,Setting timers (setInterval, setTimeout),Adding event listeners,Accessing local storage.useEffect accepts two arguments. The second argument is optional.useEffect(, ).&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Understanding React Hooks with Practical Examples</title>
      <dc:creator>Mohan Mogi</dc:creator>
      <pubDate>Thu, 28 May 2026 07:25:51 +0000</pubDate>
      <link>https://dev.to/mohan_mogi_61a3367e66b67c/understanding-react-hooks-with-practical-examples-47ml</link>
      <guid>https://dev.to/mohan_mogi_61a3367e66b67c/understanding-react-hooks-with-practical-examples-47ml</guid>
      <description>&lt;p&gt;what is a hook in react?&lt;br&gt;
   A Hook is a special React function that allows functional components to use React features such as state, lifecycle behavior, refs, and context without using class components.&lt;br&gt;
   They provide a more direct API to React concepts like props, state, context, refs, and lifecycle.&lt;br&gt;
   Before Hooks, state and lifecycle methods could only be used in class components.&lt;br&gt;
   Hooks were introduced in React 16.8 to make functional components more powerful.&lt;/p&gt;

&lt;p&gt;1.React useState hook:&lt;br&gt;
   The react usestate hook allows us to track state in a functional components.&lt;br&gt;
   State generally refers to data or properties that need to be tracking in an application.&lt;br&gt;
   useState is a React Hook used to store and update data (state) in a functional component.&lt;/p&gt;

&lt;p&gt;syntax&lt;br&gt;
const [state, setState] = useState(initialValue);&lt;/p&gt;

&lt;p&gt;code&lt;br&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%2F5wswc6p7zk8d2tfzqgtn.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%2F5wswc6p7zk8d2tfzqgtn.png" alt=" " width="436" height="253"&gt;&lt;/a&gt;&lt;br&gt;
output&lt;br&gt;
three times click button.&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%2Ftfyv0ndnh5z069g29mds.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%2Ftfyv0ndnh5z069g29mds.png" alt=" " width="797" height="101"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;How it works&lt;br&gt;
 Initial value:&lt;br&gt;
   count = 0&lt;/p&gt;

&lt;p&gt;When button is clicked:&lt;br&gt;
setCount(count + 1);&lt;/p&gt;

&lt;p&gt;Value becomes:&lt;br&gt;
  count = 1&lt;br&gt;
  count = 2&lt;br&gt;
  count = 3&lt;/p&gt;

&lt;p&gt;Why use useState?&lt;br&gt;
 React updates the screen whenever the state changes.Data changes, React automatically re-renders the component and updates the UI.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>javascript</category>
      <category>react</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Understanding Closures in JavaScript: A Complete Beginner Guide</title>
      <dc:creator>Mohan Mogi</dc:creator>
      <pubDate>Wed, 27 May 2026 06:20:41 +0000</pubDate>
      <link>https://dev.to/mohan_mogi_61a3367e66b67c/understanding-closures-in-javascript-a-complete-beginner-guide-n39</link>
      <guid>https://dev.to/mohan_mogi_61a3367e66b67c/understanding-closures-in-javascript-a-complete-beginner-guide-n39</guid>
      <description>&lt;p&gt;closure;&lt;br&gt;
 In Javascript,closure is a feature.Closure is an inner function is retains accces to the variables of its outer(enclosing) function,even after that outer function has finished executing.A closure is the combination of a function and the lexical environment in which it was declared.&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%2Fdygrkslw3r1jgwcuftog.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%2Fdygrkslw3r1jgwcuftog.png" alt=" " width="588" height="458"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;output:&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%2Fx8kdyekmdqm9xywo9h2c.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%2Fx8kdyekmdqm9xywo9h2c.png" alt=" " width="299" height="200"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Explanation:&lt;br&gt;
Step 1: &lt;br&gt;
outerFunction() runs&lt;br&gt;
let count = 0;&lt;/p&gt;

&lt;p&gt;Variable count is created.&lt;/p&gt;

&lt;p&gt;Memory:&lt;/p&gt;

&lt;p&gt;count = 0&lt;/p&gt;

&lt;p&gt;Step 2: &lt;br&gt;
innerFunction is created&lt;br&gt;
function innerFunction() {&lt;br&gt;
  count++;&lt;br&gt;
  console.log("Count:", count);&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;innerFunction uses count from its parent function.&lt;/p&gt;

&lt;p&gt;Step 3:&lt;br&gt;
 Return inner function&lt;br&gt;
return innerFunction;&lt;br&gt;
const counter = outerFunction();&lt;/p&gt;

&lt;p&gt;Now counter stores innerFunction.&lt;/p&gt;

&lt;p&gt;Normally outerFunction() would finish and remove its variables from memory.&lt;/p&gt;

&lt;p&gt;But because innerFunction still needs count, JavaScript keeps count alive.&lt;/p&gt;

&lt;p&gt;This is called Closure.&lt;/p&gt;

&lt;p&gt;Step 4:&lt;br&gt;
First call&lt;br&gt;
counter();&lt;/p&gt;

&lt;p&gt;Runs:&lt;/p&gt;

&lt;p&gt;count++;&lt;/p&gt;

&lt;p&gt;Before:&lt;/p&gt;

&lt;p&gt;count = 0&lt;/p&gt;

&lt;p&gt;After:&lt;/p&gt;

&lt;p&gt;count = 1&lt;/p&gt;

&lt;p&gt;Output:&lt;/p&gt;

&lt;p&gt;Count: 1&lt;/p&gt;

&lt;p&gt;flow view:&lt;br&gt;
outerFunction()&lt;br&gt;
      |&lt;br&gt;
count = 0&lt;br&gt;
      |&lt;br&gt;
return innerFunction&lt;br&gt;
      |&lt;br&gt;
counter()&lt;br&gt;
      |&lt;br&gt;
count = 1&lt;/p&gt;

&lt;p&gt;counter()&lt;br&gt;
      |&lt;br&gt;
count = 2&lt;/p&gt;

&lt;p&gt;counter()&lt;br&gt;
      |&lt;br&gt;
count = 3&lt;/p&gt;

&lt;p&gt;counter()&lt;br&gt;
      |&lt;br&gt;
count = 4&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>javascript</category>
      <category>tutorial</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
