✅ What is React?

React is a JavaScript library developed by Facebook for building user interfaces, particularly single-page applications (SPAs). It’s component-based, declarative, and enables fast UI updates.

🧱 Core Concepts in React

1. Components

• Function components – the modern way.
• Class components – legacy but still found in codebases.

2. JSX

JSX is a syntax extension for JavaScript that looks like HTML and is used to describe the UI.

const Hello = () => <h1>Hello World</h1>;

3. Props (Properties)

Used to pass data from parent to child components.

const Welcome = ({ name }) => <h1>Hi {name}</h1>;

4. State

Holds local component data that can change over time.

• Functional: useState
• Class: this.state

🎯 Functional vs Class Components

Feature	Class Component	Functional Component
Syntax	extends React.Component	Plain JavaScript functions
State Management	this.state, this.setState()	useState()
Lifecycle Methods	componentDidMount, etc.	useEffect()
Readability	Verbose	Concise
Performance	Slightly slower (more boilerplate)	Faster and optimized with Hooks
Modern Best Practice	❌ Legacy	✅ Recommended
Access to Hooks	❌	✅

🧠 Functional Component Example

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h2>{count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

🏛️ Class Component Example

import React from "react";

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h2>{this.state.count}</h2>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

🚀 Folder Structure (Best Practice)

src/
│
├── components/
│   └── Button.jsx
├── pages/
│   └── Home.jsx
├── hooks/
│   └── useFetch.js
├── context/
│   └── AuthContext.js
├── App.jsx
├── index.js

🔍 Real DOM vs Virtual DOM in React

Feature	Real DOM	Virtual DOM
Definition	Actual DOM rendered by browser	In-memory JS object representation
Update Speed	Slow	Fast (via diffing and batching)
Efficiency	Low (re-renders whole tree)	High (only updates changes)
Re-rendering	Full tree reflow	Selective updates
Use in React	Browser managed	React managed
Example Frameworks	jQuery, Vanilla JS	React, Vue, Angular (conceptually)

✅ Feature of React

Sure! Here are the key features of React in short:

1. JSX – JavaScript syntax extension to write HTML-like code.
2. Components – Reusable, modular UI blocks.
3. Virtual DOM – Efficient UI updates via diffing.
4. One-way Data Binding – Data flows from parent to child.
5. Hooks – Use state and lifecycle in functional components.
6. Declarative UI – Describe what the UI should look like.
7. Unidirectional Flow – Predictable data handling.
8. React Native Support – Build mobile apps using React.
9. Strong Ecosystem – React Router, Redux, etc.
10. Community & Tooling – Large support and dev tool

✅ React Limitation

Here are the limitations of React (short and clear):

1. JSX Complexity – JSX can be confusing for beginners.
2. Only UI Layer – React handles view only, needs other libraries for routing, state, etc.
3. Fast Updates Can Break Things – Frequent changes require constant learning.
4. SEO Limitations – Without SSR (like Next.js), React apps can struggle with SEO.
5. Boilerplate Code – Setting up large apps needs config and structure.
6. Learning Curve – Advanced concepts (hooks, context, refs) can be complex.
7. Poor Documentation for Ecosystem Tools – Some third-party libraries are under-documented.
8. Too Many Choices – State management, routing, etc., have many competing options.

✅ JSX (JavaScript XML)

JSX is a syntax extension for JavaScript used in React to describe UI elements in a way that looks like HTML.

🔹 Example:

const element = <h1>Hello, world!</h1>;

This looks like HTML but is actually converted to JavaScript under the hood using Babel:

const element = React.createElement("h1", null, "Hello, world!");

🧠 Virtual DOM – Explained Simply

The Virtual DOM (VDOM) is a lightweight JavaScript copy of the Real DOM used by React to efficiently update the UI.

🔹 How It Works:

1. UI is built in Virtual DOM.
2. When state/props change, a new VDOM is created.
3. React compares (diffs) old vs new VDOM.
4. Only the changed parts are updated in the Real DOM.

✅ Benefits:

• Faster UI updates
• Improved performance
• Efficient rendering
• Better user experience

❓ Why Doesn’t the Browser Read JSX?

Because JSX is not valid JavaScript or HTML — it’s a syntax extension that browsers don’t understand natively.

Before JSX runs in the browser, tools like Babel convert it into pure JavaScript:

🔍 React ES6 vs ES5 – Key Differences

React code can be written using ES5 (older JavaScript) or ES6+ (modern JavaScript with new features). Modern React prefers ES6+ due to cleaner syntax and better support for components.

🆚 Comparison Table: ES5 vs ES6 in React

Feature	ES5 (Old Way)	ES6 (Modern Way)
Component Creation	React.createClass()	class extends React.Component
Variable Declaration	var	let / const
Function Declaration	function () {}	Arrow function () => {}
Binding this	Manual bind in constructor	Arrow functions auto-bind this
Props Access	this.props.name	this.props.name (same)
State Initialization	Inside getInitialState()	Inside constructor or hooks
Imports	var React = require('react')	import React from 'react'
Export	module.exports = Component	export default Component

🔍 React vs Angular – Quick Comparison

Feature	React	Angular
Type	Library for UI	Full-fledged framework
Language	JavaScript + JSX	TypeScript
Architecture	View (V in MVC)	MVC/MVVM
Learning Curve	Easy to moderate	Steeper (more concepts)
DOM	Virtual DOM	Real DOM with change detection
Data Binding	One-way	Two-way and one-way
Component-Based	✅ Yes	✅ Yes
State Management	External (Redux, Context, etc.)	Built-in services & RxJS
Routing	External (React Router)	Built-in
Performance	Fast with VDOM	Slightly heavier but optimized
Mobile Support	React Native	Angular with Ionic or NativeScript
Community & Ecosystem	Huge community, flexible choices	Strong, opinionated ecosystem
Use Case	SPAs, UIs, lightweight apps	Enterprise-level, large-scale apps

✅ Choose React: For flexibility, lightweight UIs, and faster development
✅ Choose Angular: For structured enterprise apps with built-in tooling

🔍 render() and React.Fragment in React

🧱 render() Method

• Used only in class components.
• It defines what to show on the screen.

✅ Syntax:

class MyComponent extends React.Component {
  render() {
    return <h1>Hello, world!</h1>;
  }
}

🔹 Key Points:

• Required in every class component.
• Should return only one parent element (can be a div or Fragment).

🧩 React.Fragment

• Used to group multiple elements without adding extra DOM nodes.
• Helps avoid unnecessary <div> wrappers.

✅ Syntax:

return (
  <React.Fragment>
    <h1>Title</h1>
    <p>Description</p>
  </React.Fragment>
);

✅ Shorter version using empty tags:

return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

🔍 Props vs State in React

Feature	Props	State
Definition	Data passed from parent to child	Local data managed inside a component
Mutability	Immutable (read-only)	Mutable (can change with setState/useState)
Use Case	For configuration/input	For tracking data that changes over time
Who Controls It	Parent component	Component itself
Accessibility	Available via this.props or props	Available via this.state or [state, setState]
Lifecycle Impact	Does not trigger re-renders by itself	Triggers re-render when updated
Functional Use	Passed as arguments in function components	Managed using useState() in function components

✅ Example of Props:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

✅ Example of State:

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

🧠 Summary

Use state to manage dynamic internal data of a component.
Use props to pass data into a component.

🔄 Updating State in Class Components using this.setState()

In React class components, you never modify this.state directly. Instead, use this.setState() to update the component’s state and trigger a re-render.

✅ Syntax:

this.setState({ key: newValue });

🧠 Example:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h2>{this.state.count}</h2>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

⚠️ Important Notes:

1. Asynchronous: this.setState() is async. Don’t rely on this.state right after setting it.
2. Using Previous State: Use a function for safe updates based on previous state.

this.setState(prevState => ({
  count: prevState.count + 1
}));

3. Triggers Re-render: Every setState() call updates the component and re-renders the UI.

🔍 What does super(props); mean in React?

🔹 Why is it used?

1. super(props) calls the parent constructor (React.Component) and passes the props to it.
2. It allows you to use this.props inside the constructor.

Without calling super(props), this is undefined, and accessing this.props will throw an error.

🔍 Arrow Functions in React

Arrow functions (=>) are widely used in React for cleaner and more concise code, especially in event handlers, functional components, and class methods.

✅ Basic Syntax:

const add = (a, b) => a + b;

✅ 1. Arrow Functions in Functional Components

const Hello = () => {
  return <h1>Hello World</h1>;
};

Or shorter:

const Hello = () => <h1>Hello World</h1>;

✅ 2. Arrow Functions as Event Handlers (Class Components)

class Button extends React.Component {
  state = { count: 0 };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return <button onClick={this.handleClick}>Click {this.state.count}</button>;
  }
}

🔹 Why use arrow functions here?

• Automatically bind this
• No need for manual binding in constructor

✅ 3. Arrow Functions Inline

<button onClick={() => console.log("Clicked")}>Click me</button>

⚠️ Note:

• Avoid using inline arrow functions in performance-critical areas (can cause re-renders).

🧠 Key Benefits:

Feature	Benefit
this binding	No need for manual binding
Concise syntax	Cleaner and shorter function syntax
Best with hooks	Used extensively in modern React

🔍 Stateful vs Stateless Components in React – Quick Comparison

Feature	Stateful Component	Stateless Component
Holds State	✅ Yes (manages its own state)	❌ No state (pure UI rendering)
Re-renders	Based on state or props changes	Based on props only
Type	Class or functional with useState()	Functional (no state/hooks)
Use Case	Dynamic components (e.g., form, counter)	UI-only components (e.g., header, label)
Lifecycle Methods	Available in class components	Not applicable
Complexity	More complex	Simple and reusable

✅ Stateful Component Example (with useState):

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

✅ Stateless Component Example:

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

🔍 Different Phases of a React Component’s Lifecycle (Class-Based)

React class components go through three main lifecycle phases:

🌀 1. Mounting Phase

Component is created and inserted into the DOM.

🔧 Lifecycle Methods:

Method	Purpose
constructor()	Initialize state and bind methods
static getDerivedStateFromProps()	Sync state from props (rarely used)
render()	Returns JSX to render the UI
componentDidMount()	Called once after component is rendered

🔄 2. Updating Phase

Triggered when props or state changes.

🔧 Lifecycle Methods:

