React Questions

const Welcome = () => { ... };

class Welcome extends React.Component { ... }

function Welcome(props) { ... }

let Welcome = (props) => { ... }

By wrapping the useEffect call in a conditional statement

By passing an empty array [] as the second argument to useEffect

By using componentDidMount instead

By not passing a dependency array

Direct DOM manipulation can lead to inconsistencies between the actual DOM and React's virtual DOM

React doesn't have access to the DOM, so manipulation is impossible

DOM manipulation is slow and inefficient in modern browsers

React's event system automatically prevents DOM manipulation

JSX attributes can only be strings, while HTML attributes can be any data type.

There is no difference, they are the same.

JSX attributes are used for styling, while HTML attributes are for functionality.

JSX attributes are written in camelCase, while HTML attributes are lowercase.

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.

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

To stop the event from bubbling up the component tree

To prevent the default behavior of the event (like form submission)

To detach the event handler after it has been executed once

To cancel the event entirely and prevent any further actions

To automatically submit the form when all fields are filled.

To style form elements based on user input.

To send data to the server for validation.

To ensure data integrity and prevent invalid submissions.

To handle user events

To manage component state

To enforce the data type of props

To style components

To style components dynamically

To manage and update the state of a functional component

To fetch data from an API

To handle user input events

Using the useState hook

Using this.state = { new state } directly

By calling this.setState({ new state })

By modifying this.props object