React Interview Questions and Answers Latest

1What is JSX and how it works?

What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript used in React. It allows developers to write code that looks like HTML directly inside JavaScript, making UI creation more intuitive and readable.

JSX works by being compiled into plain JavaScript using tools like Babel. The browser doesn’t understand JSX directly, but after compilation, it becomes React.createElement() calls that React can process.

How JSX Works

Compilation:
JSX code is transformed into JavaScript functions.

javascript

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

becomes:

javascript

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

Virtual DOM:
React uses the compiled code to build a virtual DOM. When changes occur, React updates only the necessary parts of the real DOM, improving performance.
Embedding JavaScript:
You can insert JavaScript expressions inside JSX using { }.

javascript

const name = "PariksaHub";
const element = <h1>Hello, {name}!</h1>;

Why JSX is Important

Readability: Looks like HTML, so it’s easy to understand.
Integration: Combines JavaScript logic with UI structure.
Efficiency: Works seamlessly with React’s virtual DOM for fast updates.
Developer Experience: Makes writing React components simpler and more natural.

💡In short: JSX is syntactic sugar that makes writing React components easier. It looks like HTML, but under the hood, it’s just JavaScript that

2What is ES6 in JavaScript and what are its features?

ES6 (ECMAScript 2015) is the 6th edition of the ECMAScript language specification, which JavaScript is based on. It introduced major improvements to make JavaScript more powerful, readable, and developer-friendly.

Key Features of ES6