Method	Purpose
static getDerivedStateFromProps()	Called on update too
shouldComponentUpdate()	Decide whether to re-render or not
render()	Re-renders UI
getSnapshotBeforeUpdate()	Captures info (like scroll) before update
componentDidUpdate()	Invoked after DOM updates

❌ 3. Unmounting Phase

Component is removed from the DOM.

🔧 Lifecycle Method:

Method	Purpose
componentWillUnmount()	Cleanup: remove timers, listeners, etc.

🔍 Optional: Error Handling Phase

React also includes error handling lifecycle methods.

Method	Purpose
componentDidCatch()	Catch errors in child components
static getDerivedStateFromError()	Update UI when an error occurs

✅ Modern Functional Components Lifecycle (with Hooks)

Phase	Hook
Mount	useEffect(() => { ... }, [])
Update	useEffect(() => { ... }, [deps])
Unmount	useEffect(() => { return () => {...} }, [])

🔢 Order of React Lifecycle Methods (Class Components)

Here is the exact order in which React class component lifecycle methods are called:

🌀 1. Mounting Phase (Component Creation)

Step	Method	Purpose
1️⃣	constructor()	Initialize state and bindings
2️⃣	static getDerivedStateFromProps()	Sync state with props (rare use)
3️⃣	render()	Return JSX
4️⃣	componentDidMount()	Perform side-effects (API calls, etc.)

🔄 2. Updating Phase (State or Props Change)

Triggered by setState() or receiving new props.

Step	Method	Purpose
1️⃣	static getDerivedStateFromProps()	Again (if needed)
2️⃣	shouldComponentUpdate()	Decide whether to re-render
3️⃣	render()	Re-render UI
4️⃣	getSnapshotBeforeUpdate()	Capture info before DOM changes
5️⃣	componentDidUpdate()	Reacts to the update

❌ 3. Unmounting Phase (Component Removal)

Step	Method	Purpose
1️⃣	componentWillUnmount()	Cleanup (timers, subscriptions, etc.)

⚠️ 4. Error Handling Phase (If Error Occurs)

Step	Method	Purpose
1️⃣	static getDerivedStateFromError()	Set fallback UI
2️⃣	componentDidCatch()	Log or handle error details

✅ Full Example: Class Component Lifecycle

import React from "react";

class LifecycleDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    console.log("1️⃣ constructor");
  }

  static getDerivedStateFromProps(props, state) {
    console.log("2️⃣ getDerivedStateFromProps");
    return null; // No state update from props
  }

  componentDidMount() {
    console.log("4️⃣ componentDidMount");
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log("5️⃣ shouldComponentUpdate");
    return true; // allow update
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("6️⃣ getSnapshotBeforeUpdate");
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("7️⃣ componentDidUpdate");
  }

  componentWillUnmount() {
    console.log("8️⃣ componentWillUnmount");
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    console.log("3️⃣ render");
    return (
      <div>
        <h2>Count: {this.state.count}</h2>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default LifecycleDemo;

🔍 What is an Event in React?

An event in React is an action or user interaction (like a click, input, or keypress) that triggers a function to run — similar to JavaScript DOM events.

✅ Example of Event in React:

function MyButton() {
  const handleClick = () => {
    alert("Button clicked!");
  };

  return <button onClick={handleClick}>Click Me</button>;
}

• onClick is the event listener
• handleClick is the event handler function

🧠 What is a Synthetic Event in React?

A SyntheticEvent is React’s cross-browser wrapper around the native browser event.
It wraps native events (like click, submit, change, etc.) and normalizes them so they behave consistently across all browsers.

🔧 Features of SyntheticEvent:

• Has the same interface as a native browser event.
• Works identically across browsers (standardized behavior).
• Supports event pooling (for performance, but deprecated in React 17+).
• Supports preventDefault() and stopPropagation() like native events.

✅ Example Using SyntheticEvent:

function InputExample() {
  const handleChange = (event) => {
    console.log("Input value:", event.target.value); // SyntheticEvent
  };

  return <input type="text" onChange={handleChange} />;
}

Here, event is a SyntheticEvent, not a raw DOM event.

🔍 What is ref in React?

ref (reference) is used in React to access and interact with DOM elements or React elements directly — outside the normal React data flow.

✅ Use Cases of ref:

import React, { useRef } from "react";

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

  const handleClick = () => {
    inputRef.current.focus(); // Access the DOM element directly
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

🔧 How to Modularize Code in React

Modularizing code means breaking your app into small, reusable, and manageable components and files. This improves readability, maintainability, testing, and scalability.

🔄 React.forwardRef() – Explained Simply

React.forwardRef() is a special React function that allows you to forward a ref from a parent to a child component — especially when the child is a functional component.

Normally, refs don’t work directly on functional components because they don’t have an instance. forwardRef fixes that by passing the ref down to a DOM element or another component.

📌 Why use forwardRef()?

• When you want parent access to child DOM elements (e.g., focus, scroll, select).
• When using 3rd-party component libraries that require DOM refs.
• To build reusable, composable input components.

import React, { useRef } from "react";

// 👇 Child component using forwardRef
const CustomInput = React.forwardRef((props, ref) => {
  return <input type="text" ref={ref} placeholder="Type here" />;
});

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

  const focusInput = () => {
    inputRef.current.focus(); // Access input inside child
  };

  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

export default App;

🔍 React.createRef() in React

React.createRef() is used in class components to create a ref object that can be attached to a DOM element or React component to directly access it.

import React from "react";

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef(); // 👈 Create ref
  }

  focusInput = () => {
    this.inputRef.current.focus(); // 👈 Access the DOM node
  };

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={this.focusInput}>Focus Input</button>
      </div>
    );
  }
}

export default MyComponent;

📝 How to Create a Form in React

Forms in React are created using controlled components, where the form inputs are connected to component state using useState() (for functional components) or this.state (for class components).

✅ Functional Component Example (Using useState)

import React, { useState } from 'react';

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value // dynamically updates 'name' or 'email'
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Name: ${formData.name}, Email: ${formData.email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name: <input type="text" name="name" value={formData.name} onChange={handleChange} />
      </label><br />
      <label>
        Email: <input type="email" name="email" value={formData.email} onChange={handleChange} />
      </label><br />
      <button type="submit">Submit</button>
    </form>
  );
}

export default ContactForm;

✅ Class Component Example (Optional)

class ContactForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: '', email: '' };
  }

  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    alert(`Name: ${this.state.name}, Email: ${this.state.email}`);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input name="name" value={this.state.name} onChange={this.handleChange} />
        <input name="email" value={this.state.email} onChange={this.handleChange} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

🔍 Controlled vs Uncontrolled Components in React

These are two ways to handle form inputs in React.

✅ Controlled Component

A component where form data is handled by React state.

🔧 Characteristics:

• Uses useState (or this.state)
• React controls the input’s value
• Always updates via onChange

🧪 Example:

function ControlledInput() {
  const [value, setValue] = React.useState('');

  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

✅ Advantages:

• Easier validation
• Single source of truth
• React has full control

❌ Uncontrolled Component

A component where form data is handled by the DOM (not React).

🔧 Characteristics:

• Uses ref to access DOM node
• No state tracking of input value
• Browser manages the input’s current value

🧪 Example:

function UncontrolledInput() {
  const inputRef = React.useRef();

  const handleSubmit = () => {
    alert(inputRef.current.value); // Access DOM value directly
  };

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </>
  );
}

✅ Advantages:

• Simpler for quick forms
• Less React code
• Slightly better performance in large forms

🔁 Comparison Table

Feature	Controlled	Uncontrolled
Data Source	React State	DOM
Access Value	state	ref.current.value
React Control	Full	Minimal
Use Case	Validation, dynamic UI, logic-based forms	Simple or 3rd-party uncontrolled forms
Re-render on input	✅ Yes	❌ No

🧠 Summary:

• Use Controlled Components for complex logic, validation, or multi-step forms.
• Use Uncontrolled Components for simpler or read-only scenarios.

🔍 What is a HOC (Higher-Order Component) in React?

A Higher-Order Component (HOC) is a function that takes a component as input and returns a new enhanced component.

Think of it as a component wrapper that adds reusable behavior (like logging, access control, or data fetching).

const EnhancedComponent = higherOrderComponent(WrappedComponent);

🧠 Real Example:

// HOC that adds loading spinner behavior
function withLoading(Component) {
  return function EnhancedComponent({ isLoading, ...props }) {
    if (isLoading) return <p>Loading...</p>;
    return <Component {...props} />;
  };
}

✅ Usage:

function UserList({ users }) {
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

const UserListWithLoading = withLoading(UserList);

// Rendering this in JSX:
<UserListWithLoading isLoading={false} users={['Ved', 'Amit']} />

📌 Key Characteristics:

Feature	Description
Type	Pure function (no JSX inside HOC itself)
Reusability	Adds logic to multiple components
Props Passing	Must pass down ...props to wrapped component
Naming	Convention: withSomething (e.g., withAuth)
Similar To	Like a middleware for React components

⚠️ Common Use Cases:

• Authentication checks (withAuth)
• Loading spinners (withLoading)
• Error boundaries
• Logging/metrics
• Code reuse for data fetching

🔍 What is the Props Proxy Pattern?

In a props proxy HOC, the HOC intercepts and manipulates props before passing them to the wrapped component.

function withPropsProxy(WrappedComponent) {
  return function EnhancedComponent(props) {
    const newProps = {
      ...props,
      injectedProp: 'new property',
    };

    return <WrappedComponent {...newProps} />;
  };
}

🔍 What is a Pure Component in React?

A Pure Component in React is a class component that implements automatic shallow comparison in its shouldComponentUpdate() method to prevent unnecessary re-renders.

🔍 Example:

class RegularComponent extends React.Component {
  render() {
    console.log('RegularComponent rendered');
    return <div>{this.props.message}</div>;
  }
}

class OptimizedComponent extends React.PureComponent {
  render() {
    console.log('PureComponent rendered');
    return <div>{this.props.message}</div>;
  }
}

Now, if message doesn’t change:

• RegularComponent will still render
• PureComponent will skip rendering

🔑 What is key in React?

In React, a key is a special string attribute you must include when rendering a list of elements. It helps React identify which items have changed, added, or removed efficiently during re-rendering.

const users = ['Ved', 'Amit', 'Sara'];

function UserList() {
  return (
    <ul>
      {users.map((user, index) => (
        <li key={user}>{user}</li>  // 🔑 key is important here
      ))}
    </ul>
  );
}

🔄 What is React Redux?

Redux is a state management library for JavaScript apps, often used with React. It allows you to centralize application state and manage it in a predictable way.

🔺 3 Core Principles of Redux

1. Single Source of Truth
   • All app state is stored in a single store.
2. State is Read-Only
   • The only way to change state is to dispatch an action, not mutate it directly.
3. Changes via Pure Functions (Reducers)
   • State transitions are handled by pure functions called reducers.

🧱 Key Components of Redux

Component	Description
Actions	Plain JS objects describing what happened
Reducers	Functions that take state & action → return new state
Store	Holds the application state and provides methods to access, dispatch, and subscribe
Provider	React-Redux component that makes the Redux store available to child components
connect / hooks	To connect React components to the Redux store (e.g. useSelector, useDispatch)

🔁 Data Flow in Redux

Component → dispatch(action)
          ↓
      Reducer (pure function)
          ↓
      New State (updated store)
          ↓
     React Component re-renders

🔧 Defining an Action

An action is a plain object with a type field:

// action.js
export const increment = () => ({
  type: 'INCREMENT'
});

You can also pass a payload:

export const setUser = (user) => ({
  type: 'SET_USER',
  payload: user
});

🧠 Role of Reducers

A reducer is a pure function that receives the current state and an action, and returns the new state:

const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    default:
      return state;
  }
};

