React | Notion

What is React?

React is a JavaScript library used for building user interfaces, especially single-page applications (SPAs). It allows developers to create reusable UI components.

Key Points:
- Developed by Meta (Facebook).
- Uses component-based architecture.
- Uses Virtual DOM for fast updates.
- Supports one-way data binding.
- Mainly used for building frontend applications.
One-line Summary:

React is a JavaScript library for building fast, reusable, and dynamic user interfaces using components.
Why use React?

React is used to build fast, scalable, and maintainable user interfaces for modern web applications.

Key Points:
- Component-based architecture → reusable and modular code.
- Virtual DOM → faster UI updates.
- One-way data flow → predictable state management.
- Strong community and ecosystem.
- Good for building Single Page Applications (SPAs).
One-line Summary:

React is used because it makes building dynamic, scalable, and high-performance UIs easier and more efficient.
Virtual DOM

Virtual DOM is a lightweight copy of the real DOM that React uses to improve performance. Instead of updating the real DOM directly, React first updates the Virtual DOM and then efficiently updates only the changed parts in the real DOM.

Key Points:
- Faster than direct DOM manipulation.
- Uses a diffing algorithm to find changes.
- Minimizes unnecessary re-rendering.
- Improves performance in large applications.
One-line Summary:

Virtual DOM is a lightweight copy of the real DOM that helps React update the UI efficiently.

Difference between state and props.

Feature	Props	State
Meaning	Data passed from parent to child	Data managed inside a component
Mutability	Immutable (cannot be changed)	Mutable (can be changed using setState/useState)
Controlled By	Parent component	The component itself
Purpose	Make components reusable	Manage dynamic data

Key Points:

Props are read-only.
State is used for dynamic UI updates.
When state changes, component re-renders.

One-line Summary:

Props are read-only data passed from parent, while state is internal data managed and updated within a component.

What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that allows writing HTML-like code inside JavaScript in React.

Key Points:
- Makes UI code more readable and structured.
- JSX is converted into React.createElement() by Babel.
- Allows embedding JavaScript using {}.
- Must return a single parent element.
Example:
```
const element = <h1>Hello Rohan</h1>;
```
One-line Summary:

JSX is a syntax that lets you write HTML-like code inside JavaScript for building React components.

Functional vs class components

Feature	Functional Component	Class Component
Syntax	Simple JavaScript function	ES6 class
State	Uses Hooks (`useState`)	Uses `this.state`
Lifecycle	Uses Hooks (`useEffect`)	Uses lifecycle methods
`this` keyword	Not used	Required
Code Complexity	Simple & shorter	More verbose

Key Points:

Functional components are modern and preferred.
Class components were used before Hooks.
Hooks made functional components powerful.

One-line Summary:

Functional components are simpler and use Hooks, while class components use classes and lifecycle methods.

What is useState?

useState is a React Hook that allows functional components to manage state.

Key Points:
- Used only inside functional components.
- Returns an array → [state, setState].
- Updating state triggers re-render.
- State updates are asynchronous.
Example:
```
import { useState } from "react";

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

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}
```
One-line Summary:

useState is a React Hook used to add and manage state inside functional components.
What is useEffect?

useEffect is a React Hook used to handle side effects in functional components, like API calls, timers, or DOM updates.

Key Points:
- Runs after component renders.
- Can control execution using dependency array.
- Used for API calls, subscriptions, event listeners.
- Can return a cleanup function.
Example:
```
import { useEffect } from "react";

useEffect(() => {
  console.log("Component mounted");

  return () => {
    console.log("Cleanup");
  };
}, []);
```
One-line Summary:

useEffect is a Hook used to handle side effects and lifecycle behavior in functional components.
Dependency array in useEffect
What is controlled component?
Uncontrolled component
What is lifting state up?
What is prop drilling?
How to avoid prop drilling
What is context API?
What is useContext?
What is reconciliation?
What is key in list?
Why keys are important?
What is memo?