React Interview Questions

In React, state and props are both used to manage data and determine how components render and behave. However, they serve different purposes and have distinct characteristics.

What is State in React?

State is an internal data store that is specific to a component. It is used to keep track of information that can change over time and affect how the component renders and behaves. State is managed within the component itself and can be modified using special methods provided by React.

Key Characteristics of State:

1. Mutable:

   • State can be changed within the component, and these changes can trigger re-rendering of the component to reflect the updated state.

2. Local to the Component:

   • State is encapsulated within the component and is not accessible to other components unless explicitly passed down through props or other means.

3. Initialized in the Component:

   • State is usually initialized in the constructor of a class component or using the useState Hook in a functional component.

4. Triggers Re-rendering:

   • When the state changes, React re-renders the component to reflect the new state. This allows for dynamic and interactive UIs.

Example:

Class Component:

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

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

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

Functional Component with Hooks:

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

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

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

How is State Different from Props?

1. Mutability:

• State: Mutable. State can be updated within the component using this.setState in class components or the setState function from the useState Hook in functional components.
• Props: Immutable. Props are read-only and cannot be modified by the component that receives them. They are passed down from parent components.

2. Scope:

• State: Local to the component. Each component manages its own state independently.
• Props: External to the component. Props are passed to the component by its parent and are used to convey information and behavior down the component tree.

3. Initialization and Use:

• State: Initialized within the component, typically in the constructor for class components or using useState for functional components. State is used for data that changes over time and affects how the component renders.
• Props: Passed from parent components and accessed via this.props in class components or directly in the function signature in functional components. Props are used to pass data and event handlers to child components.

4. Purpose:

• State: Used for data that needs to be managed within the component and can change over time. Examples include form input values, toggle states, and counters.
• Props: Used for passing data and functions from parent to child components to configure the child component. Examples include static data like titles, messages, and callback functions for event handling.

Example Comparison:

function ChildComponent(props) {
  return <p>{props.message}</p>;
}

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: 'Hello, World!' };
  }

  updateMessage = () => {
    this.setState({ message: 'Hello, React!' });
  };

  render() {
    return (
      <div>
        <ChildComponent message={this.state.message} />
        <button onClick={this.updateMessage}>Update Message</button>
      </div>
    );
  }
}

In this example:

• The ParentComponent manages the message in its state and passes it as a prop to ChildComponent.
• ChildComponent receives the message as a prop and displays it.
• The state of ParentComponent can be updated, which re-renders ChildComponent with the new message.

Conclusion

State and props are both essential in React for managing data and rendering components, but they serve different roles. State is used for internal component data that can change, while props are used to pass data and functions between components. Understanding the distinction between the two is crucial for effectively managing and organizing data flow in React applications.