🏬 What is a Redux Store?

The store is the central location that:

• Holds the state
• Allows access via getState()
• Allows updates via dispatch(action)
• Allows subscription via subscribe()

import { createStore } from 'redux';
const store = createStore(counterReducer);

📦 React-Redux Integration

// index.js
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

<Provider store={store}>
  <App />
</Provider>

In your component:

import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  const count = useSelector(state => state);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
    </div>
  );
};

✅ store.subscribe() – What it does

It registers a callback function that gets called every time the Redux store’s state changes.

🧪 Syntax:

const unsubscribe = store.subscribe(() => {
  console.log('State changed:', store.getState());
});

• subscribe() returns an unsubscribe function.
• Call it to stop listening to changes.

🔄 Flux vs Redux

Feature	Flux	Redux
Architecture	Multiple stores	Single store
Dispatcher	Required	Not used
Data Mutation	Mutable via store	Immutable via reducer
State Storage	Inside multiple stores	Inside a single store
Boilerplate	More complex	Simplified with Redux Toolkit

✅ Advantages of Redux

• 📌 Predictable state updates
• avoid prop drilling
• 🔁 Centralized global state
• 🧪 Easier debugging (DevTools)
• 📤 Decouples state from components
• 🔧 Great for large-scale applications
• 🔍 Time-travel debugging
• 🧩 Ecosystem: middleware, dev tools, toolkit

There are several alternatives to Redux for state management in React, depending on your app’s complexity, scalability needs, and developer preference. some example: ContextApi, MOBX, Appolo Client + GraphQL, RXJS

🔁 Redux vs Context API in React – What’s the Difference?

Both Redux and React Context API help in managing global state, but they are fundamentally different tools with different use cases, power, and complexity. Context Api is built-in React feature for passing global data (like themes, user info, etc.) without prop drilling. while Redux is a standalone state management library (can be used outside React) that manages application state using a central store, actions, and reducers.

🔥 Main Difference Between redux and react-redux

	redux	react-redux
What it is	Core library to create and manage global state	Binding library to connect Redux to React components
Provides	createStore(), combineReducers(), applyMiddleware()	Provider, useDispatch(), useSelector(), Note: connect() Before React Hooks (useSelector, useDispatch), this was the primary way to access Redux state and dispatch actions in class-based or functional components.
Usage	Used to build the Redux store and reducers	Used to make React components aware of Redux state
React-specific?	❌ No (can be used with Vue, Angular, etc.)	✅ Yes (designed only for React)

🔄 What is React Router?

React Router is a popular library used in React applications to handle client-side routing — i.e., navigating between different views/components without refreshing the browser.

🧱 Core Concepts in React Router

Concept	Description
BrowserRouter	Enables routing using browser’s history API (clean URLs)
Routes	Container for all route definitions
Route	Defines the path and the component to render
Link / NavLink	Used for navigation (like <a>, but without reload)
useParams, useNavigate, useLocation	React Router hooks for dynamic routing, navigation, etc.

✅ Example: Basic React Router Setup

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

🌐 What is BrowserRouter?

• Uses HTML5 history API (pushState, popState) for clean URLs (e.g., /home, /about)
• Keeps the UI in sync with the URL without reloading the page
• Must wrap your app inside it to enable routing

✅ Advantages of React Router

Advantage	Description
SPA Support	Enables Single Page Application behavior
No Page Reloads	Navigation is fast and dynamic
Dynamic Routing	Supports params, nested routes, and lazy loading
Route Protection	Can add guards based on auth logic
Clean URLs	Uses browser history (BrowserRouter)
Hook Support	useParams, useNavigate, etc., simplify routing logic

📊 Conventional Routing vs React Routing

Feature	Conventional Routing (e.g., PHP, server-rendered)	React Routing (SPA)
Routing Type	Server-side	Client-side (JS in browser)
Page Reload	Full reload on every route change	No reload
Speed	Slower (due to server calls)	Faster (JS handles it instantly)
Data Fetch	Each route triggers a new request	Can fetch data conditionally
URL Mapping	Server determines what page to serve	React component renders view
SEO	Better out of the box	Needs SSR (e.g. Next.js) for SEO

🚀 Extra: Nested Routes Example

<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="settings" element={<Settings />} />
    <Route path="profile" element={<Profile />} />
  </Route>
</Routes>

URL example: /dashboard/settings

🔁 setState() vs replaceState() in React

✅ setState()

• Merges the new state with the existing state.
• Partial update → only updates the keys you specify.
• Commonly used in both class components and

❌ replaceState() (Deprecated)

• Replaces the entire state object instead of merging.

🌐 Components of React Router: BrowserRouter vs HashRouter vs MemoryRouter

React Router provides several router components to control how the routing works depending on the environment and URL handling needs.

🔁 1. BrowserRouter – Most Common for Web Apps

✅ Uses the HTML5 History API (pushState, popState)
🌍 URL looks clean: /home, /about

✅ Example:

import { BrowserRouter, Route, Routes } from 'react-router-dom';
<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

⚠ Requirements:

• Server must be configured to return index.html for all routes (otherwise 404 on refresh)

🔢 2. HashRouter – For Static File Hosts (GitHub Pages, etc.)

✅ Uses the hash (#) portion of the URL
🌐 URLs look like: http://example.com/#/about

✅ Example:

import { HashRouter, Route, Routes } from 'react-router-dom';
<HashRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</HashRouter>

🔧 Good For:

• Apps hosted on static file servers with no server-side routing support

🧠 3. MemoryRouter – In-Memory History (No URL changes)

✅ Keeps routing in memory (no interaction with browser URL)
🧪 Commonly used in unit tests, React Native, or non-browser environments

✅ Example:

import { MemoryRouter, Route, Routes } from 'react-router-dom';
<MemoryRouter initialEntries={['/about']}>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</MemoryRouter>

⚡ Boost React Performance – Top Tips

⚡ 1. Use React.memo() for Functional Components

Wrap components with React.memo to avoid re-rendering unless props change.

const MyComponent = React.memo(function MyComponent(props) {
  return <div>{props.value}</div>;
});

🧠 2. Use useCallback and useMemo

Prevent unnecessary re-creation of functions and values.

const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);
const memoizedValue = useMemo(() => computeExpensiveValue(x), [x]);

🏗️ 3. Code Splitting with React.lazy() and Suspense

Split code by routes/components to reduce initial load size.

const LazyComponent = React.lazy(() => import('./MyComponent'));

🧹 4. Avoid Inline Functions in JSX

They create a new function on every render, breaking memoization.

❌ Bad:

<button onClick={() => doSomething()}>Click</button>

✅ Good:

const handleClick = useCallback(() => doSomething(), []);
<button onClick={handleClick}>Click</button>

🧱 5. Use Key Wisely in Lists

Avoid using array indices as keys in dynamic lists. Use stable unique IDs.

🧩 6. Virtualize Long Lists

Use libraries like react-window or react-virtualized for large lists.

🔄 7. Debounce Expensive Operations

Like search inputs or resize events — use lodash.debounce or useDebounce.

🧪 8. Keep Component State Local Where Needed

Avoid putting everything in global context or Redux — local state is faster.

🚫 9. Avoid Unnecessary Re-renders

Use tools like:

• React Developer Tools
• why-did-you-render library (for debugging excessive renders)

🌍 10. Enable Production Build

For deployment, always build with npm run build to enable minification and performance optimizations.

🔍 What is Shallow Comparison in React?

Shallow comparison means comparing primitive values directly and objects/arrays by reference, not by their internal contents.

Used mainly in:

• React.PureComponent
• React.memo()
• shouldComponentUpdate()

⚠️ Limitation

It does NOT check deep equality of nested values:

const a = { user: { name: "Ved" } };
const b = { user: { name: "Ved" } };

a === b; // false – different references

So if you update nested object values without changing reference, React may not re-render.

📘 React Context API (v16.3+)

The Context API (introduced in React 16.3) provides a way to share global data (like themes, auth, language, etc.) across components without passing props manually at every level.

🧱 Main Parts of Context API

Part	Description
React.createContext()	Creates a Context object
Provider	Provides context data to the component tree
Consumer	Consumes context data (older way)
useContext()	Hook to consume context in functional components (from v16.8)

✅ Example (React 16.3 – Class Component)

// 1. Create Context
const MyContext = React.createContext();

// 2. Create Provider
class MyProvider extends React.Component {
  state = {
    name: 'Ved',
    role: 'Admin'
  };

  render() {
    return (
      <MyContext.Provider value={this.state}>
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

// 3. Consume in Class Component
class MyConsumer extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {context => (
          <div>
            <p>Name: {context.name}</p>
            <p>Role: {context.role}</p>
          </div>
        )}
      </MyContext.Consumer>
    );
  }
}

✅ Modern Way (Post-16.8: Functional + useContext())

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

const ThemeContext = createContext();

const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
};

const Toolbar = () => {
  return <ThemedButton />;
};

const ThemedButton = () => {
  const theme = useContext(ThemeContext); // ✅ Consume context
  return <button className={theme}>I am styled with {theme} theme</button>;
};

