5.Components_Functional.md

100 React Questions (Components - Functional/Class)

Q1. What are React Components? What are the main elements of it? V. IMP.

In React, a component is a reusable building block for creating user interfaces.

// 1. Import the React library
import React from 'react';

// 2. Define a functional component
function Component() {
  // 3. Return JSX to describe the component's UI
  return (
    <div>
      <h1>I am a React Reusable Component</h1>
    </div>
  );
}

// 4. Export the component to make it available for use in other files
export default Component;

Q2. What are the Types of React components? What are Functional Components? V. IMP.

Types of Components:

• Functional Components
• Class based Components

Functional Components

• Functional components are declared as Javascript function

• They are stateless components, but with the help of hooks, they can now manage state also.

Class based Components

• Class-based components are declared as Javascript ES6 classes.

• They are stateful components, by using life cycle methods. (meaning they can manage and maintain their own state using this.state.)

• The render method is a class component is responsible for returning JSX.

Q3. How do you pass data between functional components in React?

props (properties) are a way to pass data from a parent component to a child component.

function App() {
    return (
        <ChildComponent name="Happy" purpose="Interview" />
    );
}

function ChildComponent(props) {
    return <div>{props.name}, {props.purpose}!</div>;
}

Q4. What is Prop Drilling in React? V. IMP.

Prop drilling is the process of passing down props through multiple layers of components.

Parent Component -> Child Component -> Grand Child Component Data is passed down through each component.

PropParent

function PropParent() {
  return (
    <div>
      <PropChild message={"data"} />
    </div>
  );
}

PropChild

function PropChild({ message }) {
  return (
    <div>
      <PropGrandChild message={message} />
    </div>
  );
}

PropGrandChild

function PropGrandChild({ message }) {
  return (
    <div>
      <h3>{message}</h3>
    </div>
  );
}

Q5. Why to Avoid Prop Drilling? In how many ways can avoid Prop Drilling? V. IMP.

Why to avoid Prop Drilling:

1. Maintenance: Prop drilling can make code harder to maintain as changes in data flow require updates across multiple components.
2. Complexity: It increases code complexity and reduces code readability.
3. Debugging: Debugging becomes challenging when props need to be traced through numerous components.

5 Ways to avoid Prop Drilling

1. Using Context API
2. Using Redux
3. Using Component Composition
4. Using Callback Functions
5. Using Custom Hooks

Q6. What are Class Components in React? V. IMP.

Class based Components

• Class-based components are declared as Javascript ES6 classes.

• They are stateful components, by using life cycle methods. (meaning they can manage and maintain their own state using this.state.)

• The render method is a class component is responsible for returning JSX.

  import React, {Components} from 'react';
  
  class AppClass extends Component {
      render() {
          return <h1>Hello World!</h1>
      }
  }
  
  export default AppClass;

Q7. How to pass data between class components in React?

this.props can be used in child component to access properties/data passed from parent component.

class ParentComponent extends Component {
  render() {
    const dataToSend = "Hello from Parent!";
    return (
      <div>
        <ChildComponent message={dataToSend} />
      </div>
    );
  }
}

export default ParentComponent;

class ChildComponent extends Component {
  render() {
    return (
      <div>
        <p>Message: {this.props.message}</p>
      </div>
    );
  }
}

export default ChildComponent;

Q8. What is the role of this keyword in class components?

this keyword is used to refer to the instance of the class.

Q9. What are the 5 differences btw Functional components & Class components? V. IMP.

Functional Component vs. Class Component

Functional Component	Class Component
Syntax: Defined as a JS function.	Syntax: Defined as a JS (ES6) class.
State: Originally stateless but can now maintain state using hooks.	State: Can manage local state with this.state.
Lifecycle methods: No	Lifecycle methods: Yes
Readability: More readable & concise. 🏆	Readability: Verbose (complex).
this keyword: No	this keyword: Yes (Access props using this.props)
Render method: Do not have render method.	Render method: Have render method.