DEV Community: Manikandan K

Polymorphism in JavaScript

Manikandan K — Fri, 22 Mar 2024 11:42:17 +0000

Explanation:

Polymorphism: Polymorphism is a fundamental concept in object-oriented programming where objects of different types can be treated as instances of a common superclass or interface. In this example, polymorphism is demonstrated by the sound() method, which behaves differently for different types of animals (Animal, Lion, Dog) despite being called using the same interface.

Let Breakdown the term

The term "polymorphism" indeed breaks down to "poly," meaning "many," and "morph," meaning "form."
In the context of programming, polymorphism refers to the ability of objects to take on different forms or behave differently based on their specific types or classes.

// Definition of the Animal class
class Animal {
    // Constructor method for initializing an animal with a name
    constructor(_animalName) {
        this.name = _animalName;
    }

    // Method to make a sound, default implementation for all animals
    sound() {
        console.log(`${this.name} Definitely makes a sound`);
    }
}

// Definition of the Lion class, inheriting from Animal
class Lion extends Animal {
    // Constructor method for initializing a Lion with a name
    constructor(_name) {
        super(_name); // Calls the constructor of the parent class
    }

    // Method to make a sound, specific to Lions
    sound() {
        console.log(`${this.name} sounds like roaring...`);
    }
}

// Definition of the Dog class, inheriting from Animal
class Dog extends Animal {
    // Constructor method for initializing a Dog with a name
    constructor(_name) {
        super(_name); // Calls the constructor of the parent class
    }

    // Method to make a sound, specific to Dogs
    sound() {
        console.log(`${this.name} sounds like barking...`);
    }
}

// Creating an instance of Animal
const tiger = new Animal('Stark');
console.log(tiger); // Output: Animal { name: 'Stark' }
tiger.sound(); // Output: Stark Definitely makes a sound

// Creating an instance of Lion
const leo = new Lion('Leo');
console.log(leo); // Output: Lion { name: 'Leo' }
leo.sound(); // Output: Leo sounds like roaring...

// Creating an instance of Dog
const tommy = new Dog('Tommy');
console.log(tommy); // Output: Dog { name: 'Tommy' }
tommy.sound(); // Output: Tommy sounds like barking...

Class Definitions: Three classes are defined: Animal, Lion, and Dog. Each class represents a type of animal, with Lion and Dog inheriting from Animal.
Constructor Methods:
Each class has a constructor method that initializes the object with a name. The super() method is used in the constructor of the derived classes (Lion and Dog) to call the constructor of the base class (Animal) and set the name.
sound() Method:
The sound() method is defined in the Animal class as the default behavior for making a sound. However, this method is overridden in the Lion and Dog classes to provide specific sound implementations for Lions and Dogs.
Instance Creation and Method Invocation:
Instances of Animal, Lion, and Dog are created (tiger, leo, tommy), and the sound() method is called on each instance. Despite being called using the same method name, the actual behavior varies depending on the type of animal due to polymorphism.

Inheritance in JavaScript

Manikandan K — Fri, 22 Mar 2024 10:30:43 +0000

Introduction:

Properties and methods from the base class or parent class can be passed into the derived or child class.

Inheritance is a powerful concept in object-oriented programming that allows classes to inherit properties and methods from other classes.
In JavaScript, class inheritance can be achieved using the extends keyword, which establishes a parent-child relationship between classes. Let's dive into a practical example to understand how class inheritance works in JavaScript.

Parent Class: Person

class Person {
    constructor(_name, _age) {
        this.name = _name;
        this.age = _age;
    }
}

The Person class represents a basic entity with properties for name and age.

Derived Class: Teacher

class Teacher extends Person {
    constructor(_name, _age, _subject) {
        super(_name, _age);
        this.subject = _subject;
    }
}

The Teacher class extends the Person class, inheriting its properties. It adds an additional property for the subject taught by the teacher.

Derived Class: Student