🧠 Why Use Context API?

Use Case	Example
Theme switching	Light/Dark mode
Authentication info	User logged in status, token
Language localization	English / Hindi, etc.
Global config or settings	API URLs, toggles

📦 What is PropTypes in React?

PropTypes is a built-in React utility (via the prop-types package) used to validate props passed to a component. It helps catch bugs by ensuring the right type of props are passed at runtime.

//npm install prop-types

import React from 'react';
import PropTypes from 'prop-types';

function Welcome({ name, age }) {
  return <h1>Hello {name}, age {age}</h1>;
}

// ✅ PropTypes definition
Welcome.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number
};

// ✅ Default props (optional)
Welcome.defaultProps = {
  age: 18
};

export default Welcome;

🧩 Common PropTypes

PropTypes Syntax	Description
PropTypes.string	Must be a string
PropTypes.number	Must be a number
PropTypes.bool	Must be a boolean
PropTypes.func	Must be a function
PropTypes.array	Must be an array
PropTypes.object	Must be an object
PropTypes.node	Anything renderable (string, element, fragment, etc.)
PropTypes.element	A React element
PropTypes.any	Any type
PropTypes.symbol	A JS Symbol

🧪 Advanced Examples

🔸 Optional & Required:

ttitle: PropTypes.string,              // optional
title: PropTypes.string.isRequired,  // required

🔸 One of Specific Values

size: PropTypes.oneOf(['small', 'medium', 'large']),

🔸 One of Multiple Types

id: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number
]),

🔸 Array of Specific Types

scores: PropTypes.arrayOf(PropTypes.number),

🔸 Object of Specific Shape

user: PropTypes.shape({
  id: PropTypes.number,
  name: PropTypes.string.isRequired
}),

🔄 What is Memoization in React?

Memoization is an optimization technique that caches the result of a function or component so it only re-computes or re-renders when inputs change. This avoids unnecessary work and boosts performance.

✅ React Memoization Tools

Tool	Use Case
React.memo	Memoize a component
useMemo()	Memoize a value/result
useCallback()	Memoize a function

1️⃣ React.memo (Component-level Memoization)

Prevents re-rendering unless props change. React.memo is just a HOC.

const MyComponent = React.memo(({ name }) => {
  console.log("Rendering MyComponent");
  return <h1>Hello {name}</h1>;
});

2️⃣ useMemo() (Value-level Memoization)

Caches expensive values unless dependencies change.

const expensiveValue = useMemo(() => {
  return computeHeavyTask(input);
}, [input]);

3️⃣ useCallback() (Function-level Memoization)

Caches functions so they don’t get recreated on every render.

const handleClick = useCallback(() => {
  console.log("Clicked!");
}, []);

📡 API Calls in React – GET, POST, PUT, DELETE

Learn how to make different types of API requests in React using fetch() and axios.

🔁 HTTP Methods Overview

Method	Purpose
GET	Retrieve data
POST	Add new data
PUT	Update existing data
DELETE	Remove data

🌐 Example API Endpoints

HTTP Method	Example Path	Use Case
GET	/api/users	Fetch all users
POST	/api/users	Add a new user
PUT	/api/users/:id	Update user by ID
DELETE	/api/users/:id	Delete user by ID

⚙️ Using fetch() (Native)

✅ GET

useEffect(() => {
  fetch('/api/users')
    .then(res => res.json())
    .then(data => setUsers(data));
}, []);

✅ POST

fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Ved', age: 30 })
});

✅ PUT

fetch('/api/users/1', {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ age: 31 })
});

✅ DELETE

fetch('/api/users/1', {
  method: 'DELETE'
});

⚙️ Using axios (Recommended)

✅ Setup

npm install axios

✅ Usage

import axios from 'axios';

// GET
axios.get('/api/users').then(res => setUsers(res.data));

// POST
axios.post('/api/users', { name: 'Ved', age: 30 });

// PUT
axios.put('/api/users/1', { age: 31 });

// DELETE
axios.delete('/api/users/1');

🧠 React Hooks – Complete Guide (Latest Version)

Hooks let you use state and other React features in functional components — without writing class components.

✅ 1. useState()

📘 Description:

useState allows functional components to have local state. It’s the most basic and frequently used hook.

🧪 Syntax:

const [state, setState] = useState(initialValue);

✅ 2. useEffect()

📘 Description:

useEffect is used to perform side effects in function components, such as:

• Data fetching
• Subscribing/unsubscribing
• DOM manipulation
• Setting up timers

It replaces lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount.

🧪 Syntax:

useEffect(() => {
  // effect logic
  return () => {
    // cleanup logic (optional)
  };
}, [dependencies]);

🧠 Example – Fetching Data:

import { useEffect, useState } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []); // Empty dependency array → run once after mount

  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

🔄 useEffect() Dependency Array Behavior

Dependency Array	Behavior in Class Component (Equivalent)
[]	✅ componentDidMount (runs once on mount)
[count]	✅ componentDidUpdate (runs when count changes)
(no array)	✅ Both componentDidMount and componentDidUpdate — runs after every render (initial + updates)

Class Component	Functional Component Equivalent
componentWillUnmount	useEffect(() => { return () => {} }, [])

✅ 3. useContext()

📘 Description:

useContext() is used to access context values in a functional component — replacing the older <Context.Consumer> pattern. It allows you to share global data (like theme, user info, language, etc.) across the component tree without passing props manually at every level.

🧪 Syntax:

const value = useContext(MyContext);

🧠 Example:

// 1. Create context
const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// 2. Use context
function Toolbar() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>I am {theme} themed</button>;
}

✅ 4. useRef()

📘 Description:

useRef() is a React Hook that:

• Gives you a mutable reference object that persists across renders.
• Commonly used to access DOM elements directly.
• Also used to store values that don’t trigger re-render when updated.

import { useRef } from 'react';

function TextInput() {
  const inputRef = useRef();

  const focusInput = () => {
    inputRef.current.focus(); // Access DOM element directly
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

✅ 5. useMemo()

📘 Description:

useMemo() is a React hook used to memoize (cache) expensive calculations so they are only recomputed when their dependencies change.

🔍 Example: Expensive Calculation

import { useMemo, useState } from 'react';

function FibonacciCalculator({ n }) {
  const fib = useMemo(() => {
    console.log("Calculating Fibonacci...");
    const fibonacci = (n) => {
      if (n <= 1) return n;
      return fibonacci(n - 1) + fibonacci(n - 2);
    };
    return fibonacci(n);
  }, [n]);

  return <h3>Fib({n}) = {fib}</h3>;
}

⚠️ Without useMemo:

The expensive fibonacci() function would re-run on every render, even if n hasn’t changed. That’s slow.

✅ 6. useCallback()

📘 Description:

useCallback() is a React hook that returns a memoized version of a function, which is only re-created when one of its dependencies changes. Use it to prevent unnecessary re-creations of functions — especially helpful when passing callbacks to child components.

🔍 Example:

//syntax
const memoizedCallback = useCallback(() => {
  // function logic
}, [dependencies]);

//code
import { useState, useCallback } from 'react';

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

  const increment = useCallback(() => {
    setCount(prev => prev + 1);
  }, []); // Will not re-create on each render

  return (
    <div>
      <p>Count: {count}</p>
      <Button onClick={increment} />
    </div>
  );
}

function Button({ onClick }) {
  console.log("Button rendered");
  return <button onClick={onClick}>Increment</button>;
}

✅ 7. useReducer()

📘 Description:

useReducer() is an alternative to useState() for managing complex state logic — especially when:

• State depends on previous state
• Multiple related state transitions are involved

It’s similar to Redux-style reducers but scoped within a component.

🧪 Syntax:
const [state, dispatch] = useReducer(reducerFunction, initialState);

import { useReducer } from 'react';

const initialState = { count: 0 };

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

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

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

✅ When to Use useReducer()

Situation	Use useReducer()?
Complex state with multiple actions	✅ Yes
State derived from previous state	✅ Yes
Simple toggle or single field state	❌ useState() is simpler

✅ 8. useLayoutEffect()

📘 Description:

useLayoutEffect() is just like useEffect(), but it runs synchronously after all DOM mutations but before the browser repaints.

This means:

• It blocks painting until the effect is complete.
• Useful when you need to measure DOM elements or make visual updates immediately.

🧪 Syntax:

useLayoutEffect(() => {
  // Do something immediately after DOM update
  return () => {
    // Cleanup (optional)
  };
}, [dependencies]);

⚠️ Difference from useEffect()

Feature	useEffect()	useLayoutEffect()
Runs after render?	✅ Yes (async)	✅ Yes (sync, before paint)
Affects paint?	❌ No (runs after paint)	✅ Yes (can block paint)
Usage	API calls, timers, cleanup	DOM measurements, animations

✅ 9. useImperativeHandle()

📘 Description:

useImperativeHandle() is a React hook used with forwardRef() to let child components expose specific methods or properties to the parent.

It’s useful when the parent needs to control or call functions inside the child component, but you want to control exactly what’s exposed — instead of giving full access to the DOM or internal state.

🧪 Syntax:

useImperativeHandle(ref, () => ({
  method1,
  method2,
  // only expose what you want
}), [dependencies]);

⚙️ Example: Expose a Focus Method from a Child Input

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

// 1. Child component with forwardRef
const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  // 2. Expose methods to parent
  useImperativeHandle(ref, () => ({
    focusInput: () => inputRef.current.focus()
  }));

  return <input ref={inputRef} type="text" />;
});

// 3. Parent component
function Parent() {
  const inputRef = useRef();

  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={() => inputRef.current.focusInput()}>
        Focus from Parent
      </button>
    </div>
  );
}

🧠 When to Use useImperativeHandle():

Use Case	✅ Use it?
Parent needs to control child’s function	✅ Yes
Custom modal, input, form handling	✅ Yes
You want to expose only specific methods	✅ Yes
Simple DOM access only	❌ Use useRef() directly

✅ 10. useId() (React 18+)

📘 Description:

useId() is a React 18+ hook used to generate unique, stable IDs for accessibility and SSR (Server-Side Rendering) support.

It’s helpful for linking form elements like <label> and <input> — especially when:

• You need unique IDs in multiple instances of a component
• You’re using SSR and want to prevent ID mismatches

🧪 Syntax:

const id = useId();

🧠 Example: Accessible Form Input

import { useId } from 'react';

