React Made Simple: Components, Hooks (useState), and the Virtual DOM Explained

If you're starting your React journey, understanding Components, Hooks (useState), and the Virtual DOM will make learning every advanced topic much easier.

In this blog, we'll explore these fundamental concepts with examples.

---

1. What is a Component?

A component is the fundamental building block of a React application. It is an independent, reusable piece of UI that contains its own structure, logic, and behavior.

Instead of writing the same HTML repeatedly, React allows developers to create components once and reuse them wherever needed.

For example, a website may contain:

• Header
• Navigation Bar
• Sidebar
• Product Card
• Footer

Each of these can be created as separate components and reused throughout the application.

Functional Component Example

function Header() {
  return <h1>Welcome to React</h1>;
}

export default Header;

The component can then be rendered using:

<Header />

React treats the component as a custom HTML element and renders the UI returned by the function.

---

Advantages of Components

• Improves code reusability.
• Makes applications easier to maintain.
• Separates different parts of the UI into manageable units.
• Encourages modular development.
• Simplifies debugging and testing.

---

2. Types of Components

React mainly provides two types of components.

Class Component

Before React 16.8, class components were commonly used because they could manage state and lifecycle methods.

Example:

class Welcome extends React.Component {
  render() {
    return <h1>Hello React</h1>;
  }
}

Characteristics:

• Uses JavaScript classes.
• Supports state.
• Supports lifecycle methods.
• More verbose and complex.

---

Functional Component

Functional components are regular JavaScript functions that return JSX.

Example:

function Welcome() {
  return <h1>Hello React</h1>;
}

Characteristics:

• Easy to understand.
• Less code.
• Better readability.
• Supports Hooks.
• Preferred in modern React applications.

Today, most React applications are built using functional components because they are simpler and more maintainable.

---

Difference Between Class and Functional Components

Class Component	Functional Component
Uses JavaScript classes	Uses JavaScript functions
More code	Less code
Uses this keyword	Does not use this
State managed using this.state	State managed using Hooks
Uses lifecycle methods	Uses Hooks such as useEffect
Less common in new projects	Preferred in modern React

---

3. What are Hooks?

Hooks are special built-in React functions that allow functional components to use React features such as state, side effects, context, and references.

They were introduced in React 16.8.

Before Hooks, developers often used class components whenever they needed state or lifecycle methods. Hooks removed this limitation by enabling functional components to access these features.

Examples of Hooks include:

• useState
• useEffect
• useContext
• useRef
• useReducer

---

4. What is useState?

useState is a built-in React Hook used to create and manage state inside a functional component.

State represents data that can change over time. Whenever state changes, React automatically re-renders the component and updates the user interface.

Syntax:

const [count, setCount] = useState(0);

Explanation:

• count stores the current state value.
• setCount updates the state.
• useState is the Hook.
• 0 is the initial value.

---

Counter Example

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count + 1);
  }

  return (
    <>
      <h2>Count: {count}</h2>
      <button onClick={increment}>Increment</button>
    </>
  );
}

export default Counter;

How it works:

1. Initially, count is 0.
2. Clicking the button calls increment().
3. setCount(count + 1) updates the state.
4. React re-renders the component.
5. The updated value is displayed automatically.

---

Why use useState?

useState is commonly used for:

• Counter applications
• Like buttons
• Show/Hide password functionality
• Theme toggles
• Form inputs
• Shopping cart counters
• Dynamic UI updates

---

5. What is the Virtual DOM?

The Virtual DOM is a lightweight JavaScript representation of the Real DOM.

Instead of updating the browser's DOM directly after every change, React first updates the Virtual DOM.

React then compares the updated Virtual DOM with the previous version using a process called Diffing.

After identifying the changes, React updates only the necessary parts of the Real DOM.

This process improves rendering performance because manipulating the Real DOM is comparatively expensive.

---

How the Virtual DOM Works

1. The component renders for the first time.
2. React creates a Virtual DOM tree.
3. When state changes, React creates a new Virtual DOM.
4. React compares the old and new Virtual DOM trees.
5. Only the changed elements are updated in the Real DOM.
6. The browser reflects the changes efficiently.

---

Example

Suppose a page contains:

• Header
• Sidebar
• Footer
• Counter

If only the counter value changes from 5 to 6, React updates only the counter element instead of rebuilding the entire page.

This selective update improves application performance.

---

Advantages of the Virtual DOM

• Faster UI updates.
• Efficient DOM manipulation.
• Better application performance.
• Reduces unnecessary rendering.
• Improves user experience.
• Simplifies UI updates for developers.

---

Conclusion

Components, Hooks, and the Virtual DOM are among the most important concepts in React.

Components encourage reusable and modular UI development. Functional components combined with Hooks such as useState make React applications simpler and easier to maintain. The Virtual DOM optimizes rendering by updating only the parts of the interface that have changed, resulting in better performance and a smoother user experience.

Understanding these concepts forms a strong foundation for learning more advanced React topics such as Props, useEffect, Routing, Context API, and state management libraries.