class Student extends Person {
    constructor(_name, _age, _class) {
        super(_name, _age);
        this.class = _class;
    }
}

The Student class also extends the Person class and includes an extra property to represent the student's class.

Creating Instances

const person1 = new Person('Manikandan', 25);
const teacher1 = new Teacher('Aravind', 22, 'DSA');
const student1 = new Student('Nithish', 24, 'SSLC');

We create instances of the Person, Teacher, and Student classes, passing appropriate arguments to their constructors.

Output

console.log(person1);  // Person { name: 'Manikandan', age: 25 }
console.log(teacher1); // Teacher { name: 'Aravind', age: 22, subject: 'DSA' }
console.log(student1); // Student { name: 'Nithish', age: 24, class: 'SSLC' }

The output demonstrates that each object correctly inherits properties from its parent class while also containing its specific properties.

Conclusion:

Class inheritance in JavaScript provides a clean and structured way to establish relationships between classes, promoting code reuse and organization.
By leveraging inheritance, developers can create more modular and maintainable codebases. In this example, we've seen how classes can be extended to model relationships such as teachers and students inheriting properties from a common parent class.
Understanding and utilizing class inheritance is key to building robust and scalable JavaScript applications.

By mastering class inheritance, developers can unlock the full potential of object-oriented programming in JavaScript, enabling them to build complex and sophisticated applications with ease.

Classes in JavaScript: Explained OOP's in JS

Manikandan K — Fri, 22 Mar 2024 10:16:04 +0000

Introduction:

Classes are a key feature of Object-Oriented Programming (OOP) in JavaScript, introduced in ECMAScript 2015 (ES6). They provide a more intuitive and structured way to define objects and their behavior. In this blog post, we'll delve into the concept of classes in JavaScript and demonstrate their usage through practical examples.

Understanding Classes:

Classes in JavaScript act as blueprints for creating objects with predefined properties and methods. They encapsulate data and behavior within a single unit, making code organization and reuse easier.

Exploring the Code:

Let's break down the provided code snippet:

1. Class Declaration:
We declare a class named Person using the class keyword. This class represents a person and has a constructor method to initialize its properties name and age when a new instance is created.

// Class
class Person {
    constructor(_name, _age) {  // Constructor with parameters
        this.name = _name;
        this.age = _age;
    }
}

2. Creating an Instance:
We create a new instance of the Person class using the new keyword and passing "Manikandan" as the name and 25 as the age.

const person1 = new Person("Manikandan", 25);

3. Logging the Object:
We log the person1 object to the console, which displays the properties name and age associated with it.

console.log(person1) // Output: Person { name: 'Manikandan', age: 25 }

4. Defining a Class with Methods:
We declare a class named Car, which represents a car. It has a constructor method to initialize its properties name and color, along with a method drive() to simulate driving the car.

class Car {
    constructor(_name, _color) {  // Constructor with parameters
        this.name = _name;
        this.color = _color;
    }
    drive() {
        console.log(`Hi, This is My ${this.name} car. And its color is ${this.color}`)
    }
}

5. Creating an Instance:
We create a new instance of the Car class, passing "Rolls Royce" as the name and 'Black' as the color.

const car1 = new Car("Rolls Royce", 'Black');

6. Logging the Object:
We log the car1 object to the console, which displays the properties name and color associated with it.

console.log(car1) // Output: Car { name: 'Rolls Royce', color: 'Black' }

7. Invoking a Method:
We invoke the drive() method on the car1 object, which simulates driving the car and logs a message to the console.

car1.drive(); // Output: Hi, This is My Rolls Royce car. And its color is Black

Conclusion:

Classes in JavaScript provide a cleaner and more structured way to define objects and their behavior. By leveraging classes, you can create reusable and maintainable code, making it easier to build complex applications. In this blog post, we've explored the basics of using classes in JavaScript for Object-Oriented Programming.

