Core

 

What is React?

  • Define what React is and why it's used.
  • Explain the benefits of using React for building web applications.

What are the key features of React?

  • Declarative UI, component-based architecture, unidirectional data flow, JSX, etc.

What is JSX in React?

  • What is JSX?
  • Why do we use JSX instead of JavaScript to create UI elements?
  • Explain how JSX is transformed into JavaScript.

What is the Virtual DOM?

  • What is the virtual DOM?
  • How does React use the virtual DOM for efficient updates?
  • Explain the difference between the virtual DOM and the real DOM.

What are React components?

  • Define components in React.
  • Explain the difference between class components and functional components.

What are props in React?

  • Define props and their usage.
  • How are props passed to components?
  • Difference between props and state.

What is the difference between state and props in React?

  • Explain the difference between state and props with examples.
  • Why can state be mutable but props cannot?

What is React's unidirectional data flow?

  • Explain the concept of unidirectional data flow in React and its benefits.

2. React Functional Components and Class Components

What are functional components in React?

  • Define functional components.
  • How do functional components work, and how are they different from class components?

What are class components in React?

  • Explain the purpose of class components in React.
  • How do you handle state in class components?

What is a stateless component?

  • Define stateless components and their advantages.

What is a stateful component?

  • Define stateful components and explain how they are different from stateless components.

3. React Hooks

What are React hooks?

  • Define what hooks are in React.
  • Why were hooks introduced in React?

What is the useState hook?

  • Explain the useState hook and how it works in functional components.
  • Provide an example of its usage.

What is the useEffect hook?

  • Explain the useEffect hook and its purpose.
  • What are the use cases of useEffect in React?
  • How do you clean up effects in useEffect?

What is the useContext hook?

  • Define the useContext hook and explain how it works.
  • Explain how it helps to avoid prop drilling.

What is the useReducer hook?

  • Explain the useReducer hook and how it differs from useState.
  • Provide an example of using useReducer.

What is the useRef hook?

  • Explain the useRef hook and its use cases.
  • How does it differ from state and how can it be used to reference DOM elements?

4. React Component Lifecycle

What is the lifecycle of a React component?

  • Explain the phases in the lifecycle of a React component (Mounting, Updating, Unmounting).
  • Describe lifecycle methods in class components such as componentDidMount, componentDidUpdate, and componentWillUnmount.

How do you manage side effects in React?

  • Discuss how componentDidMount/componentDidUpdate and useEffect manage side effects in React components.

What is getDerivedStateFromProps?

  • Explain the getDerivedStateFromProps lifecycle method.
  • How and when is it called?

What is shouldComponentUpdate?

  • Explain the purpose of shouldComponentUpdate.
  • Why is it useful in optimizing performance?

5. Handling Events in React

How do you handle events in React?

  • Explain the difference between handling events in React vs. plain JavaScript.
  • Example of handling a button click event in React.

What is event delegation in React?

  • Explain event delegation and how it works in React’s synthetic event system.

What is SyntheticEvent in React?

  • Explain the concept of SyntheticEvent and how it abstracts native browser events.

6. React State Management

What is state in React?

  • Define state in React and its purpose.
  • How do you update state in React?

How do you pass state between components?

  • Explain how to pass state between parent and child components in React.

What is controlled vs. uncontrolled components?

  • Explain the difference between controlled and uncontrolled components.
  • Provide examples of each.

How do you lift state up in React?

  • Explain what “lifting state up” means and why it’s useful in React.

7. React Performance Optimization

What are some ways to optimize React app performance?

  • Explain strategies like code splitting, lazy loading, memoization (React.memo), useMemo, useCallback, etc.

What is React.memo?

  • Define React.memo and its purpose in optimizing component re-renders.

What is the use of useMemo and useCallback?

  • Explain the difference between useMemo and useCallback.
  • How do they help with performance optimization?

How does React handle re-rendering?

  • Explain when React re-renders components and how you can optimize unnecessary re-renders.

8. React Routing and Navigation

What is React Router?

  • Define React Router and its purpose in a React application.

How do you implement routing in React?

  • Explain how to set up routing in React using React Router.
  • What are Route, Switch, Link, and NavLink?

9. React Context API

What is the React Context API?

  • Define the Context API in React and explain when and why to use it.

How do you use Context to avoid prop drilling?

  • Explain how you would use the Context API to pass data without having to pass props down through multiple layers of components.

10. React Testing

How do you test React components?

  • Explain various testing methods, such as unit testing with Jest, and integration testing with React Testing Library.

What is Jest?

  • Define Jest and its role in testing React applications.

What is React Testing Library?

  • Explain what React Testing Library is and how it differs from Enzyme.

11. Advanced React Concepts

What are higher-order components (HOCs)?

  • Define HOCs and explain how they are used in React for component composition.

What is the Render Props pattern?

  • Define the Render Props pattern and provide an example of its use.

What is Code Splitting in React?

  • Explain what code splitting is and how you can implement it using React’s React.lazy and Suspense.

What is Server-Side Rendering (SSR)?

  • Define SSR and explain how it benefits SEO and performance.
  • What is Next.js and how does it enable SSR with React?

What is Static Site Generation (SSG)?

  • Define SSG and explain the difference between SSR and SSG.

12. React Ecosystem

What is Redux?

  • Explain what Redux is and why it's used for state management in React.
  • Describe the core principles of Redux (actions, reducers, store).

What is React Query?

  • Explain what React Query is and how it simplifies handling server-side data in React applications.

Comments

Post a Comment