function NameInput() {
  const id = useId(); // unique ID for this component instance

  return (
    <div>
      <label htmlFor={id}>Name:</label>
      <input id={id} type="text" />
    </div>
  );
}

Do not call useId() inside .map() — that’s invalid in React. Yes, you can define multiple unique IDs in a component — but you must not define them inside loops using hooks like useId().

✅ 11. useDebugValue()

useDebugValue() is a React Hook used only for debugging custom hooks in React DevTools.

useDebugValue(isOnline ? 'Online' : 'Offline');

In React DevTools, this hook will now display:
🟢 useOnlineStatus: "Online" or 🔴 "Offline"

✅ What Are Custom Hooks?

A custom hook is a JavaScript function whose name starts with use, and it can use other hooks internally (like useState, useEffect, etc.).

🎯 Goal: Extract and reuse logic across multiple components without duplicating code.

🧱 Basic Syntax

function useCustomHook() {
  // use other hooks like useState, useEffect
  return something;
}

🔍 Example 1: useCounter (Simple Reusable Hook)

import { useState } from 'react';

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

  const increment = () => setCount(prev => prev + 1);
  const decrement = () => setCount(prev => prev - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

✅ Use it in any component:

function CounterComponent() {
  const { count, increment, decrement, reset } = useCounter(5);
  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>−</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

✅ Benefits of Custom Hooks

Benefit	Description
♻ Reusability	Share logic between components easily
📦 Separation of Concerns	UI and logic live separately
🔁 Clean Code	Removes duplication, makes components smaller
🧪 Easy Testing	Hook logic can be tested independently

⚛️ React Hook Rules

• Only call hooks at the top level
• Only call hooks from React functions

🚀 What is Concurrent React?

Concurrent rendering allows React to interrupt long rendering tasks and give priority to more important updates (like typing or animations).

⚡️ React 18 enables this with features like startTransition, useTransition, useDeferredValue, and automatic batching.

✅ 1. startTransition() – Mark Updates as Non-Urgent

📘 Description:

Used to mark state updates that are non-urgent, so React can delay them if needed — like updating search results while the user types.

🧪 Example:

import { useState, startTransition } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  function handleChange(e) {
    const value = e.target.value;
    setQuery(value);

    // Mark as low priority
    startTransition(() => {
      const filtered = slowSearch(value); // assume slow function
      setResults(filtered);
    });
  }

  return (
    <>
      <input value={query} onChange={handleChange} />
      <ul>{results.map(r => <li key={r}>{r}</li>)}</ul>
    </>
  );
}

✅ 2. useTransition() – User-Friendly Way to Handle Transitions

📘 Description:

A hook version of startTransition() that also tells you if the transition is pending (still in progress).

🧪 Example:

import { useState, useTransition } from 'react';

function ProductFilter({ products }) {
  const [input, setInput] = useState('');
  const [filtered, setFiltered] = useState(products);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    const value = e.target.value;
    setInput(value);

    startTransition(() => {
      const result = products.filter(p => p.includes(value));
      setFiltered(result);
    });
  };

  return (
    <div>
      <input value={input} onChange={handleChange} />
      {isPending && <p>Loading...</p>}
      <ul>{filtered.map(p => <li key={p}>{p}</li>)}</ul>
    </div>
  );
}

✅ 3. useDeferredValue() – Defer Heavy Calculations

📘 Description:

Defer updates to less important values so they update after more urgent ones (like input typing).

🧪 Example:

import { useState, useDeferredValue } from 'react';

function SearchList({ data }) {
  const [input, setInput] = useState('');
  const deferredInput = useDeferredValue(input); // updates slower

  const filtered = data.filter(item =>
    item.toLowerCase().includes(deferredInput.toLowerCase())
  );

  return (
    <>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <ul>{filtered.map(item => <li key={item}>{item}</li>)}</ul>
    </>
  );
}

React Router v6 Hooks – useNavigate(), useLocaton(), useParams()

useNavigate() replaces history.push() and history.replace(). In older versions (v5 and below), you used history.push directly.

import { useNavigate } from 'react-router-dom';

const Component = () => {
  const navigate = useNavigate();

  // Push (adds to history stack)
  const goToProfile = () => {
    navigate('/profile');
  };

  // Replace (replaces current entry in history stack)
  const replaceWithHome = () => {
    navigate('/', { replace: true });
  };

  return (
    <>
      <button onClick={goToProfile}>Go to Profile</button>
      <button onClick={replaceWithHome}>Replace with Home</button>
    </>
  );
};

🧭 push vs replace

Method	Behavior
navigate(path)	Adds a new entry to the browser history stack
navigate(path, { replace: true })	Replaces the current entry (like redirect)

📦 Passing Parameters with push / navigate

There are two common ways to pass data:

1. Using URL Params (Path Params)

navigate(`/user/${userId}`);

In route:

<Route path="/user/:id" element={<User />} />

In component:

const { id } = useParams();

2. Using state (Hidden / Non-URL)

tnavigate('/profile', { state: { name: 'Ved', role: 'admin' } });

And then access it in the target component:

import { useLocation } from 'react-router-dom';
const Profile = () => {
  const location = useLocation();
  const { name, role } = location.state || {};

  return (
    <div>
      <h1>{name}'s Profile</h1>
      <p>Role: {role}</p>
    </div>
  );
};

✅ Advantage: cleaner URL, good for passing complex data
❌ Data is lost on full page reload (no persistence)

✅ 4. Automatic Batching

📘 Description:

In React 18+, multiple state updates inside:

• Timeouts
• Promises
• Event handlers
  …are batched together to prevent unnecessary re-renders.

🧪 Before vs After:

setCount1(c => c + 1);
setCount2(c => c + 1);

✅ In React 18+, this is automatically batched — only one render occurs.

📌 Summary Table

Feature	Purpose
startTransition	Mark updates as low priority
useTransition	Hook to manage transitions + pending state
useDeferredValue	Delay updates for performance
Automatic Batching	Group multiple updates → fewer renders
Suspense	Async UI handling

🚀 What is the React Profiler?

The React Profiler is a built-in tool in the React Developer Tools extension. It helps you:

• Measure how often components render
• See what caused re-renders
• Identify slow renders and unnecessary updates

🔧 What is Redux Thunk?

A thunk is a function that wraps an expression to delay its evaluation.

In Redux, a thunk is a function that returns another function — this lets you delay dispatching actions or dispatch asynchronous actions (like API calls).

💬 In simple terms:

It allows action creators to return a function instead of an action object.

🚀 Why Use Redux Thunk?

Redux’s dispatch() only handles plain objects.
To handle API calls, delayed actions, or any side-effects, you need middleware like redux-thunk.

📦 How to Set Up Thunk

1. Install:

npm install redux-thunk

2. Apply it to the store:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

📘 Thunk Action Creator Syntax

const fetchUsers = () => {
  return function (dispatch) {
    dispatch({ type: 'FETCH_USERS_REQUEST' });

    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data =>
        dispatch({ type: 'FETCH_USERS_SUCCESS', payload: data })
      )
      .catch(error =>
        dispatch({ type: 'FETCH_USERS_FAILURE', payload: error })
      );
  };
};

✅ This is a thunk: returns a function instead of a plain object

🔁 Using Thunk in Component

import { useDispatch, useSelector } from 'react-redux';
import { fetchUsers } from './actions/userActions';

function UserList() {
  const dispatch = useDispatch();
  const { users, loading } = useSelector(state => state.user);

  useEffect(() => {
    dispatch(fetchUsers()); // Thunk is triggered
  }, []);

  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

✅ Benefits of Redux Thunk

Feature	Description
Async Support	Handles API calls, timeouts, etc.
Logic outside components	Keeps components cleaner
Fine-grained control	Dispatch multiple actions manually
Easy to debug	Follows normal function pattern

❌ Downsides

• Can lead to callback hell for complex flows
• Not as structured as redux-saga or redux-observable
• Logic can get spread out if not modularized well

Complete Redux setup example

complete Redux setup example with a modular folder structure for a store that manages multiple objects (like user, posts, etc.)

🗂 Folder Structure:

/redux
  /store.js
  /reducers
    index.js
    userReducer.js
    postReducer.js
  /actions
    userActions.js
    postActions.js

1️⃣ redux/store.js – Store Configuration

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

📌 Explanation:

• createStore creates the Redux store
• thunk allows async actions
• Uses rootReducer (combined reducers)

2️⃣ redux/reducers/index.js – Combine Reducers

import { combineReducers } from 'redux';
import userReducer from './userReducer';
import postReducer from './postReducer';

const rootReducer = combineReducers({
  user: userReducer,
  post: postReducer
});

export default rootReducer;

📌 Explanation:

• Combines userReducer and postReducer
• The final Redux state will be:

{
  user: {...},
  post: {...}
}

3️⃣ redux/reducers/userReducer.js

const initialState = {
  users: [],
  loading: false,
  error: null
};

export default function userReducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCH_USERS_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_USERS_SUCCESS':
      return { users: action.payload, loading: false, error: null };
    case 'FETCH_USERS_FAILURE':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
}

4️⃣ redux/reducers/postReducer.js

const initialState = {
  posts: [],
  loading: false,
  error: null
};

export default function postReducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCH_POSTS_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_POSTS_SUCCESS':
      return { posts: action.payload, loading: false, error: null };
    case 'FETCH_POSTS_FAILURE':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
}

5️⃣ redux/actions/userActions.js

export const fetchUsers = () => {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_USERS_REQUEST' });
    try {
      const res = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await res.json();
      dispatch({ type: 'FETCH_USERS_SUCCESS', payload: data });
    } catch (err) {
      dispatch({ type: 'FETCH_USERS_FAILURE', payload: err.message });
    }
  };
};

6️⃣ redux/actions/postActions.js

export const fetchPosts = () => {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_POSTS_REQUEST' });
    try {
      const res = await fetch('https://jsonplaceholder.typicode.com/posts');
      const data = await res.json();
      dispatch({ type: 'FETCH_POSTS_SUCCESS', payload: data });
    } catch (err) {
      dispatch({ type: 'FETCH_POSTS_FAILURE', payload: err.message });
    }
  };
};

✅ Usage in React Component (e.g., App.js)

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchUsers } from './redux/actions/userActions';
import { fetchPosts } from './redux/actions/postActions';