Stay tuned for more insights and advanced techniques in utilizing classes and OOP principles in JavaScript. Happy coding!

closures in java script: A clear understand

Manikandan K — Thu, 21 Mar 2024 06:54:22 +0000

In JavaScript, closures are a powerful and often misunderstood concept. They play a crucial role in maintaining data privacy, enabling functional programming patterns, and facilitating the creation of robust and modular code. In this article, we'll explore closures in-depth through a practical example.

Introduction to Closures:

A closure is formed when a function retains access to its lexical scope even after the outer function has finished executing. This means that the inner function has access to variables and parameters of the outer function, even after the outer function has returned. Closures are a fundamental feature of JavaScript and are commonly used in various programming paradigms.

Regarding this definition, don't panic. I can simplify it:) 😀

Example: Exploring Closure with Lexical Scoping

Let's delve into a simple example to understand closures better:

function display() {
    let name = "Manikandan";

    function printName() {
        console.log(`Hi, This is ${name}.`)
    }

    return printName;
}

let res = display();  // [Function: printName]
res();  //  Hi, This is Manikandan.

Understanding the Example:

Function Declaration (display):
- Inside the display function, a variable name is declared and assigned the value "Manikandan".
- Another nested function printName is declared within display. This function accesses the variable name from its lexical scope.
Returning a Function:
- The display function returns the printName function.
Function Execution:
- display() is called and its result is stored in res.
- res now holds a reference to the printName function.
Closure in Action:
- When res() is invoked, it executes the printName function.
- Despite display already finished executing, the printName function still retains access to the name variable due to closure.
- Thus, it successfully logs Hi, This is Manikandan. to the console.

Explanation of Lexical Scoping:

Lexical scoping means that a function's scope is determined by its surrounding lexical context at the time of its definition.
In our example, printName is defined within the lexical scope of display. Therefore, it has access to the variables defined within display, including name.
Even though display finishes executing before printName is called, printName maintains a reference to the name variable through closure, allowing it to access and use the variable's value.

Nested Function

Absolutely! In JavaScript, closures extend to nested functions as well, allowing them to access variables from their containing scopes even if those scopes have finished executing.

function display() {
    let name = "Manikandan";

    function printNaame() {
        let age = 25;

        function printAge() {
            console.log(`Hi this is ${name}, And My age is ${age}`)
        }

        return printAge;
    }

    return printNaame;
}

let res = display();  // [Function: printNaame]
let result = res();  // [Function: printAge]
result();

Conclusion:

Now Closure is,

Inner function/nested function, whether it returns or not, will always have access to the outer scope variable. This is the concept of closures.

call, bind, and apply Methods Unveiled in JavaScript

Manikandan K — Tue, 19 Mar 2024 07:21:02 +0000

1. bind()

As per MDN,
The bind() method of Function instances creates a new function that, when called, calls this function with its this keyword set to the provided value, and a given sequence of arguments preceding any provided when the new function is called.

Setting the Scene:
Imagine we have a friend named "Manikandan" who loves coding. We want to create a special message function for him.

const person = {
    fname: "Manikandan",
    lname: "kathiresan",
    age: 25,
    greet: function () {
        console.log(`Hi, Welcome ${this.fname}`);
    },
    getInfo: function (city, role) {
        console.log(`Hi, This is ${this.fname}. I am from ${city}. I am  ${role}`)
    }
}

Explanation:

We have this friend named person, and we've given him some cool features like saying "hi" and telling us some information about himself.

Meet Another Friend: Now, let's meet another friend named "Aravind". He's also awesome, but we want to use the same special message function we made for Manikandan for Aravind too.

const person2 = {
    fname: 'Aravind',
    lname: 'Kathiresan'
}

Explanation:

This is our buddy person2, who's a bit different from Manikandan but equally cool!

Time to Use the Bind Magic: Here comes the exciting part! We're going to use something called the "bind" method to make our special message function work for Aravind too.

