What is React?

Updated May 16, 2026

Short answer

What is React?

Meta React is a JavaScript library used for building user interfaces (UI), especially for single-page applications (SPAs).

It helps developers create fast, reusable, and interactive web applications by breaking the UI into small reusable pieces called components.

React was created by Jordan Walke at Meta.

Example:

JSX

function App() {
  return <h1>Hello World</h1>;
}

This code creates a UI component that displays:

TEXT

Hello World

---

Deep explanation

Why React Was Created

Before React, developers used traditional JavaScript or libraries like jQuery.

Problem with old approach:

Direct DOM manipulation was slow
Code became messy
UI state was hard to manage
Reusing UI was difficult

Imagine this:

HTML

<button id="btn">Like</button>
<p id="count">0</p>

Traditional

JavaScript

1let count = 0;
2
3document.getElementById("btn").addEventListener("click", () => {
4  count++;
5  document.getElementById("count").innerText = count;
6});

This works for small apps.

But imagine:

Facebook feed
Instagram
Netflix
Gmail

Thousands of UI updates happen constantly.

Managing DOM manually becomes very difficult.

React solved this problem.

---

Core Concepts of React

---

1. Component-Based Architecture

React applications are built using components.

A component is an independent reusable UI block.

Example:

JSX

1function Header() {
2  return <h1>My Website</h1>;
3}
4
5function Footer() {
6  return <p>Copyright 2026</p>;
7}
8
9function App() {
10  return (
11    <div>
12      <Header />
13      <Footer />
14    </div>
15  );
16}

--- Here:

Header is a component
Footer is another component
App combines them

Benefits:

Reusability
Cleaner code
Easy maintenance
Scalable architecture

---

2. JSX (JavaScript XML)

React uses JSX.

JSX allows writing HTML inside JavaScript.

Example:

JSX

const element = <h1>Hello React</h1>;

Without JSX:

JavaScript

1const element = React.createElement(
2  "h1",
3  null,
4  "Hello React"
5);

JSX makes code:

More readable
Easier to write
Similar to HTML

---

Important Interview Point

JSX is NOT HTML.

It gets converted into JavaScript by Babel.

Example conversion:

JSX

<h1>Hello</h1>

becomes:

JavaScript

React.createElement("h1", null, "Hello");

---

3. Virtual DOM

This is one of the MOST IMPORTANT interview topics.

What is DOM?

DOM = Document Object Model

Browser converts HTML into a tree structure.

Example:

HTML

<body>
  <h1>Hello</h1>
</body>

DOM Tree:

TEXT

body
 └── h1
      └── Hello

Updating real DOM is expensive.

---

React Solution → Virtual DOM

React creates a lightweight copy of the real DOM called Virtual DOM.

Process:

React creates Virtual DOM
State changes
React creates new Virtual DOM
React compares old vs new (Diffing)
React updates only changed parts

This process is called:

Reconciliation

---

Example

JSX

1function App() {
2  const [count, setCount] = React.useState(0);
3
4  return (
5    <div>
6      <h1>{count}</h1>
7      <button onClick={() => setCount(count + 1)}>
8        Increment
9      </button>
10    </div>
11  );
12}

When button clicked:

React updates only <h1>
Entire page does NOT reload

This improves performance.

---

4. State in React

State = data managed inside component.

Example:

JSX

1function Counter() {
2  const [count, setCount] = React.useState(0);
3
4  return (
5    <div>
6      <p>{count}</p>
7
8      <button onClick={() => setCount(count + 1)}>
9        Increase
10      </button>
11    </div>
12  );
13}

---

JSX

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

Meaning:

count → current value
setCount → function to update value
0 → initial value

---

5. Props in React

Props = data passed from parent to child component.

Example:

JSX

1function User(props) {
2  return <h1>Hello {props.name}</h1>;
3}
4
5function App() {
6  return <User name="Aman" />;
7}

Output:

TEXT

Hello Aman

---

Important Interview Difference

Feature	Props	State
Mutable?	No	Yes
Managed by	Parent	Component itself
Purpose	Pass data	Store data

---

6. React Hooks

Hooks allow functional components to use React features.

Most important hooks:

useState
useEffect
useRef
useMemo
useCallback
useContext

---

useEffect Example

JSX

1import { useEffect } from "react";
2
3function App() {
4
5  useEffect(() => {
6    console.log("Component mounted");
7  }, []);
8
9  return <h1>Hello</h1>;
10}

--- useEffect handles:

API calls
Timers
Side effects
Event listeners

---

7. One-Way Data Binding

React follows:

Parent → Child Data Flow

Data flows in one direction only.

Benefits:

Easier debugging
Predictable behavior
Better state management

---

8. React is Declarative

Imperative approach:

JavaScript

document.getElementById("box").style.color = "red";

Declarative approach in React:

JSX

1const isRed = true;
2
3return (
4  <div style={{ color: isRed ? "red" : "blue" }}>
5    Hello
6  </div>
7);

You describe:

WHAT UI should look like

React decides:

HOW to update DOM

---

React Lifecycle (Important)

Class Components had lifecycle methods:

JavaScript

componentDidMount()
componentDidUpdate()
componentWillUnmount()

Modern React uses Hooks:

JSX

1useEffect(() => {
2
3  // Mount
4
5  return () => {
6    // Unmount cleanup
7  };
8
9}, []);

---

Why Companies Use React

Big companies using React:

Meta
Netflix
Airbnb
Uber
WhatsApp

Reasons:

Fast rendering
Reusable components
Huge ecosystem
Strong community
SEO support with frameworks like Next.js

---

2. Forgetting Key in Lists ❌

Wrong:

JSX

