React Interview Questions
Answer: React is a JavaScript library for building user interfaces. Its core concepts include componentization, the Virtual DOM, and unidirectional data flow. React divides the user interface into independent, reusable parts through components, improves performance and rendering efficiency using the Virtual DOM, and ensures data predictability and consistency via unidirectional data flow.
What is JSX?
Answer: JSX is a syntax extension for JavaScript used to describe the structure of the user interface in React. It allows us to write markup similar to HTML directly within JavaScript code, making the structure and logic of React components clearer and easier to read.
What is the difference between State and Props in React?
Answer: State is data managed internally by a component and can be modified using the setState method. State is mutable; when it changes, React re-renders the component. Props are data passed from parent components to child components; they are immutable, and child components cannot directly modify their own props.
What are React Lifecycle Methods? List some common lifecycle methods.
Answer: React lifecycle methods are functions called at different stages of a component's life cycle. Some common lifecycle methods include:
componentDidMount: Called after the component is mounted, useful for performing one-time initialization operations.componentDidUpdate: Called after the component has updated, used to handle logic related to the update.componentWillUnmount: Called before the component is unmounted, used for cleanup operations such as clearing timers or unsubscribing from notifications.
What are React Hooks? List some common Hooks.
Answer: React Hooks are a new feature introduced in React 16.8 that allow functional components to have state and other React features. Some common Hooks include:
useState: Used to add state management to functional components.useEffect: Used to perform side effects in functional components, such as subscribing to data or making network requests.useContext: Used to access React Context within functional components.useRef: Used to create mutable references within functional components.
How does the event handling mechanism work in React?
Answer: In React, event handling is implemented by binding event handler functions to specific events on a component. In JSX, event handlers are added using syntax similar to HTML, such as onClick, onChange, etc. Event handler functions receive an event object as a parameter and can update component state or execute other logic by calling setState.
How is communication between components handled in React?
Answer: Communication between components can be achieved through prop drilling and Context. Parent components can pass data to child components via props, which are received by the child components. By using Context, data can be shared across the component tree; this is implemented by creating a context provider and consuming it with a context consumer to enable cross-component data passing.