const bindMethod = person.getInfo.bind(person2);
console.log(bindMethod) // [Function: bound getInfo]
bindMethod('Dindigul', 'Software Engineer');

Explanation:

With the "bind" magic, we're basically saying, "Hey, make this special message function work for Aravind as well!"
When we use bindMethod, it's like using our special message function, but it's talking about Aravind instead of Manikandan!

Let's Wrap It Up: So, what did we learn? The "bind" method helps us make cool functions and use them for different friends or things in our code. It's like making a superpower that we can share with anyone we want!

2. call()

As described by the wise sages at MDN,
The call() method of Function instances invokes the function and sets its this value to a provided value, along with any additional arguments passed to it.

Setting Sail: Picture a valiant hero named "Manikandan", skilled in the art of coding. We're about to bestow upon him a powerful skill.

const hero = {
    name: "Manikandan",
    level: 25,
    greet: function () {
        console.log(`Greetings, fellow adventurer! I am ${this.name}`);
    },
    questInfo: function (location, objective) {
        console.log(`Attention, brave souls! Our quest takes us to ${location} to ${objective}.`)
    }
}

Explanation:

Behold our hero, hero, with prowess in greeting fellow adventurers and sharing quest details.

Encountering a New Ally: Along our voyage, we meet a new ally named "Aravind". Equally brave, we wish to share our hero's abilities with this noble companion.

const ally = {
    name: 'Aravind',
    level: 20,
}

Explanation:

Meet our ally, ally, ready to embark on a different adventure.

Setting Course for Adventure: Prepare yourselves for a magical moment! We're invoking the call spell to share our hero's abilities with our new ally, along with specific parameters.

hero.questInfo.call(ally, 'Mysterious Forest', 'uncover the ancient artifact');

Explanation:

With the call spell, our hero extends his wisdom to our ally!
As we invoke hero.questInfo.call(ally, 'Mysterious Forest', 'uncover the ancient artifact'), our ally receives guidance tailored to their journey.

3. apply()

As described by the wise wizards at MDN,
The apply() method of Function instances invokes the function and sets its this value to a provided value, along with an array or array-like object of arguments.

Setting Sail: Picture a valiant hero named "Manikandan", skilled in the art of coding. We're about to bestow upon him a powerful skill.

const hero = {
    name: "Manikandan",
    level: 25,
    greet: function () {
        console.log(`Greetings, fellow adventurer! I am ${this.name}`);
    },
    questInfo: function (location, objective) {
        console.log(`Attention, brave souls! Our quest takes us to ${location} to ${objective}.`)
    }
}

Explanation:

Behold our hero, hero, with prowess in greeting fellow adventurers and sharing quest details.

Encountering a New Ally: Along our voyage, we meet a new ally named "Aravind". Equally brave, we wish to share our hero's abilities with this noble companion.

const ally = {
    name: 'Aravind',
    level: 20,
}

Explanation:

Meet our ally, ally, ready to embark on a different adventure.

Setting Course for Adventure: Prepare yourselves for a magical moment! We're invoking the apply spell to share our hero's abilities with our new ally, along with specific parameters.

hero.questInfo.apply(ally, ['Mysterious Forest', 'uncover the ancient artifact']);

Explanation:

With the apply spell, our hero extends his wisdom to our ally!
As we invoke hero.questInfo.apply(ally, ['Mysterious Forest', 'uncover the ancient artifact']), our ally receives guidance tailored to their journey.

At Simply,
Bind Method:
Employ bind to create a new function with a fixed this value, establishing a permanent connection between the function and its context.

Call Method:
Use call to directly invoke a function with a specified this value, along with arguments, enabling method borrowing and flexible function invocation.

Apply Method:
Utilize apply to invoke a function with a specified this value and an array of arguments, facilitating dynamic parameter passing and versatile function invocation.

Constructor Functions in JavaScript 🤖