let and const: Block-scoped variables, replacing var for safer variable declarations.
Arrow Functions (=>): Shorter syntax for writing functions.
Template Literals: String interpolation using backticks (`).

javascript

const name = "PariksaHub";
console.log(`Hello, ${name}!`);

Default Parameters: Functions can have default values for parameters.
Destructuring Assignment: Extract values from arrays or objects easily.

javascript

const [a, b] = [1, 2];
const {x, y} = {x: 10, y: 20};

Enhanced Object Literals: Cleaner syntax for defining objects.
Classes: Introduced class syntax for object-oriented programming.
Modules (import / export): Support for modular code organization.
Promises: Native support for asynchronous programming.
Spread and Rest Operators (...): Easier handling of arrays and function arguments.

Why ES6 is Important

Makes code more concise and readable.
Provides modern features for building scalable applications.
Improves maintainability and performance.
Forms the foundation for later versions of JavaScript (ES7, ES8, etc.).

💡In short: ES6 modernized JavaScript with features like let/const, arrow functions, classes, modules, and promises, making it easier and more

3What is React and how does it work under the hood?

React is a popular JavaScript library developed by Facebook for building user interfaces, especially single-page applications. It focuses on creating reusable UI components and efficiently updating the DOM when data changes.

How React Works Under the Hood

Virtual DOM:
React maintains a lightweight copy of the real DOM called the virtual DOM. When the UI changes, React updates the virtual DOM first, then efficiently applies only the necessary changes to the real DOM.
Reconciliation:
React compares the new virtual DOM with the previous one (a process called diffing). It identifies the minimal set of changes required and updates the real DOM accordingly.
Components:
React applications are built using components. Each component is a reusable piece of UI that can manage its own state and props.

javascript

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

Unidirectional Data Flow:
Data in React flows in one direction — from parent to child via props. This makes applications predictable and easier to debug.
State Management:
Components can maintain internal state using useState or other hooks. When state changes, React re-renders the component and updates the UI.
JSX Compilation:
JSX is compiled into React.createElement() calls, which describe the UI structure. React uses this description to build and update the virtual DOM.

Why React is Important

Performance: Efficient DOM updates through the virtual DOM.
Reusability: Components can be reused across applications.
Maintainability: Clear data flow and modular structure.
Ecosystem: Rich set of tools, libraries, and community support.

💡 In short: React works by using a virtual DOM, reconciling changes efficiently, and rendering components with predictable data flow. This makes building complex, interactive UIs faster and more manageable.

4How does React store internal or static data?

React components often need to store two types of data:

Internal (stateful) data → changes over time and affects rendering.
Static data → remains constant and does not trigger re-renders.

Ways React Stores Data

1. State (useState)

Used for dynamic, reactive data inside functional components.
Updating state triggers a re-render.

javascript

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

2. Refs (useRef)

Used for storing mutable values that persist across renders.
Updating a ref does not cause re-render.
Commonly used for DOM references or static counters.

javascript

const inputRef = useRef(null);

3. Module-Level Constants

Declared outside the component.
Shared across all instances of the component.
Ideal for static configuration or constant values.

javascript

const API_URL = "https://example.com/api";

4. Context (useContext)

Used for global/static data that needs to be shared across multiple components.
Example: theme, user info, or language settings.

javascript

const ThemeContext = React.createContext("light");

Why This Matters

State → for reactive, changing data.
Refs → for static or mutable values that don’t affect rendering.
Constants/Context → for fixed or shared data across components.

💡 In short: React stores internal data with useState and useRef, while static data is best kept in constants or context. This ensures predictable updates and efficient rendering in modern React applications.

Would you like me to also prepare a comparison table (state vs ref vs context vs constants) so you can quickly see when to use each?

5What are React components and how do they work under the hood?

How React Components Work to Create a Web Page

Component Definition

A component is defined as a function that returns JSX.
Example:

javascript

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

Composition

Components can be combined together to form complex UIs.
Example:

javascript

function App() {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  );
}

Rendering

React takes the JSX returned by components, compiles it into React.createElement() calls, and builds a virtual DOM tree.
This virtual DOM represents the structure of the UI.

Updating

When state or props change, React re-runs the component function.
A new virtual DOM tree is created and compared with the previous one (diffing).
Only the changed parts are updated in the real DOM.

How React Works Under the Hood

JSX Compilation: JSX is converted into JavaScript objects describing the UI.
Virtual DOM: React maintains a virtual DOM for efficient updates.
Reconciliation: React compares the old and new virtual DOM trees to find differences.
Efficient DOM Updates: Only the necessary parts of the real DOM are updated, improving performance.
Unidirectional Data Flow: Data flows from parent to child via props, keeping the UI predictable.

Why Components Matter

Reusability: Build once, use multiple times.
Maintainability: Break large UIs into smaller, manageable pieces.
Performance: Virtual DOM ensures fast updates.
Scalability: Easy to build complex applications by composing components.

💡 In short: React components are functions that return JSX. React compiles them into a virtual DOM, compares changes, and updates the real DOM efficiently. This is how small pieces of UI combine to form a complete web page.

6What are React hooks and why are they important?

Hooks are special functions introduced in React 16.8 that let you use state and other React features in functional components. Before hooks, state management and lifecycle methods were only possible in class components. Hooks made functional components more powerful and eliminated the need for most class components.

Common React Hooks

useState → Manages local state inside a component.
useEffect → Handles side effects (e.g., data fetching, subscriptions).
useContext → Accesses context values without prop drilling.
useRef → Stores mutable values or DOM references without causing re-renders.
useReducer → Manages complex state logic with reducers.
Custom Hooks → Developers can create reusable hooks for shared logic.

Why Hooks Are Important

Simplify Code: No need for class components; everything can be done with functions.
Reusability: Logic can be extracted into custom hooks and reused across components.
Cleaner State Management: Hooks provide a straightforward way to manage state and side effects.
Consistency: Functional components with hooks are easier to read, test, and maintain.
Modern React Standard: Hooks are now the recommended way to build React applications.

💡 In short: Hooks let functional components manage state, lifecycle, and side effects. They are important because they simplify React development, improve code reusability, and form the foundation of modern React practices.

7Why are we not using class-based React anymore and how was it replaced?

React originally supported class components as the main way to manage state and lifecycle methods. However, since React 16.8, functional components with hooks have become the standard. Hooks allow developers to use state, lifecycle, and other React features inside simple functions, making class components largely unnecessary.

Limitations of Class Components

Complexity: Managing state and lifecycle methods (componentDidMount, componentDidUpdate, etc.) often led to verbose and harder-to-read code.
Reusability: Sharing logic between components required patterns like higher-order components or render props, which added complexity.
Learning Curve: Beginners had to learn both functional and class syntax, making React harder to grasp.
Boilerplate: More code was needed compared to functional components.

How Hooks Replaced Classes

useState replaces this.state for managing local state.
useEffect replaces lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount).
useContext replaces context usage in classes.
useRef replaces instance variables for storing mutable values.
Custom Hooks allow developers to extract and reuse logic across components without complex patterns.

Why Functional Components + Hooks Are Preferred

Simpler Syntax: Components are just functions returning JSX.
Cleaner Code: Hooks reduce boilerplate and make logic easier to follow.
Better Reusability: Custom hooks make sharing logic straightforward.
Consistency: One unified way to build components (functions), instead of two different paradigms.
Modern Standard: The React team recommends hooks for new projects, and most libraries/frameworks are built around them.

💡 In short: Class components were replaced because they were more complex and harder to reuse. Hooks brought state and lifecycle features into functional components, making React simpler, more powerful, and easier to maintain.

Class Component (Old Way)

python

import React from "react";

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

  // lifecycle method
  componentDidMount() {
    console.log("Component mounted!");
  }

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increase</button>
      </div>
    );
  }
}

export default Counter;

Functional Component with Hooks (Modern Way)

python

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

function Counter() {
  // state stored using useState
  const [count, setCount] = useState(0);

  // side effect handled with useEffect
  useEffect(() => {
    console.log("Component mounted!");
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default Counter;

8Explain the structure of a react project?

Structure of a React Project

When you create a React app (for example using Create React App or Vite), you’ll usually see a folder layout like this:

text

my-app/
│
├── node_modules/        # Installed dependencies
├── public/              # Static files (index.html, images, favicon)
├── src/                 # Main source code
│   ├── components/      # Reusable UI components
│   ├── pages/           # Page-level components (optional)
│   ├── assets/          # Images, CSS, fonts
│   ├── App.js           # Root component
│   ├── index.js         # Entry point, renders App into DOM
│   └── styles/          # Global or modular CSS files
│
├── package.json         # Project metadata and dependencies
├── .gitignore           # Files ignored by Git
├── README.md            # Documentation
└── other config files   # (babel, eslint, vite.config.js, etc.)

How It Works to Create a Web Page

Entry Point (index.js)

React starts here.
It renders the root component (App) into the index.html file inside public/.

python

import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));

Root Component (App.js)

Defines the main structure of the application.
Composes smaller components together.

javascript

function App() {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  );
}

Components (components/)

Reusable pieces of UI (buttons, forms, cards).
Each component is a function returning JSX.

Pages (pages/)

Larger components representing entire screens (Home, About, Contact).
Often used with routing libraries like React Router.

Assets (assets/)

Static files like images, CSS, or fonts used in components.

Public Folder (public/)

Contains index.html (the only HTML file).
React injects the app into the <div id="root"></div> inside this file.
Also stores static files that don’t need processing.

Under the Hood

JSX → JavaScript: JSX in components is compiled into React.createElement() calls.
Virtual DOM: React builds a virtual DOM tree from components.
Diffing & Reconciliation: React compares the new virtual DOM with the old one and updates only the changed parts in the real DOM.
Single Page Application (SPA): The app runs inside one HTML file (index.html), and React dynamically updates the UI without reloading the page.

💡 In short: A React project is organized into src (your code), public (static files), and configuration files. React starts at index.js, renders App.js, and builds the UI by combining components. Under the hood, JSX compiles to JavaScript, React manages a virtual DOM, and updates the real DOM efficiently to create a smooth web experience.

9What is useState() in React and how does it work?

useState() is a React Hook introduced in React 16.8. It allows functional components to have state — something that was previously only possible in class components. State represents data that can change over time and directly affects how the component renders.

How useState() Works

Initialization

You call useState(initialValue) inside a functional component.
It returns an array with two values:
The current state value.
A function to update that state.

javascript

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

Here, count is the state variable, and setCount is the updater function.
Updating State

When you call the updater function (setCount), React schedules a re-render of the component.
The new state value replaces the old one, and the component re-renders with updated data.

javascript

<button onClick={() => setCount(count + 1)}>Increase</button>

Re-rendering

Each time state changes, React re-runs the component function.
The UI is updated based on the new state.
React ensures only the necessary parts of the DOM are updated using the virtual DOM diffing process.

Rules of Hooks

Hooks must be called at the top level of the component (not inside loops or conditions).
Hooks must be called inside functional components or custom hooks, not in regular JavaScript functions.

How useState() Works Under the Hood

State Storage

React internally keeps a list (array) of “state cells” for each component.
Each call to useState() reserves one cell in that list.
The initial value you pass (useState(0)) is stored in that cell the first time the component renders.

Component Rendering

When the component function runs, React reads the stored state value from the correct cell (based on call order).
That’s why hooks must always be called in the same order — React relies on this sequence to match state values to the right variables.

State Updates

When you call the updater function (setCount), React does not immediately change the value.
Instead, it schedules the component to re-render.
On the next render, React updates the corresponding state cell with the new value and passes it back into your component.

Re-render Cycle

Component re-runs with the new state.
React compares the new virtual DOM with the old one (diffing).
Only the changed parts of the real DOM are updated.

Example

python

import React, { useState } from "react";

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

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default Counter;

Why useState() is Important

Brings state to functional components (no need for classes).
Simplifies code with cleaner syntax.
Triggers re-renders automatically when state changes.
Foundation for modern React — most applications rely heavily on hooks like useState and useEffect.

💡 In short: useState() gives functional components the ability to store and update internal data. When the state changes, React re-renders the component with the new data, keeping the UI in sync with application logic.

10What is useEffect() in React and how does it work under the hood?

useEffect() is a React Hook that lets you perform side effects in functional components. Side effects are operations that affect something outside the component, such as fetching data, updating the DOM directly, or setting up subscriptions/timers.

Before hooks, side effects were handled in class lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount. With useEffect(), all of these are unified into one function.

How useEffect() Works

Definition

useEffect(callback, dependencies) takes two arguments:
A callback function where you write your side effect logic.
A dependency array that tells React when to re-run the effect.

javascript

useEffect(() => {
  console.log("Effect runs!");
}, [count]);

Execution Timing

By default, useEffect() runs after every render (including the first).
If you provide a dependency array, React only re-runs the effect when those dependencies change.
If you pass an empty array [], the effect runs only once (like componentDidMount).

Cleanup Function

The callback can return a cleanup function.
React calls this cleanup before running the effect again and when the component unmounts.
Useful for removing event listeners, canceling timers, or unsubscribing from services.

javascript

useEffect(() => {
  const timer = setInterval(() => console.log("Tick"), 1000);
  return () => clearInterval(timer); // cleanup
}, []);

How useEffect() Works Under the Hood

Effect Registration

During rendering, React registers the effect and stores it in an internal list tied to the component.
Each useEffect call is tracked by its position in the component function (order matters).

Commit Phase

After React updates the DOM (commit phase), it executes the effect callbacks.
This ensures side effects run only after the UI is updated.

Dependency Tracking

React compares the current dependency array with the previous one.
If values have changed, React re-runs the effect.
If not, the effect is skipped.

Cleanup Handling

Before running an effect again or unmounting the component, React calls the cleanup function (if provided).
This prevents memory leaks and ensures proper resource management.

Why useEffect() is Important

Unifies lifecycle methods into one hook.
Prevents duplication by running only when dependencies change.
Handles cleanup automatically, reducing bugs.
Essential for side effects like API calls, subscriptions, and DOM manipulation.

💡 In short: useEffect() registers side effects during render, runs them after the DOM update, tracks dependencies to decide when to re-run, and cleans up resources when needed. It’s the modern replacement for lifecycle methods in functional components.

11How does event handling work in React?

What Is Event Handling in React?

Event handling in React is the way React responds to user interactions such as clicks, typing, form submissions, mouse movements, etc.

React events are named using camelCase and are passed as functions, not strings (unlike plain HTML).

Basic Example

javascript

function ClickButton() {
 function handleClick() {
 alert("Button clicked!");
 }

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

onClick is the React event
handleClick is a JavaScript function
The function is passed without parentheses

How Event Handling Works Under the Hood

Synthetic Events

React uses a wrapper called a SyntheticEvent
It provides a consistent event API across all browsers
It behaves like native events, but is managed by React

Event Delegation

React attaches a single event listener at the root of the app
When an event occurs, React handles it internally
This improves performance and memory usage

text

<button onClick={handleClick}>Click</button>

Passing Parameters to Event Handlers

javascript

function greet(name) {
 alert(`Hello, ${name}`);
}
<button onClick={() => greet("React")}>Greet</button>;

Handling Events with State

javascript

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

 return (
 <button onClick={() => setCount(count + 1)}>
 Count: {count}
 </button>
 );
}

Common React Events

onClick
onChange
onSubmit
onMouseEnter

Why React Event Handling Is Important

Cross-browser compatibility (Synthetic Events)
Better performance (event delegation)
Clean and predictable code
Easy integration with state and props

💡 In short:

React handles events using Synthetic Events and event delegation.

Events are written in camelCase and passed as functions.

When an event occurs, React efficiently updates the UI using state and re-rendering.

12What is conditional rendering in React and how is it implemented?

Conditional Rendering in React

Conditional rendering in React means rendering different UI elements or components based on a condition.

The condition is usually based on state, props, or any JavaScript expression.

React uses normal JavaScript conditional logic to decide what should be displayed on the screen.

How Conditional Rendering Is Implemented

1. Using if / else

Used when you want clear control over what gets rendered.

javascript

function App({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome User</h1>;
  } else {
    return <h1>Please Login</h1>;
  }
}

2. Using Ternary Operator

Most commonly used inside JSX.

text

{isLoggedIn ? <Dashboard /> : <Login />}

3. Using Logical AND (&&)

Used when something should render only if the condition is true.

text

{isAdmin && <AdminPanel />}

If the condition is false, nothing is rendered.

Conditional Rendering with State

javascript

function Message() {
  const [show, setShow] = useState(true);

  return (
    <div>
      {show && <p>Hello React</p>}
      <button onClick={() => setShow(!show)}>Toggle</button>
    </div>
  );
}

State controls what is rendered
State change triggers re-render

Why Conditional Rendering Is Important

Displays UI based on user actions
Essential for login/logout, permissions, loading states
Makes applications dynamic and user‑friendly
Improves UI control and flow

💡 In short:

Conditional rendering in React means showing different UI based on conditions.

It is implemented using if/else, ternary operators, logical &&, or variables, and works with state and props to update the UI dynamically.

13What is useMemo in React and how does it work?

What Is useMemo?

useMemo is a React hook used to optimize performance by memoizing the result of an expensive calculation.

It ensures that a value is recomputed only when its dependencies change, instead of on every re-render.

How useMemo Works

React stores the memoized value
On re-render, React checks dependencies
If dependencies are unchanged, React reuses the cached value
If dependencies change, the value is recalculated

Basic Example

javascript

const result = useMemo(() => {
  return expensiveCalculation(number);
}, [number]);

The calculation runs only when number changes
Prevents unnecessary recomputation

Example with Component

javascript

function App({ number }) {
  const squared = useMemo(() => {
    return number * number;
  }, [number]);

  return <h1>{squared}</h1>;
}

React components re-render when props or state change
Without useMemo, the calculation would run on every re-render
useMemo ensures the calculation:

runs only when number changes

is skipped when the component re-renders for other reasons

Although number * number is a simple operation, it represents any expensive calculation such as:

filtering large arrays
sorting data
heavy computations

Improves performance
Avoids repeated calculations during re-renders

When to Use useMemo

Expensive calculations
Large data processing
Preventing unnecessary re-computation
Optimizing slow components

When NOT to Use useMemo

Simple calculations
Premature optimization
When performance issues don’t exist

Why useMemo Is Important

Improves application performance
Reduces unnecessary computations
Helps keep UI smooth and efficient

💡 In short:

useMemo is a performance optimization hook that memoizes values.

It recalculates the value only when dependencies change, preventing unnecessary computations during re-renders.

14What is useCallback?

What is useCallback?

useCallback is used to remember a function.

React will reuse the same function instead of creating a new function on every re-render.

Why do we need useCallback?

In React:

Every time a component re-renders
Functions are recreated again

This can cause:

Unnecessary re-renders of child components
Performance issues

useCallback prevents this by keeping the same function reference.

Basic Syntax

javascript

useCallback(() => {
  // function logic
},

React stores the function
React creates a new function only when dependencies change

Example

javascript

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

  return <Button onClick={handleClick} />;
}

How It Works

Component renders
useCallback stores the handleClick function
The same function is passed to the child component

On Re-render

If dependencies do not change
✅ Same function is reused
❌ Function is not recreated
If dependencies change
✅ New function is created

Without useCallback

javascript

const handleClick = () => {
  console.log("Clicked");
};

New function created on every render
Can cause unnecessary child re-renders

With useCallback

javascript

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

Function reference stays the same
Improves performance

Example with Dependency

javascript

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

Function updates only when count changes

When to Use useCallback

Passing functions to child components
Using React.memo
Preventing unnecessary re-renders
Performance optimization

When NOT to Use useCallback

Simple components
No child components
No performance issues

useCallback vs useMemo

useCallback is used to memoize a function
useMemo is used to memoize a value
useCallback prevents function re-creation
useMemo prevents value recalculation
useCallback returns a function
useMemo returns a computed value

Easy Example

javascript

useCallback(() => fn(), [deps]); // remembers function
useMemo(() => value, [deps]);    // remembers value

💡 In short (memorize this):

useCallback → remembers a function
useMemo → remembers a value
Both improve performance by avoiding unnecessary re-renders or recalculations

React Interview Questions and Answers Latest

Questions & Answers

Table of Contents

1What is JSX and how it works?

How JSX Works

Why JSX is Important

2What is ES6 in JavaScript and what are its features?

ES6 (ECMAScript 2015) is the 6th edition of the ECMAScript language specification, which JavaScript is based on. It introduced major improvements to make JavaScript more powerful, readable, and developer-friendly.

Key Features of ES6

Why ES6 is Important

3What is React and how does it work under the hood?

How React Works Under the Hood

Why React is Important

4How does React store internal or static data?

Ways React Stores Data

1. State (useState)

2. Refs (useRef)

3. Module-Level Constants

4. Context (useContext)

Why This Matters

5What are React components and how do they work under the hood?

How React Components Work to Create a Web Page

How React Works Under the Hood

Why Components Matter

6What are React hooks and why are they important?

Common React Hooks

Why Hooks Are Important

7Why are we not using class-based React anymore and how was it replaced?

Limitations of Class Components

How Hooks Replaced Classes

Why Functional Components + Hooks Are Preferred

Class Component (Old Way)

Functional Component with Hooks (Modern Way)

8Explain the structure of a react project?

Structure of a React Project

How It Works to Create a Web Page

Under the Hood

9What is useState() in React and how does it work?

How useState() Works

How useState() Works Under the Hood

Example

Why useState() is Important

10What is useEffect() in React and how does it work under the hood?

How useEffect() Works

How useEffect() Works Under the Hood

Why useEffect() is Important

11How does event handling work in React?

What Is Event Handling in React?

Basic Example

How Event Handling Works Under the Hood

Passing Parameters to Event Handlers

Handling Events with State

Common React Events

Why React Event Handling Is Important

💡 In short:

12What is conditional rendering in React and how is it implemented?

Conditional Rendering in React

How Conditional Rendering Is Implemented

1. Using if / else

2. Using Ternary Operator

3. Using Logical AND (&&)

Conditional Rendering with State

Why Conditional Rendering Is Important

💡 In short:

13What is useMemo in React and how does it work?

What Is useMemo?

How useMemo Works

Basic Example

Example with Component

When to Use useMemo

When NOT to Use useMemo

Why useMemo Is Important

💡 In short:

14What is useCallback?

What is useCallback?

Why do we need useCallback?

Basic Syntax

Example

How It Works

On Re-render