React Question & Answer

1)What is the difference between a functional component and a class component in React?

Functional Components:

• Functional component JavaScript function that returns JSX UI elements.
• Easy to read, and with React Hooks, it can manage state and side effects

Example:

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

}`

Class Component:

• Class component is a JavaScript class that extends React.Component
• Has access to lifecycle methods (componentDidMount, componentDidUpdate, etc.)
• Before Hooks, class components were the only way to use state and lifecycle logic.
• Class components take more code and are less simple than functional components.

Example:

`class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}`

2)How does JSX work internally? Why do we need it instead of plain JavaScript?

• JSX (JavaScript XML)is not HTML,but a syntax extension of JavaScript.
• It allows you to write UI code that looks like HTML inside JavaScript.

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

React does not understand JSX directly.
Internally, JSX is converted (transpiled) into React.createElement() calls by a tool like Babel.

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

This function returns a JavaScript object called a React element, like this:

{
  type: 'h1',
  props: { children: 'Hello World' }
}

Why do we need JSX instead of plain JavaScript:

Easier to read and write:

-JSX looks similar to HTML, making UI structure clear and simple to understand.

• You can easily mix UI and logic in one file (JS + HTML-like syntax).
• JSX reduces the need to manually write long React.createElement() calls.
• Tools can easily detect syntax errors or wrong components with JSX.

3)What is Virtual DOM and how does React use it for rendering?

What is Virtual DOM
The Virtual DOM is a lightweight in-memory representation of the real DOM.
React keeps two Virtual DOMs:

• - Old Virtual DOM (previous UI)
• - New Virtual DOM (after state or prop changes)
• React updates only the changed parts it updates only what’s necessary.
• This makes apps faster, more efficient, and responsive. W*hen you write JSX, React converts it into Virtual DOM objects. *

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

Internally becomes:

{ type: "h1", props: { children: "Hello" } }

4)Explain props vs state with an example.

In React, both props and state are used to manage data, but they work differently.

props

• Props are used to pass data from parent to child components.
• Read-only,Passing values or functions between components
• props controlled by parent component

// Parent Component
function Parent() {
  return <Child name="Lakshmi" />;
}

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

• The child cannot change the prop value.

state

• While state is used to manage data inside a component itself.
• Can be changed using setState or useState.
• Storing and updating component data

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

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

• count is state.
• It changes inside the same component when you click the button.

5)What is lifting state up in React? Give an example.
To be Disused

• Lifting state up in React means moving shared state to a common parent component so that multiple child components can use and update it consistently. It helps maintain a single source of truth and ensures data synchronization between components.

• When two or more components need to share the same data, keeping that data in their common parent avoids inconsistencies.

6)If you need to store a previous state value before update, how would you handle that?

-To store a previous state value before updating, I use the useRef hook in React. It helps keep track of the old value between renders without triggering re-renders. By updating the ref inside a useEffect, I can easily compare the previous and current state values

Example:

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

function Counter() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef(); // to store previous value

  useEffect(() => {
    // store the previous count before updating
    prevCountRef.current = count;
  }, [count]);

  const prevCount = prevCountRef.current;

  return (
    <div>
      <h2>Current Count: {count}</h2>
      <h3>Previous Count: {prevCount}</h3>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;