1. What is React.js?
Answer: React.js is a JavaScript library developed by Facebook used for building user interfaces, especially single-page applications. It allows developers to create reusable UI components and manage the view layer efficiently.
2. What are the main features of React?
Answer:
- JSX: A syntax extension that allows HTML to be written inside JavaScript code.
- Components: React is built around components, which are reusable and can be nested, managed, and handled independently.
- Virtual DOM: React creates a virtual representation of the real DOM, improving performance by minimizing direct updates to the actual DOM.
- One-way data binding: Data flows from the parent to the child component, making it easier to manage data and state.
3. What is a component in React?
Answer: A component is a small, reusable piece of code that defines a part of the UI. Components can be either class-based or function-based, and they can manage their own state and lifecycle methods.
4. What is the difference between functional and class components?
Answer:
- Functional components are stateless and typically used for simple UI rendering. Before React 16.8, they couldn’t have state or lifecycle methods.
- Class components are stateful and have access to lifecycle methods. However, since React 16.8, functional components can use state and lifecycle methods using hooks.
5. What is JSX?
Answer: JSX stands for JavaScript XML. It is a syntax extension that allows writing HTML-like code within JavaScript. JSX makes the code easier to read and write. It is then transformed into regular JavaScript at runtime.
6. What is the Virtual DOM?
Answer: The Virtual DOM is an in-memory representation of the real DOM elements generated by React components. When a component’s state changes, React updates the Virtual DOM first, then compares it with the real DOM (using a process called reconciliation), and only changes the parts that need to be updated, improving performance.
7. What are props in React?
Answer: Props (short for properties) are read-only data passed from a parent component to a child component. They are used to pass information and methods down the component tree.
8. What is state in React?
Answer: State is a built-in object that allows components to store and manage dynamic data. Unlike props, state is local to the component and can be updated via the setState method (in class components) or useState hook (in functional components).
9. What is the difference between state and props?
Answer:
- Props: Immutable data passed from a parent to child component. Used to render dynamic content.
- State: Mutable data that belongs to a component. Used to manage data that can change over time.
10. What is the use of useState hook in React?
Answer: The useState hook is used to add state to functional components in React. It returns an array with two elements: the current state value and a function that updates the state.
const [count, setCount] = useState(0);11. What is the useEffect hook used for?
Answer: The useEffect hook allows you to perform side effects in function components. It is equivalent to lifecycle methods in class components like componentDidMount, componentDidUpdate, and componentWillUnmount.
useEffect(() => {<br> // Your side effect code here<br>}, [dependencyArray]);12. What is lifting state up in React?
Answer: Lifting state up is a pattern where the state is moved from a child component to its parent. This is done to allow multiple child components to share and sync their state via the parent component.
13. What are React hooks?
Answer: Hooks are special functions introduced in React 16.8 that allow you to use state and other React features in functional components. Common hooks include useState, useEffect, useContext, and useRef.
14. What is the key prop in React and why is it important?
Answer: The key prop is a unique identifier for elements when rendering lists in React. It helps React identify which items have changed, been added, or removed, allowing efficient re-rendering of components.
15. What is the difference between controlled and uncontrolled components?
Answer:
- Controlled components: Form elements whose values are controlled by React state. Changes to the form input trigger an update in the component’s state.
- Uncontrolled components: Form elements that maintain their own internal state. React does not manage the form input directly, but you can access it using refs.