function App() {
  const dispatch = useDispatch();
  const { users, loading: usersLoading } = useSelector(state => state.user); //JavaScript object destructuring 
  const { posts, loading: postsLoading } = useSelector(state => state.post);

  useEffect(() => {
    dispatch(fetchUsers());
    dispatch(fetchPosts());
  }, [dispatch]);

  return (
    <div>
      <h1>Users</h1>
      {usersLoading ? <p>Loading Users...</p> : users.map(u => <p key={u.id}>{u.name}</p>)}

      <h1>Posts</h1>
      {postsLoading ? <p>Loading Posts...</p> : posts.map(p => <p key={p.id}>{p.title}</p>)}
    </div>
  );
}

export default App;

✅ Conditional Dispatch in Redux (React + Redux)
Normal method to check

const handleLoad = () => {
    if (users.length === 0 && !loading) {
      dispatch(fetchUsers());  // dispatch only if not already loaded
    }
  };

Inside a Thunk (Action Creator)

export const fetchUsersIfNeeded = () => {
  return (dispatch, getState) => {
    const { users, loading } = getState().user;

    if (users.length === 0 && !loading) {
      dispatch({ type: 'FETCH_USERS_REQUEST' });

      fetch('https://jsonplaceholder.typicode.com/users')
        .then(res => res.json())
        .then(data => dispatch({ type: 'FETCH_USERS_SUCCESS', payload: data }))
        .catch(err => dispatch({ type: 'FETCH_USERS_FAILURE', payload: err }));
    }
  };
};

//  usage
dispatch(fetchUsersIfNeeded());

✅ children Prop in React

It is a prop {this.props.children} that allow you to pass components as data to other components.

<Wrapper>
  <h1>Hello, Ved!</h1>.  // whatever place here is padded as prop.childern
</Wrapper>

//wrapper component
const Wrapper = ({ children }) => {
  return <div className="box">{children}</div>;
};

//ouput
<div class="box">
  <h1>Hello, Ved!</h1>
</div>

🛠 Pro Tip: children is just a prop

You can even pass it manually:

<Wrapper children={<p>Manual way</p>} />

📌 Common Use Cases

Use Case	Example
Layout Components	<Card>{content}</Card>
Modal/Dialog wrappers	<Modal>{form}</Modal>
Slot-style flexibility	Like Vue’s <slot> equivalent
Libraries like React Router	<Route>{component}</Route>

🔁 React Reconciliation – Explained Simply

Reconciliation is the process by which React updates the DOM efficiently when your app’s state or props change.

🔍 What Happens During Reconciliation?

When a component’s state or props change:

1. React re-renders the component to produce a new virtual DOM tree.
2. It compares this new virtual DOM with the previous one using a diffing algorithm.
3. React calculates the minimal set of changes needed to update the actual real DOM.
4. It applies only the necessary DOM updates (not a full re-render).

✅ What is React.lazy()?

React.lazy() is a function that enables lazy loading of components — meaning the component is only loaded when it’s needed.

✅ Why Use React.lazy()?

Benefit	Description
🐢 Lazy load components	Load them only when needed
📦 Reduce bundle size	Initial JS bundle is smaller
⚡ Faster page load	Great for large apps or routes

🔧 Syntax:

const MyComponent = React.lazy(() => import('./MyComponent'));

• This will dynamically load MyComponent only when it’s rendered.
• You must wrap it with <Suspense> to handle loading fallback.

// App.js
import React, { Suspense } from 'react';

const LazyAbout = React.lazy(() => import('./About'));

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyAbout />
      </Suspense>
    </div>
  );
}

export default App;

🧠 Important Notes

1. ✅ Must use inside a <Suspense> wrapper
2. ⚠️ Works only for default exports (export default)
3. 🧩 Works well with React Router and route-based code splitting

🚀 Route-Based Lazy Loading with React Router

import { BrowserRouter, Route, Routes } from 'react-router-dom';
const LazyHome = React.lazy(() => import('./pages/Home'));
const LazyAbout = React.lazy(() => import('./pages/About'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<p>Loading...</p>}>
        <Routes>
          <Route path="/" element={<LazyHome />} />
          <Route path="/about" element={<LazyAbout />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

🔌 React Portal – Render Outside the DOM Hierarchy

A Portal in React lets you render a component outside its parent DOM hierarchy, typically at the root level of the HTML document (<body>). This is especially useful for modals, tooltips, dropdowns, etc.

🔍 Why Use Portals?

• You want a component to visually break out of its parent container.
• Avoid CSS issues like overflow: hidden or z-index clashes.
• Great for overlay UIs, modals, and global components.

🧱 Syntax

ReactDOM.createPortal(child, container)

• child: The JSX/React element to render.
• container: A DOM node outside the React root (often in public/index.html).

🛡️ Error Boundaries in React

Error Boundaries are special React components that catch JavaScript errors in their child component tree during rendering, lifecycle methods, and constructors, and display a fallback UI instead of crashing the whole app.

🚨 Why Use Error Boundaries?

Benefit	Description
🧯 Prevent crashes	App won’t crash entirely on UI errors
🧩 Show fallback UI	Show custom UI like “Something went wrong”
🔍 Debugging support	Can log error details to monitoring services

⚠️ What They Catch (and Don’t)

✅ Catches:

• Rendering errors
• Lifecycle errors
• Constructor errors

❌ Doesn’t catch:

• Event handler errors (you handle those with try/catch)
• Async code (e.g. setTimeout)
• Server-side rendering errors

🧱 Class-Based Error Boundary Example

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state to show fallback UI
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Log error to monitoring service
    console.error("Caught error:", error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h2>Something went wrong.</h2>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

🧪 Usage

import ErrorBoundary from './ErrorBoundary';
import BuggyComponent from './BuggyComponent';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <ErrorBoundary>
        <BuggyComponent />
      </ErrorBoundary>
    </div>
  );
}

If BuggyComponent throws an error, ErrorBoundary will catch it and render the fallback.

🔥 Buggy Component Example

function BuggyComponent() {
  throw new Error("Oops! Something broke.");
  return <div>This won't render</div>;
}

⚙️ Multiple Error Boundaries

You can wrap parts of your app separately:

<ErrorBoundary>
  <ComponentA />
</ErrorBoundary>

<ErrorBoundary>
  <ComponentB />
</ErrorBoundary>

Useful when different areas of the app should show different fallbacks or recover independently.

❓ Can We Use Error Boundary in Functional Components?

Not directly, because:

• getDerivedStateFromError and componentDidCatch are lifecycle methods that only work in class components.

🔁 Alternative: Use a custom hook with try/catch in event handlers, or a wrapper like react-error-boundary if you want to use functional style.

🧰 Popular Libraries

• react-error-boundary – Provides a functional way to handle errors with hooks

✅ Can use server side rendering in react without next.js ?

Yes ✅, you can use server-side rendering (SSR) in React without Next.js — by using Node.js + Express (or any backend) and manually setting up SSR using ReactDOMServer.
🚀 What You Need

1. React (your components)
2. react-dom/server (ReactDOMServer)
3. A Node.js server (like Express)
4. A bundler (Webpack, Vite, etc. — optional for client-side hydration)

/ssr-app
  /public
    index.html
  /src
    App.js
    client.js
    server.js

🔹 1. src/App.js – React Component

import React from 'react';

const App = () => {
  return <h1>Hello from Server-Side Rendered React!</h1>;
};

export default App;

🔹 2. src/server.js – Express Server with SSR

import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App.js';

const app = express();
const PORT = 3000;

// Serve static files like client.js
app.use(express.static('public'));

app.get('*', (req, res) => {
  const appHtml = ReactDOMServer.renderToString(<App />);

  const html = `
    <!DOCTYPE html>
    <html>
      <head>
        <title>React SSR</title>
      </head>
      <body>
        <div id="root">${appHtml}</div>
        <script src="/client.js"></script> <!-- hydration -->
      </body>
    </html>
  `;

  res.send(html);
});

app.listen(PORT, () => {
  console.log(`🚀 Server running at http://localhost:${PORT}`);
});

🔹 3. src/client.js – Hydrate on Client Side

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.hydrateRoot(document.getElementById('root'), <App />);

🔧 4. Tooling

• Use Webpack or Vite to build client.js and output it to /public.
• Transpile your JSX/ES6 server code with Babel (or use esm, ts-node, etc.)

✅ Output:

• The HTML is generated on the server and sent to the client.
• Then, the client-side JS takes over (hydrates) the React app.

🔁 Advantages vs Next.js

Feature	Without Next.js (manual)	Next.js
Setup	Manual	Auto-configured
Routing	Manual (React Router)	Built-in
SSR	Yes, with ReactDOMServer	Out of the box
SEO friendly	✅ Yes	✅ Yes
Fine-grained control	✅ Full server control	Less flexibility (opinionated)

⚛️ create-react-app (CRA) – Quick Start to React Projects

create-react-app is the official tool provided by the React team to bootstrap a fully configured React application — without needing to manually set up Webpack, Babel, ESLint, etc.

✅ What Does CRA Give You?

Feature	Description
📦 Webpack + Babel	Bundling & transpiling already configured
🧪 Testing setup	Includes Jest and React Testing Library
💅 CSS/SCSS support	Works out-of-the-box with CSS & preprocessors
🖼 Asset handling	Supports images, fonts, and more via import
🔍 ESLint + Formatting	Enforced linting + Prettier-style code formatting
⚡ Dev server	Comes with live-reloading dev server
🚀 Production build	Generates optimized production-ready bundles

🧱 Create a New App

npx create-react-app my-app
cd my-app
npm start

This will create a folder named my-app with all required files and dependencies.

🚀 Common Scripts

npm start       # Run development server
npm run build   # Create optimized production build
npm test        # Run unit tests
npm run eject   # Remove CRA abstraction (advanced use). 
//🛑 Use eject only if you need full control over config (no going back).

🧠 Smart vs Dumb Components in React

Feature	Smart Component	Dumb Component
Purpose	Logic, data handling	UI rendering only
State	✅ Yes	❌ Usually stateless
Side effects (API)	✅ Yes	❌ No
Reusable	❌ Less	✅ Highly reusable
Examples	Containers, Pages	Buttons, Cards, Lists
Knows about Redux/Context	✅ Often	❌ Never

✅ Good Practice

• Separate concerns: logic in smart components, UI in dumb components.
• Keeps code clean, testable, and scalable.

🆚 value vs defaultValue in React

Both value and defaultValue are used in form elements like <input>, <textarea>, and <select>, but they behave very differently depending on controlled vs uncontrolled components.

✅ value (Controlled Component)

• The input value is controlled by React state
• You must use onChange to update the value
• React has full control over the input

🔧 Example:

const [name, setName] = useState('');
<input value={name} onChange={e => setName(e.target.value)} />

React updates the value based on state. Input changes won’t work unless you provide an onChange handler.

⚠️ defaultValue (Uncontrolled Component)

• Sets the initial value only once on first render
• After that, the value is managed by the DOM itself, not React
• Does not require onChange, but you can still use it

🔧 Example:

<input defaultValue="Ved" />

Acts like a regular HTML input with an initial value. React won’t track or update it afterward.

✅ React Testing – Tools, Best Practices & Writing Test Cases

Testing in React ensures your components behave as expected and helps catch bugs early.

🛠 Best Tools for Testing React Apps

Tool	Purpose	Recommended
Jest	Test runner + assertion library	✅ Yes
React Testing Library (RTL)	Test React components via UI behavior	✅ Yes
Enzyme (legacy)	Component testing using internal structure	❌ Deprecated
Cypress	End-to-end (E2E) UI testing	✅ Yes
Vitest	Alternative to Jest (faster, for Vite)	⚡ Optional

🧰 Recommended Setup (most common)

• Jest + React Testing Library (RTL)

CRA (create-react-app) comes with Jest pre-installed.

To add RTL (if needed):

npm install --save-dev @testing-library/react @testing-library/jest-dom

✅ Types of Tests

Type	Purpose	Tools
Unit Test	Test isolated functions/components	Jest + RTL
Integration	Test multiple components together	Jest + RTL
E2E Test	Test full app in browser	Cypress

🧪 Writing a Simple Test Case

🔹 Component: Greeting.js

const Greeting = ({ name }) => {
  return <h1>Hello, {name || 'Guest'}!</h1>;
};

export default Greeting;

🔸 Test: Greeting.test.js

import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';

test('renders greeting with name', () => {
  render(<Greeting name="Ved" />);
  expect(screen.getByText('Hello, Ved!')).toBeInTheDocument();
});

test('renders greeting with default', () => {
  render(<Greeting />);
  expect(screen.getByText('Hello, Guest!')).toBeInTheDocument();
});

🧠 Common React Test Utilities

Function	Purpose
render()	Render a component into virtual DOM
screen.getByText()	Query rendered DOM
fireEvent.click()	Simulate user events
expect(...).toBe...	Assert result
waitFor()	Wait for async updates

🔥 Testing Form Inputs

import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('updates input value', () => {
  render(<Form />);
  const input = screen.getByPlaceholderText('Enter name');
  fireEvent.change(input, { target: { value: 'Ved' } });
  expect(input.value).toBe('Ved');
});

📦 Example Folder Structure

/src
  /components
    Greeting.js
    Greeting.test.js
    Form.js
    Form.test.js

🔁 Running Tests

npm test

This will run in watch mode (re-runs affected tests on save).

💡 Best Practices

✅ Use data-testid or accessible labels (avoid className selectors)
✅ Test behavior, not internal implementation
✅ Keep tests fast and isolated
✅ Write both positive and negative cases
✅ Use jest.fn() to mock functions

❓ Bonus: When to Use Cypress?

Use Cypress when you want to test:

• Navigation
• Actual browser behavior
• Integration between pages/components

🧪 Jest Hooks/Lifecycle: Setup & Teardown – beforeEach, afterEach, beforeAll, afterAll

Jest provides global lifecycle hooks to run code before and after tests — perfect for setup, teardown, or shared logic.

describe('Math tests', () => {
  beforeAll(() => {
    console.log('🔧 Setup before all tests');
  });

  afterAll(() => {
    console.log('🧹 Cleanup after all tests');
  });

  beforeEach(() => {
    console.log('📦 Setup before each test');
  });

  afterEach(() => {
    console.log('🧽 Cleanup after each test');
  });

  test('adds numbers', () => {
    expect(1 + 2).toBe(3);
  });

  test('multiplies numbers', () => {
    expect(2 * 2).toBe(4);
  });
});

Jasmine: it s also a testing framework (BDD) but less common, and not good as compare to Jest.

🔁 Callback vs 🔄 Promise vs ⚡ Async/Await in JavaScript

🧩 1. Callback (Legacy before ES6)

A function passed as an argument to another function to be executed later.

📌 Example:

function greetUser(name, callback) {
  console.log(`Hello, ${name}`);
  callback();
}

function sayBye() {
  console.log('Goodbye!');
}

greetUser('Ved', sayBye);

⚠️ Drawback:

• Leads to callback hell when nesting too deeply
• Difficult to read, debug, and manage

🔗 2. Promise (ES6)

A cleaner way to handle async operations, providing .then() and .catch() methods.

📌 Example:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data loaded');
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

✅ Benefit:

• Chainable, cleaner than nested callbacks
• Easier to handle errors using .catch()

✅ A Promise can return:

Return Type	What It Means
resolve(value)	The operation succeeded, and value is the result
reject(error)	The operation failed, and error is the reason
return another promise	The outer promise will adopt the inner promise’s state
Nothing	It will be treated as undefined return when resolved. r resolve(); // Same as resolve(undefined)

⚡ 3. Async/Await (ES8 (ES2017))

A syntax sugar built on top of Promises that makes async code look synchronous.

📌 Example:

async function loadData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

loadData();

✅ Benefit:

• Most readable and maintainable
• Use try/catch for error handling
• Clean sequential logic

🌐 Fetch Multiple URLs in React (or JavaScript)

To fetch multiple URLs in React (or any JS code), you typically use:

• Promise.all() – to wait for all requests to finish
• async/await – to handle them cleanly

✅ Basic Example – Fetch Multiple APIs

const fetchMultipleData = async () => {
  const urls = [
    'https://api.example.com/users',
    'https://api.example.com/posts',
    'https://api.example.com/comments',
  ];

  try {
    const responses = await Promise.all(urls.map(url => fetch(url)));
    const data = await Promise.all(responses.map(res => res.json()));
    console.log(data); // [usersData, postsData, commentsData]
  } catch (err) {
    console.error('Error fetching:', err);
  }
};

🧩 React Component Example

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

const MultiFetch = () => {
  const [users, setUsers] = useState([]);
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const [userRes, postRes] = await Promise.all([
        fetch('https://jsonplaceholder.typicode.com/users'),
        fetch('https://jsonplaceholder.typicode.com/posts')
      ]);
      const [userData, postData] = await Promise.all([
        userRes.json(),
        postRes.json()
      ]);
      setUsers(userData);
      setPosts(postData);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h2>Users: {users.length}</h2>
      <h2>Posts: {posts.length}</h2>
    </div>
  );
};