Manikandan K — Fri, 15 Mar 2024 11:06:14 +0000

⚡ Introduction:

Constructor functions are a fundamental aspect of Object-Oriented Programming (OOP) in JavaScript.
They allow us to create objects with predefined properties and methods. In this blog post, we'll explore the concept of constructor functions and how they can be used to create objects in JavaScript.
Simply, Constructor function as template. This template is used for creating an object.

⚡ Understanding Constructor Functions:

Constructor functions are special functions in JavaScript used to create and initialize objects.
They serve as blueprints for creating multiple instances of objects with shared properties and methods.

⚡ Exploring the Code:

Let's break down the code snippet you provided:

function Person(_name, _age) {
    this.name = _name;
    this.age = _age;
    this.greet = function () {
        console.log(`Hi, Welcome ${this.name}`)
    }
}

Function Declaration:

We declare a function named Person , which serves as our constructor function.
It takes two parameters: _name and _age , representing the name and age of a person.

Initializing Properties:

Inside the constructor function, we use the this keyword to create properties name and age for each instance of the Person object.
The values of these properties are set based on the arguments passed to the constructor function.

Adding a Method:

We define a method named greet within the constructor function. This method allows each Person object to greet with a personalized message.

⚡ Instance Creation

const person1 = new Person('Manikandan', 25);

Creating an Instance:

We create a new instance of the Person object using the new keyword, passing 'Manikandan' as the name and 25 as the age.

Logging the Object:

We log the person1 object to the console, which displays the properties and methods associated with it.

console.log(person1) // Person Person { name: 'Manikandan', age: 25, greet: [Function (anonymous)] }

Invoking the Method:

We invoke the greet method on the person1 object, which logs a personalized greeting message to the console.

person1.greet(); // Hi, Welcome Manikandan

⚡ Conclusion:

Constructor functions are essential in JavaScript for creating objects with predefined properties and methods. They provide a convenient way to structure and organize code in an Object-Oriented manner. By understanding constructor functions, you'll be better equipped to leverage the power of OOP in your JavaScript projects. Happy coding..!🧑🏻‍💻

OOP's JavaScript: Object-Oriented Programming Paradigm 👽 👾

Manikandan K — Thu, 14 Mar 2024 12:14:02 +0000

Introduction:

Object-oriented programming is a computer programming model that organizes software design around data, or objects, rather than functions and logic. An object can be defined as a data field that has unique attributes and behavior.

JavaScript is not actually an object-oriented language, but we can write object-oriented code by using something called a prototype object.

Understanding Objects:

In JavaScript, objects are fundamental entities that represent real-world entities, concepts, or functionalities.
They encapsulate data (properties) and behavior (methods) within a single unit. Objects can be created using object literals, constructor functions, or classes in modern JavaScript.

Encapsulation:

Encapsulation is the bundling of data and methods that operate on that data into a single unit, known as an object.
It hides the internal state of an object and exposes only the necessary functionalities, promoting code organisation and modularity.

Inheritance:

Inheritance is a mechanism that allows objects to inherit properties and methods from other objects. It promotes code reuse and establishes hierarchical relationships between objects.
In JavaScript, inheritance is achieved through prototype-based inheritance, where objects inherit from other objects through their prototype chains.

Polymorphism:

Polymorphism enables objects to take on different forms or respond differently to the same method of invocation. It fosters flexibility and extensibility in code design.
In JavaScript, polymorphism is achieved through dynamic method binding and the ability to override methods inherited from prototypes.

Abstraction:

Abstraction involves hiding complex implementation details and exposing only the essential features of an object.
It allows developers to work at a higher level of abstraction without worrying about the internal complexities, promoting code readability and maintainability.

Conclusion:

Object-oriented programming in JavaScript provides a structured approach to building scalable and maintainable applications. By embracing OOP principles such as encapsulation, inheritance, polymorphism, and abstraction, developers can write more organised and efficient code.

