React.js Conceptual Questions

1. What is React, and why is it used?

React is a JavaScript library created by Meta (formerly Facebook) for building user interfaces. It allows developers to create complex UIs by combining smaller, reusable components. React uses a virtual DOM to improve performance and provides a component-based architecture to manage state and props effectively.

---

2. What are the main features of React?

• Virtual DOM for efficient updates.

• Component-based architecture for reusable and modular code.

• Unidirectional data flow to simplify data management.

• Hooks for state and lifecycle management in functional components.

• JSX for writing HTML-like syntax in JavaScript.

---

3. What is the difference between functional and class components?

• Functional Components:

  • Written as simple JavaScript functions.

  • Use hooks like useState() and useEffect() for state and lifecycle management.

  • Easier to write and maintain.

• Class Components:

  • Written using ES6 class syntax.

  • Require lifecycle methods like componentDidMount() for managing state and side effects.

  • More verbose compared to functional components.

Preferred: Functional components (due to simplicity and hooks introduced in React v16.8).

---

4. What are Props and State in React?

• Props:

  • Passed from parent to child components.

  • Immutable and used to pass data or functions.

• State:

  • Managed within a component.

  • Mutable and used to handle dynamic data.

---

5. How does the Virtual DOM work?

React uses the virtual DOM to enhance performance. The process involves:

1. Re-rendering the virtual DOM when state or props change.

2. Comparing the updated virtual DOM with the previous version (diffing).

3. Updating only the changed elements in the real DOM.

---

6. What is the purpose of the key prop in lists?

The key prop helps React identify which items in a list have changed, been added, or removed. Keys should be unique and stable, typically using object IDs. Avoid using array indexes as keys unless necessary.

---

7. What are React Hooks?

Hooks are functions introduced in React v16.8 that allow functional components to use state and lifecycle features. Common hooks include:

• useState(): For managing state.

• useEffect(): For handling side effects.

• useContext(): For accessing context values.

---

8. What are the React lifecycle methods, and when are they used?

React components go through three lifecycle phases:

• Mounting:

  • constructor()

  • getDerivedStateFromProps()

  • render()

  • componentDidMount()

• Updating:

  • shouldComponentUpdate()

  • render()

  • componentDidUpdate()

• Unmounting:

  • componentWillUnmount()

For functional components, hooks like useEffect() are used instead of lifecycle methods.

---

9. When would you use useEffect?

• To fetch data from an API.

• To set up subscriptions or timers.

• To handle cleanup (like removing event listeners) using the return function in useEffect.

---

10. What is Context API, and why is it used?

The Context API is used to manage the global state by avoiding prop drilling. It allows components to access shared data directly, such as themes, authentication status, or user settings.

---

11. How does React handle state management?

React provides several ways to manage state:

• Component-level state using useState or useReducer.

• Context API for global state shared across components.

• Third-party libraries like Redux or Zustand for complex state management.

---

12. What is Redux, and why use it?

Redux is a state management library that centralizes application state in a global store. It helps in managing shared state efficiently, especially when:

• Multiple components require access to the same data.

• The application has complex state interactions.

---

13. What are the building blocks of Redux?

• Store: Centralized state container.

• Actions: Plain JavaScript objects describing changes.

• Reducers: Pure functions that specify how the state changes in response to actions.

---

14. What is the useReducer hook, and when would you use it?

useReducer is a hook used for complex state logic. It provides a way to manage state using actions and reducers, similar to Redux but scoped to a component.

---

15. How do you optimize performance in React?

• Use memoization with React.memo or useMemo.

• Implement lazy loading for components using React.lazy and Suspense.

• Avoid unnecessary re-renders by using React.PureComponent or useCallback.

• Use keys efficiently in lists.

---

16. How do you fetch data in React, and where do you handle API calls?

• Fetch data using fetch or libraries like Axios.

• Handle API calls inside useEffect() for functional components or componentDidMount() for class components.

---

17. What is the difference between useEffect and useLayoutEffect?

• useEffect: Runs asynchronously after rendering, suitable for data fetching or subscriptions.

• useLayoutEffect: Runs synchronously after rendering but before the DOM is updated, suitable for layout adjustments.

---

18. What is the importance of React's unidirectional data flow?

Unidirectional data flow ensures that data flows from parent to child components, making state management predictable and debugging easier.

---

19. How do you handle error boundaries in React?

Error boundaries are implemented using class components with lifecycle methods like componentDidCatch() and getDerivedStateFromError(). They catch JavaScript errors in the component tree and prevent the app from crashing.

---

20. Explain the difference between controlled and uncontrolled components.

• Controlled Components:

  • Manage form data using state.

  • Data flows through React state.

• Uncontrolled Components:

  • Use refs to manage form data.

  • Data flows through the DOM.

---