export default MultiFetch;

✅ Handle Cascading failure case

When fetching multiple URLs, it’s crucial to handle both scenarios:

1. ✅ All requests succeed
2. ❌ One or more requests fail

✅ Option 1: Use Promise.all – Fast but fails on any error

try {
  const responses = await Promise.all([
    fetch('/api/one'),
    fetch('/api/two'),
    fetch('/api/three'),
  ]);
  const data = await Promise.all(responses.map(res => res.json()));
  console.log('All passed ✅', data);
} catch (error) {
  console.error('At least one request failed ❌:', error);
}

❗ Limitation:

• If even one request fails (e.g., network error or 500), the entire block fails.
• No partial success.

✅ Option 2: Use Promise.allSettled – Safer for mixed results

const urls = ['/api/one', '/api/two', '/api/three'];

const results = await Promise.allSettled(urls.map(url => fetch(url)));

const successful = [];
const failed = [];

for (let i = 0; i < results.length; i++) {
  if (results[i].status === 'fulfilled') {
    const json = await results[i].value.json();
    successful.push({ url: urls[i], data: json });
  } else {
    failed.push({ url: urls[i], error: results[i].reason });
  }
}

if (failed.length === 0) {
  console.log('🎉 All requests succeeded', successful);
} else {
  console.warn('⚠️ Some requests failed', failed);
  console.log('✅ Successful responses', successful);
}

🔄 yield in JavaScript

🧠 What is yield?

yield is a special keyword used inside generator functions to pause the function execution and return a value.

It allows building iterators, lazy sequences, and asynchronous flows.

🔧 Syntax

function* generatorName() {
  yield value1;
  yield value2;
}

• function* declares a generator function
• yield pauses execution and returns a value
• Calling the generator returns an iterator object

✅ Basic Example

function* colors() {
  yield 'red';
  yield 'green';
  yield 'blue';
}

const gen = colors();

console.log(gen.next()); // { value: 'red', done: false }
console.log(gen.next()); // { value: 'green', done: false }
console.log(gen.next()); // { value: 'blue', done: false }
console.log(gen.next()); // { value: undefined, done: true }

🧩 How yield Works

Concept	Explanation
yield	Pauses the generator and returns a value
next()	Resumes execution from where it was paused
Multiple yields	Acts like a step-by-step iterator
Can accept input	next(value) passes data back into the generator

📥 yield with Input (Two-Way Communication)

function* greet() {
  const name = yield "What is your name?";
  yield `Hello, ${name}!`;
}

const g = greet();

console.log(g.next().value);       // "What is your name?"
console.log(g.next('Ved').value);  // "Hello, Ved!"

Limitation: Yields can only be called directly from the generator function that contain it. It can not be called from the nested function or from callbacks.

✅ What is Redux Saga in React?

Redux-Saga is a middleware library used in Redux applications to handle side effects like:

• API calls
• Delays or retries
• Accessing browser cache, storage, etc.

Instead of using thunks (functions inside actions), Redux-Saga uses generators and yield to handle async code in a more declarative and testable way.

🧠 Why Use Redux-Saga?

Problem in Redux	How Redux-Saga Helps
Redux is synchronous	Saga lets you handle async logic
Async code in actions (thunk) becomes messy	Saga uses generator-based workflows
Difficult to test thunks	Saga effects (call, put, etc.) are testable

🔧 Basic Redux-Saga Flow

1. UI Dispatches an action (FETCH_USER_REQUEST)
2. Saga intercepts the action
3. Saga runs side-effect (e.g., API call)
4. Saga dispatches success or error actions

⚙ Key Concepts in Redux-Saga

Concept	Description
saga	A generator function that performs async tasks
takeEvery	Listens for every matching action and runs a worker saga
call	Invokes a function (like an API call) and waits for result
put	Dispatches an action
takeLatest	Only runs the latest call (cancels older ones)

