React is all about States

I would like to clear the basic understanding of React through this blog. I’ll try to help you feel confident by sharing my journey of learning over the years. I hope that my approach and perspective help you build a better understanding of React and make your React journey easier.

---

First things first: What is the Virtual DOM in React?

DOM stands for Document Object Model. It is a tree-like structure of all the HTML elements present on your website. The Virtual DOM in React is a copy of the actual DOM.

Let’s understand how it works. In React, whenever any element or part of the website changes, those changes are first reflected in the Virtual DOM — not directly in the actual DOM. Instead of refreshing the whole page, React compares the Virtual DOM with the actual DOM and only updates the parts that have changed. This avoids unnecessary re-rendering of the entire DOM tree and improves performance.

I hope this clears your understanding of the Virtual DOM and how it works.

---

How Does React Handle Changes?

In React, every element, behavior, or function can have a state, and these are managed using states and hooks.

Let me break this down for you. Suppose I want a variable whose value changes based on some behavior — I’ll define the variable with a default value (or behavior) and then define how that state should update. This simply means that anything dynamic in your application should have a current state and a way to update that state based on certain conditions.

---

What are Hooks in React?

Hooks are one of the main reasons why React is a popular library for building dynamic frontends. Hooks are built-in utility functions in React used for various tasks, and you can also create custom hooks based on your project needs.

In simple words, hooks are used to declare and manage states and behavior in React. Each hook serves a different purpose depending on the use case. Let's look at some commonly used hooks:

---

1. useState Hook

This hook is used to declare and maintain local state in a component. It’s perfect for managing small dynamic behaviors inside a component.

Syntax:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

---

2. useRef Hook

This hook is used to reference a DOM element and control its behavior. You can use it to focus input fields, play/pause videos, and more.

Example:

import React, { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Click the button to focus me" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

---

3. useContext Hook

useContext is used to manage global states across your application. Unlike useState, which is used at a local or nested level, useContext allows you to share states between parent and child components without passing props manually.

Example:

import React, { useContext, createContext } from 'react';

const UserContext = createContext();

function App() {
  return (
    <UserContext.Provider value="Vrutika">
      <Child />
    </UserContext.Provider>
  );
}

function Child() {
  const user = useContext(UserContext);
  return <p>Hello, {user}</p>;
}

---

4. useReducer Hook

This hook is helpful for managing complex state logic, like slicing state into parts and performing specific actions. It’s useful in large applications where state needs to be updated in multiple places consistently.

Example:

import React, { useReducer } from 'react';

const initialState = 0;

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      return state;
  }
}

function Counter() {
  const [count, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

---

5. useEffect Hook

This hook is used to perform side effects in your application, like fetching data, listening to events, or setting up timers. It runs code after the component is rendered and can be controlled using the dependency array.

The dependency array tells useEffect when to re-run. For example, if you pass a state variable in the array, the effect runs every time that variable changes.

Example:

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((result) => setData(result));
  }, []); // Empty dependency array means run once on mount

  return (
    <div>
      <h3>Fetched Posts:</h3>
      {data.slice(0, 5).map((post) => (
        <p key={post.id}>{post.title}</p>
      ))}
    </div>
  );
}

---

Final Thoughts

There are many more hooks in React, but learning these few — and understanding how state and behavior work using them — will really help you in your React journey. These hooks allow you to build both static and dynamic components with ease.

---

I'd love to hear about your approach to learning React as well! Does my way of explaining things help you? Let me know your feedback — I’d be happy to improve.