React Questions

<img></img>

<img></>

When you need real-time validation and immediate feedback to the user.

When you prefer a more imperative approach and direct DOM manipulation.

When dealing with a large, complex form where performance optimization is critical.

When integrating with a third-party library that requires direct access to form elements.

To render the component for the first time.

To handle user interactions like button clicks.

To update the state based on changes in props.

To perform any necessary cleanup operations before a component is removed from the DOM.

function MyComponent(props) { props.defaultProps = { name: 'John' }; }

export default function MyComponent(props = { name: 'John' }) { }

defaultProps = { name: 'John' }(MyComponent);

MyComponent.defaultProps = { name: 'John' };

<span>This is incorrect {</span>

Nothing will happen; the state will remain unchanged.

The component will re-render, but the state change won't be reflected.

An error will be thrown, and the application will crash.

The component will re-render, and the state change will be reflected correctly.

Virtual DOM diffing

Component rehydration

State reconciliation

Lifecycle management

Using inline event handlers like onClick={handleClick}

Defining separate event handler methods within the component

Using the addEventListener method like in vanilla JavaScript

React components don't handle events directly; you must use a library.

React doesn't provide a way to access the triggering element

As a property of the event object (e.g., event.target)

By passing the element as an argument to the event handler

Using this keyword inside the event handler

There is no difference; both are interchangeable.

Functional components are written in JavaScript, while class components are written in JSX.

Class components can have state and lifecycle methods, while functional components cannot.

Functional components are used for complex UI, while class components are used for simple UI.