React Questions

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

Functional Component: This is a normal Javascript function which returns some UI(JSX). It is simple, easy to write and uses the hooks like useState, useEffect to manage the data. There is no need of using 'this' keyword.

Ex:

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

Class component: This is written using a class and extends React.Component. It uses this.state and this.setState() to handle data and has lifecycle methods like componentDidMount. Here, 'this' keyword is mostly used.

Ex:

class Welcome 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 means JavaScript XML which allows to write HTML like code inside Javascript which makes the code easier to understand.

Ex:

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

It looks like HTML but it is not. Before it runs into the browser, JSX is converted into normal Javascript function, then it becomes

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

If the code is written only using Javascript, it becomes complex hence JSX makes react coding faster and easier.

1. Explain props vs state with an example.

Props: Props is termed as properties which is used to pass data from parent to child component. It is a read-only code which means the child component cannot change it. They are mainly used to pass information to a component so that it display differently based on the data it receives.
Ex:

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

function App() {
  return <Greeting name="Vidhya" />;
}

Output: Hello, Vidhya

State: State is used to store data that can change inside a component. Unlike props, state is mutable, meaning it can be updated using hooks like useState in functional components or this.setState() in class components. It is useful for handling dynamic changes such as user input, counters.
Ex:

import { useState } from "react";

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

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

1. You have a counter that should increase by 2 each time a button is clicked. Why does the following not work? How would you fix it?

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

   const handleClick = () => {
   setCount(count + 1);
   setCount(count + 1);
   };

In the above code, when setCount(count + 1) is called twice, it uses the same value of count. So, if the count is 0, it will change to 1 and again it updates to 1. Hence, the counter only increases by 1. Alternatively, this code can be written as

const handleClick = () => {
  setCount(count => count + 2);

Here, the value will be increased by twice.

5.What is the difference between useRef and useState? When would you choose one over the other?

useState: This is a React Hook used to store state values in a component. When the state changes using setState, React re-renders the component to reflect the updated value in the UI. It is ideal for situations where changing data should update the UI, such as counters, form inputs.

Ex:

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

  const Increase =()=> {
     setCount(count + 1);
   };

   const Decrease =()=> {
     setCount(count - 1);
  };

  const Reset =()=> {
     setCount(12);
  };

   return (
    <div className="text-center border-2 gap-10">
       <h1>React Counter</h1>
        <h2>{count}</h2>
      <button onClick={Increase}>Increase</button>
     <button onClick={Decrease}>Decrease</button>
      <button onClick={Reset}>Reset</button>
     </div>
  );
}

 export default Counter;

useRef: This is a react hook helps to store a value that 'persists between renders' which means that value remains available even after the component rerenders. Here, the previous value remains same only the count value renders.

6.What is lifting state up in React? Give an example.
It is a common state when you want two or more components to share the same state. Instead of keeping state in a child component where only that component can access it,