items.map(item => <li>{item}</li>)

Correct:

JSX

items.map(item => (
  <li key={item.id}>{item.name}</li>
))

Keys help React identify elements efficiently.

---

3. Too Many Re-renders

Wrong:

JSX

setCount(count + 1);

inside render body.

This causes infinite loop.

---

4. Using Props as State

Wrong:

JSX

const [name, setName] = useState(props.name);

Usually unnecessary duplication.

---

5. Not Understanding Dependency Array

Wrong:

JSX

useEffect(() => {
  fetchData();
});

Runs every render.

Correct:

JSX

useEffect(() => {
  fetchData();
}, []);

Runs once.

---

React Interview Questions You MUST Know

Advanced Code Example

Step 1 → useState

JSX

const [todos, setTodos] = useState([]);

Stores todo list.

---

Step 2 → Input State

JSX

const [input, setInput] = useState("");

Stores current textbox value.

---

Step 3 → Controlled Component

JSX

1<input
2  value={input}
3  onChange={(e) => setInput(e.target.value)}
4/>

React controls input value.

This is called:

Controlled Component

---

Step 4 → Adding Todo

JSX

setTodos([...todos, newTodo]);

...todos copies previous array.

New todo appended.

---

Step 5 → Rendering List

JSX

1todos.map(todo => (
2  <li key={todo.id}>
3    {todo.text}
4  </li>
5))

React renders dynamically.

---

Difference Between React and Angular

Feature	React	Angular
Type	Library	Framework
Language	JavaScript	TypeScript
DOM	Virtual DOM	Real DOM
Learning Curve	Easier	Harder
Flexibility	High	Moderate

---

Difference Between React and Vue

Feature	React	Vue
Flexibility	High	Moderate
Community	Larger	Smaller
JSX	Yes	Optional
Learning	Moderate	Easy

---

React Ecosystem

Common libraries used with React:

Purpose	Library
Routing	React Router
State Management	Redux, Zustand
API Calls	Axios
Styling	Tailwind CSS
Forms	React Hook Form
Backend Integration	Firebase

---

Important React Terms

Term	Meaning
Component	Reusable UI block
JSX	HTML-like syntax
Props	Parent-to-child data
State	Dynamic component data
Hooks	Functions for React features
Virtual DOM	Lightweight DOM copy
Reconciliation	DOM diffing process

---

Final Interview Summary

If interviewer asks:

Real-world example

Example: E-Commerce Website

Imagine building Amazon.

Components:

TEXT

1App
2 ├── Navbar
3 ├── Sidebar
4 ├── ProductList
5 │     ├── ProductCard
6 │     ├── ProductCard
7 │     └── ProductCard
8 └── Footer

Each product card is reusable.

Example:

JSX

1function ProductCard({ name, price }) {
2  return (
3    <div>
4      <h2>{name}</h2>
5      <p>{price}</p>
6    </div>
7  );
8}

Usage:

JSX

<ProductCard name="iPhone" price="$1000" />
<ProductCard name="Laptop" price="$2000" />

---

Common mistakes

## 1. Mutating State Directly ❌
Wrong:
```jsx
count = count + 1
```
Correct:
```jsx
setCount(count + 1)
```
Reason:
React re-renders only when setter function used.
---
## Beginner
1. What is React?
2. What is JSX?
3. Difference between state and props?
4. What is Virtual DOM?
5. What are hooks?
6. What is useEffect?
7. Why keys are important?
---
## Intermediate
1. What is reconciliation?
2. Controlled vs uncontrolled components
3. Lifting state up
4. Memoization
5. useMemo vs useCallback
6. Context API
7. React Router
---
## Advanced
1. Fiber architecture
2. Server-side rendering
3. Hydration
4. Concurrent rendering
5. React performance optimization
6. Redux vs Context API
7. React Suspense
---
## Todo App
```jsx
import React, { useState } from "react"
function TodoApp() {
const [todos, setTodos] = useState([])
const [input, setInput] = useState("")
const addTodo = () => {
const newTodo = {
id: Date.now(),
text: input
}
setTodos([...todos, newTodo])
setInput("")
}
return (
<div>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
/>
<button onClick={addTodo}>
Add
</button>
<ul>
{todos.map(todo => (
<li key={todo.id}>
{todo.text}
</li>
))}
</ul>
</div>
)
}
export default TodoApp
```
---

Follow-up questions

What is the difference between React and React Native?
Why is Virtual DOM faster?
What is component re-rendering?
What are controlled components?
Explain hooks in detail.
Explain useMemo with example.
Explain Context API.
Explain Redux flow.
What causes unnecessary re-renders?
Explain React Router.

Short answer

What is React?

Deep explanation

Why React Was Created

Core Concepts of React

1. Component-Based Architecture

2. JSX (JavaScript XML)

Important Interview Point

3. Virtual DOM

What is DOM?

React Solution → Virtual DOM

Reconciliation

Example

4. State in React

5. Props in React

Important Interview Difference

6. React Hooks

useEffect Example

7. One-Way Data Binding

Parent → Child Data Flow

8. React is Declarative

React Lifecycle (Important)

Why Companies Use React

2. Forgetting Key in Lists ❌

3. Too Many Re-renders

4. Using Props as State

5. Not Understanding Dependency Array

React Interview Questions You MUST Know

Advanced Code Example

Step 1 → useState

Step 2 → Input State

Step 3 → Controlled Component

Controlled Component

Step 4 → Adding Todo

Step 5 → Rendering List

Difference Between React and Angular

Difference Between React and Vue

React Ecosystem

Important React Terms

Final Interview Summary

Real-world example

Example: E-Commerce Website

Common mistakes

Follow-up questions

More React interview questions