📁 Folder Structure

/redux-saga-example/
│
├── /src/
│   ├── /redux/
│   │   ├── store.js
│   │   ├── rootReducer.js
│   │   ├── rootSaga.js
│   │   ├── /user/
│   │   │   ├── userActions.js
│   │   │   ├── userReducer.js
│   │   │   ├── userSaga.js
│
├── /components/
│   ├── UserComponent.jsx
│
├── App.js
├── index.js

🧩 1. userActions.js

// src/redux/user/userActions.js
export const FETCH_USER_REQUEST = 'FETCH_USER_REQUEST';
export const FETCH_USER_SUCCESS = 'FETCH_USER_SUCCESS';
export const FETCH_USER_FAILURE = 'FETCH_USER_FAILURE';

export const fetchUserRequest = (id) => ({ type: FETCH_USER_REQUEST, payload: id });

🧠 2. userReducer.js

// src/redux/user/userReducer.js
import { FETCH_USER_REQUEST, FETCH_USER_SUCCESS, FETCH_USER_FAILURE } from './userActions';

const initialState = {
  user: null,
  loading: false,
  error: null,
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_USER_REQUEST:
      return { ...state, loading: true };
    case FETCH_USER_SUCCESS:
      return { ...state, user: action.payload, loading: false };
    case FETCH_USER_FAILURE:
      return { ...state, error: action.error, loading: false };
    default:
      return state;
  }
};

export default userReducer;

⚙️ 3. userSaga.js

// src/redux/user/userSaga.js
import { call, put, takeEvery } from 'redux-saga/effects';
import axios from 'axios';
import { FETCH_USER_REQUEST } from './userActions';

function* fetchUserWorker(action) {
  try {
    const response = yield call(axios.get, `https://jsonplaceholder.typicode.com/users/${action.payload}`);
    yield put({ type: 'FETCH_USER_SUCCESS', payload: response.data });
  } catch (e) {
    yield put({ type: 'FETCH_USER_FAILURE', error: e.message });
  }
}

export default function* userSaga() {
  yield takeEvery(FETCH_USER_REQUEST, fetchUserWorker);
}

🔗 4. rootReducer.js

// src/redux/rootReducer.js
import { combineReducers } from 'redux';
import userReducer from './user/userReducer';

const rootReducer = combineReducers({
  user: userReducer,
});

export default rootReducer;

🔗 5. rootSaga.js

// src/redux/rootSaga.js
import { all } from 'redux-saga/effects';
import userSaga from './user/userSaga';

export default function* rootSaga() {
  yield all([userSaga()]);
}

🏗 6. store.js

// src/redux/store.js
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './rootReducer';
import rootSaga from './rootSaga';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(rootSaga);

export default store;

🧱 7. UserComponent.jsx

// src/components/UserComponent.jsx
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUserRequest } from '../redux/user/userActions';

const UserComponent = () => {
  const dispatch = useDispatch();
  const { user, loading, error } = useSelector((state) => state.user);

  useEffect(() => {
    dispatch(fetchUserRequest(1));
  }, [dispatch]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;
  return user ? <div>User: {user.name}</div> : null;
};

export default UserComponent;

🚀 8. App.js

// src/App.js
import React from 'react';
import UserComponent from './components/UserComponent';

const App = () => <UserComponent />;

export default App;

🛠 9. index.js

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './redux/store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

✅ Summary – File Relations

File	Purpose
userActions.js	Action constants & creators
userReducer.js	Handles state changes
userSaga.js	Watches actions, handles API calls
rootReducer.js	Combines all reducers
rootSaga.js	Combines all sagas
store.js	Configures Redux store & middleware
UserComponent.jsx	Dispatches action, reads Redux state
App.js, index.js	Starts the app and wraps with Provider

🎯 Common Redux-Saga Effects

Effect	Purpose
call	Call a function (e.g., API) and wait for result
put	Dispatch a Redux action
take	Wait for a specific action to occur
takeEvery	Run saga for every matching action
takeLatest	Run only the latest if rapid actions fired
fork	Start a non-blocking task
spawn	Like fork, but detached from parent
all	Run multiple effects in parallel
delay	Wait for a specific time (like sleep)
select	Access the current Redux store state
cancel	Cancel a running task
race	Compete multiple effects; only one wins

🧼 What is a Pure Function?

A pure function is a function that:

1. Always returns the same output for the same input
2. Has no side effects (doesn’t modify external state)

A side effect is anything a function does other than returning a result.

🔥 Examples of Side Effects:

Side Effect Example	What Happens
Logging to console	Changes developer console state
Modifying a global variable	Alters external data
Writing to a file / database	Changes outside world
Making an API call	Affects network, outside your app
Updating the DOM	Changes the browser UI
Setting a timer (setTimeout)	Triggers something asynchronously

💣 What is an Impure Function?

An impure function:

• Might return different outputs for the same input
• Produces side effects
  

🧩 What is Currying?

Currying is the process of transforming a function with multiple arguments into a sequence of functions, each taking a single argument.

It turns: f(a, b, c) → f(a)(b)(c)

🔸 Normal Function:

function add(a, b) {
  return a + b;
}
add(2, 3); // 5

🔸 Curried Version:

function curriedAdd(a) {
  return function (b) {
    return a + b;
  };
}
curriedAdd(2)(3); // 5

🔧 Using ES6 Arrow Functions

const curriedMultiply = a => b => a * b;
curriedMultiply(4)(5); // 20

📦 Webpack + Sass (SCSS) Setup From Scratch

This guide sets up a modern front-end development environment using:

✅ Webpack (bundler)
✅ Babel (for ES6+)
✅ Sass (CSS preprocessor)
✅ Dev server with live reloading

🧱 1. 📁 Folder Structure

my-app/
├── dist/
│   └── index.html
├── src/
│   ├── index.js
│   └── style.scss
├── package.json
├── webpack.config.js
├── .babelrc

⚙️ 2. 🔧 Initialize Project

mkdir my-app && cd my-app
npm init -y

🧩 3. 📦 Install Dependencies

➤ Webpack & Babel

npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev @babel/core @babel/preset-env babel-loader

➤ Sass & Loaders

npm install --save-dev sass sass-loader css-loader style-loader

🔧 4. ⚙️ Webpack Config

🔸 webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    static: './dist',
    hot: true,
    port: 3000,
    open: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/, // JS
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.scss$/, // Sass
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
};

🔧 5. 🧠 Babel Configuration

🔸 .babelrc

{
  "presets": ["@babel/preset-env"]
}

✍️ 6. Create Files

🔸 src/index.js

import './style.scss';
console.log('Webpack + Sass working!');

🔸 src/style.scss

$color: #2ecc71;

body {
  background: $color;
  font-family: Arial, sans-serif;
  padding: 2rem;
  color: white;
}

🔸 dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Webpack Sass Setup</title>
</head>
<body>
  <h1>Hello Webpack + Sass!</h1>
  <script src="bundle.js"></script>
</body>
</html>

🧪 7. Add Scripts in package.json

"scripts": {
  "start": "webpack serve",
  "build": "webpack"
}

🚀 8. Start Development Server

npm start

Visit 👉 http://localhost:3000

⚙️ Common React Patterns

1. Container & Presentational
   • Separate logic (container) from UI (presentational)
2. Higher-Order Component (HOC)
   • Wrap a component to add extra logic (e.g., withAuth(Component))
3. Render Props
   • Share logic using a render or children function
4. Controlled vs Uncontrolled Components
   • Controlled: uses React state
   • Uncontrolled: uses refs
5. Compound Components
   • Components share internal state via context (e.g., <Tabs> with <Tabs.Tab>)
6. Custom Hooks
   • Reusable logic using useState, useEffect, etc.
7. Context API
   • Avoid prop drilling; share global data like theme/auth
8. State Reducer Pattern
   • Let parent override child behavior via reducer
9. Children-as-a-Prop
   • Pass JSX in children for flexible layouts
10. Functional State Update

• setCount(prev => prev + 1) to update based on previous state

⚔️ React API (REST) vs GraphQL API

Feature	REST API (React uses fetch/axios)	GraphQL API
Request Type	Multiple endpoints (e.g., /users, /posts)	Single endpoint (/graphql)
Data Fetching	Fixed structure (server decides)	Flexible (client decides what to get)
Over-fetching	Yes (gets extra data)	❌ Avoided (fetch only needed fields)
Under-fetching	May need multiple requests	❌ Avoided (combine in one query)
Versioning	Needs new versions (v1, v2)	No versioning needed
Batch Requests	Needs custom handling or parallel fetch	Built-in with nested queries
Errors	Per request/endpoint	Field-level error support
Tools	Fetch, Axios, React Query	Apollo Client, Relay
Caching	Manual or with tools (React Query)	Apollo has built-in cache
Schema	Optional/open	Strongly typed schema

🔧 Example

✅ REST in React

useEffect(() => {
  fetch('/api/users/1')
    .then(res => res.json())
    .then(data => setUser(data));
}, []);

✅ GraphQL in React (Apollo)

const GET_USER = gql`
  query GetUser {
    user(id: 1) {
      name
      email
    }
  }
`;

const { data, loading } = useQuery(GET_USER);

🔁 Normal Function vs Arrow Function

Feature	Normal Function	Arrow Function
Syntax	function name() {}	const name = () => {}
this Binding	Dynamic (this depends on how it’s called)	Lexical (this is inherited from parent scope)
Arguments Object	✅ Has arguments object	❌ No arguments object
Constructors (new)	✅ Can be used as constructor	❌ Cannot be used with new
Methods in Class	✅ Common for defining methods	⚠ Not recommended for methods
Implicit Return	❌ Must use return keyword	✅ Auto-return if one expression (no {})
Hoisting	✅ Hoisted	❌ Not hoisted

✅ Example Comparison

🔹 Normal Function

function add(a, b) {
  return a + b;
}

🔹 Arrow Function

const add = (a, b) => a + b;

🔁 this Binding Example

const obj = {
  count: 10,
  normal: function () {
    console.log(this.count); // 10 ✅
  },
  arrow: () => {
    console.log(this.count); // undefined ❌ (lexical this)
  },
};

🧠 When to Use What?

Use Normal Function	Use Arrow Function
As methods in classes/objects	For short callbacks & functional code
When this needs to be dynamically bound	When using lexical this is desired
When using arguments object	For concise, one-line expressions