Stay tuned for the next installment, where we'll dive into encapsulation by exploring how it keeps your code organised and secure using a simple example involving a coffee machine. Until then, happy coding!

👨‍💻 Splice method in JavaScript : Unveiling the Magic of JavaScript Arrays

Manikandan K — Fri, 01 Mar 2024 07:13:36 +0000

In the vast landscape of JavaScript, arrays reign supreme as indispensable tools for data manipulation. Among the myriad methods available for array manipulation, one stands out as the cornerstone of versatility and power: the splice() method. In this article, we embark on a journey to uncover the secrets and nuances of this exceptional method, exploring its ability to create, delete, and update elements within arrays.

What is splice()?

The splice() method adds and/or removes array elements.
The splice() method overwrites the original array.

syntax
array.splice(start) array.splice(start, deleteCount) array.splice(start, deleteCount, item1) array.splice(start, deleteCount, item1, item2) array.splice(start, deleteCount, item1, item2, ...itemN)

Creating, Deleting, and Updating with Ease

Whether you want to add something new, remove the old, or update what's already there, splice() has got you covered.

Adding Elements

Say you have an array of names and you want to add a new one to it. With splice(), you can do that without breaking a sweat.

Updating Elements

Sometimes you just need to freshen things up a bit. With splice(), you can easily swap out old data for new, keeping your array looking sharp.

Deleting Elements

Maybe you've got too many items in your array, or some of them are just no longer needed. splice() can help you get rid of them in a snap.

Insert element

Source code:

const name = ['Manikandan', 'Aradvind', 'Kathiresan', 'Susila'];
console.log(name) 
// [ 'Manikandan', 'Aradvind', 'Kathiresan', 'Susila' ]


// CREATE
name.splice(name.length, 1, "Vignesh");
console.log(name) 
// [ 'Manikandan', 'Aradvind', 'Kathiresan', 'Susila', 'Vignesh' ]

// UPDATE
name.splice(1, 1, "Aravind");
console.log(name)
// [ 'Manikandan', 'Aravind', 'Kathiresan', 'Susila', 'Vignesh' ]


// DELETE
name.splice(0,1);
console.log(name)
// [ 'Aradvind', 'Kathiresan', 'Susila', 'Vignesh' ]



// INSERT INBETWEEN
name.splice(3, 0, "Siva");
console.log(name)
// [ 'Aradvind', 'Kathiresan', 'Susila', 'Siva', 'Vignesh' ]


// INSERT START
name.splice(0, 0, "Aswin");
console.log(name)
// [ 'Aswin', 'Aradvind', 'Kathiresan', 'Susila', 'Siva', 'Vignesh' ]

Conclusion

When it comes to working with arrays in JavaScript, splice() is the method you'll want to have in your toolkit. Its ability to create, delete, and update elements makes it a true powerhouse for data manipulation. So next time you find yourself wrangling with arrays, remember the magic of splice() and let it work its wonders for you.

React memo - Performance Optimization

Manikandan K — Mon, 19 Feb 2024 07:18:04 +0000

React.memo(Component)

Performance optimization is an important factor in web development.
React.memo as a higher-order component used for optimizing functional components by memoizing their output.
React uses “memoization” as an optimization technique to speed up the rendering process of the components.

React.memo() was introduced with React 16.6 to avoid unnecessary re-renders in functional components.
It is a higher-order component that accepts another component as a prop.
It will only render the component if there is any change in the props.
Here, the parent renders again anytime I make a change to its state in the parent component. A child is also rendered again. However, there are no modifications or effects for youngsters. Extraneous rework.

Here, the parent renders again anytime I make a change to its state in the parent component. A child is also rendered again. However, there are no modifications or effects for youngsters. Extraneous rework.

React.memo(ChildComponent)

My child component is wrapped to React.memo (child) in this instance. It is therefore rendered only when my props for this child change.

JavaScript Single thread

Manikandan K — Wed, 14 Feb 2024 11:19:11 +0000

JavaScript is a synchronous, blocking, single-threaded language.

Synchronous

Synchronously means that the programmer is executed line by line.
In JavaScript, synchronous is a behavior where tasks are executed one after another in a top-down approach.
That means each task must wait for the previous one's completion.
In other words, synchronous code executes sequentially, and if a task takes a long time to complete, it can block the execution of subsequent tasks.

Blocking

It refers to blocking further or next functions or operations until the current task is finished.**

Single thread
You know how, when you're trying to juggle multiple tasks at work or at home, you can only focus on one thing at a time? You might be writing an email, and you can't start another task until you hit send.

That's how JavaScript works too—it can only do one thing at a time.
If it's busy doing something like fetching data from a server or animating a web-page, it can't do anything else until it's finished.

console.log("Task Start");

function someFunction() {
  console.log("First Execution");
  console.log("Second Execution");
}

someFunction();

console.log("Task End");

Output:

summary
when a function like someFunction() is executed synchronously, it means that the JavaScript code will run step by step, in order.
So, when someFunction() is called, the program won't move on to the next line (console.log("Task End")) until someFunction() finishes running all its code.

But how multi thread / Non-Blocking?

JavaScript nature behavior is single thread. But Yes, it's possible to achieve concurrency in JavaScript using techniques like Web Workers in web browsers and Worker Threads in Node.js. These mechanisms allow you to run JavaScript code in separate threads, enabling concurrent execution and improving performance for certain tasks. While JavaScript itself remains single-threaded in its core, these technologies provide a way to leverage multi-threading capabilities in JavaScript environments.

Controlled vs Uncontrolled Components in React

Manikandan K — Thu, 01 Feb 2024 10:17:03 +0000

Controlled vs Uncontrolled Component
Controlled Component:

In a controlled component, form data is handled by a React component - (state)
The internal state (not react state) is not maintained.
Validation is easy.
Controlled by the parent component.

import React, { useState } from 'react';

const ControlledComponent = () => {
    const [name, setName] = useState("");
    const handleChange = (e) => {
        setName(e.target.value)
    };

    const handleSubmit = () => {
        alert(name)
    }

    return (
        <>
            <form onSubmit={handleSubmit}>
                <label>Name</label>
                <input type="text" value={name} onChange={handleChange} />
                <button type='submit'>Submit</button>
            </form>
        </>
    )
}

export default ControlledComponent

Uncontrolled Component:

Uncontrolled component, form data is handled by a DOM Element - (ref)
Internal state maintained.
Validation is much more complex.
Controlled by DOM itself.

import React, { useRef } from 'react'

const UncontrolledComponent = () => {
    const inputRef = useRef(null);

    const handleSubmit = () => {
        alert(inputRef.current.value)
    }

    return (
        <>
            <form onSubmit={handleSubmit}>
                <label>Name</label>
                <input type="text" ref={inputRef} />
                <button type='submit'>Submit</button>
            </form>
        </>
    )
}

export default UncontrolledComponent

State vs Props in React

Manikandan K — Thu, 01 Feb 2024 06:31:41 +0000

State

The state is a built-in React object / that is used to contain data or information /about the component
State is Mutable (changeable)

import React, { useState } from "react";

const App = () => {
  // here defined name as a state variable
  const [name, setName] = useState('Manikandan');
  return <h2>Hi, I am {name}. </h2>
}

export default App;

Props

Props allow you to pass data / from one component to other components / as an argument.
Props are immutable (not changeable)

import React, { useState } from "react";

const App = () => {
  const [name, setName] = useState('Manikandan');
  // here pass the (name state) to the Display component as props
  return <Display name={name} />
}

const Display = (props) => {
  // Here receive the name as props
  // we can use (props) or ({name})
  return <h2>Hi, I am {props.name}. </h2>
}

export default App;