Top 20 ReactJS Interview Questions and Answers in 2024

Top 20 ReactJS Interview Questions

React Interview Questions for Freshers

1. What is React?

Answer:
React is a really cool JavaScript library created by Facebook. It’s used for building user interfaces, particularly for single-page applications where you want a smooth and responsive user experience. Think of it as a way to build parts of a website (like buttons, forms, etc.) as reusable components, so you don’t have to keep rewriting the same code over and over.

2. What are the advantages of using React?

Answer:
There are quite a few perks to using React:

• Component-Based: You can build encapsulated components that manage their own state, and then combine them to create complex UIs.
• Virtual DOM: This helps with performance because React updates only the parts of the DOM that need to change, rather than reloading the whole page.
• Declarative: You describe what you want to see on the screen, and React makes it happen, which makes your code easier to understand and debug.
• Great Community: Tons of resources, libraries, and tools are available because so many developers use and contribute to React.

3. What are the limitations of React?

Answer:
While React is awesome, it does have some downsides:

• Fast-Paced Development: It evolves quickly, and keeping up with the latest changes can be challenging.
• Not a Full Framework: You’ll need to add other libraries for state management, routing, etc., because React is just for building UIs.
• Learning Curve for JSX: JSX, the syntax React uses, can be a bit tricky to get used to if you’re new to it.

4. What is useState() in React?

Answer:
useState is a Hook that lets you add state to functional components. Instead of using class components to manage state, you can use useState to keep track of state in a simpler, more concise way. Here’s a quick example:

const [count, setCount] = useState(0);

Here, count is your state variable, and setCount is the function that updates count.

5. What are keys in React?

Answer:
Keys are super important when you’re rendering lists of elements. They help React identify which items have changed, been added, or removed, which makes updates more efficient. For example:

const listItems = items.map(item => <li key={item.id}>{item.name}</li>);

Here, item.id is used as the key to uniquely identify each list item.

6. What is JSX?

Answer:
JSX stands for JavaScript XML. It’s a syntax extension that lets you write HTML-like code within JavaScript, making it easier to create and visualize the UI you’re building. For instance:

const element = <h1>Hello, world!</h1>;

JSX looks like HTML but is actually compiled into JavaScript.

Read also this article here

7. What are the differences between functional and class components?

Answer:
Functional and class components serve different purposes:

• Functional Components: These are simple and used mainly for presenting UI. They didn’t have state or lifecycle methods until Hooks were introduced.
• Class Components: These are more complex and can manage their own state and lifecycle methods, like componentDidMount or shouldComponentUpdate.

8. What is the virtual DOM? How does React use the virtual DOM to render the UI?

Answer:
The virtual DOM is an in-memory representation of the real DOM. React uses it to optimize performance by making changes in the virtual DOM first, then figuring out the minimal number of changes needed to update the real DOM. This makes updates faster and more efficient.

9. What are the differences between controlled and uncontrolled components?

Answer:

• Controlled Components: These components have their state managed by React. For example, a form input’s value is controlled by React state:

const [value, setValue] = useState('');
<input value={value} onChange={e => setValue(e.target.value)} />

• Uncontrolled Components: These rely on the DOM to manage their state. You use refs to get their values:

const inputRef = useRef(null);
<input ref={inputRef} />

You access the input value through inputRef.current.value.

10. What are props in React?

Answer:
Props, short for properties, are how you pass data from a parent component to a child component. They’re read-only and help make your components reusable. For example:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
<Greeting name="Alice" />
<Greeting name="Bob" />

Here, name is a prop that customizes the Greeting component.

11. Explain React state and props.

Answer:

• State: This is data that a component manages and can change over time. State changes can trigger re-renders, updating the UI.
• Props: These are inputs to a component, passed down from parent to child. Props are read-only and help customize the component.

12. Explain about types of side effects in React component.

Answer:
Side effects in React are operations that affect something outside the scope of the function being executed. Common side effects include:

• Data Fetching: Getting data from an API.
• Subscriptions: Setting up or cleaning up subscriptions like WebSockets.
• Manual DOM Updates: Manipulating the DOM outside of React’s control, usually using refs.

13. What is prop drilling in React?

Answer:
Prop drilling is when you pass data through many layers of components to get it to a deeply nested component. It can make your code harder to maintain. For exampe:

function Grandparent(props) {
  return <Parent user={props.user} />;
}

function Parent(props) {
  return <Child user={props.user} />;
}

function Child(props) {
  return <h1>Hello, {props.user.name}!</h1>;
}

The user prop is passed from Grandparent to Parent to Child.

14. What are error boundaries?

Answer:
Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the whole app. They’re great for improving the robustness of your app. Here’s a basic example:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Log the error
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

Wrap any component tree with ErrorBoundary to catch errors in that tree.

15. What is React Hooks?

Answer:
React Hooks are functions that let you use state and other React features in functional components. They were introduced in React 16.8 and allow functional components to do things that were previously only possible with class components, like managing state and using lifecycle methods.

16. Explain React Hooks.

Answer:
React Hooks are special functions that let you hook into React features. Some common Hooks include:

• useState: Adds state to functional components.
• useEffect: Handles side effects like fetching data or subscribing to services.
• useContext: Accesses context values without passing props through every level of the tree.
• useReducer: Manages state using a reducer function, similar to Redux.
• useCallback and useMemo: Optimize performance by memoizing functions and values.
• useRef: Creates references to DOM elements or other mutable values that persist across renders.

17. What are the rules that must be followed while using React Hooks?

Answer:
When using Hooks, you need to follow two main rules:

• Only call Hooks at the top level: Don’t call Hooks inside loops, conditions, or nested functions. Always call them at the top of your component function.
• Only call Hooks from React functions: You can call Hooks from React function components or custom Hooks, not from regular JavaScript functions.

18. What is the use of useEffect React Hooks?

Answer:
useEffect is a Hook that lets you perform side effects in your components. It’s like combining componentDidMount, componentDidUpdate, and componentWillUnmount in class components. You use it to fetch data, set up subscriptions, and clean up resources. Here’s an example:

useEffect(() => {
  // Fetch data or set up a subscription

  return () => {
    // Cleanup code
  };
}, [dependencies]);

The second argument is an array of dependencies that determine when the effect should run.

19. Why do React Hooks make use of refs?

Answer:
Refs in React are used to access DOM elements directly or to store mutable values that don’t trigger a re-render when changed. Hooks like useRef create a ref object that persists across renders. For example, you can use a ref to focus an input:

const inputRef = useRef(null);

useEffect(() => {
  inputRef.current.focus();
}, []);

20. What are Custom Hooks?

Answer:
Custom Hooks are a way to extract and reuse logic in your components. They let you combine several built-in Hooks to create new functionality. Custom Hooks start with the word “use” and can call other Hooks. Here’s an example of a custom Hook that fetches data:

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

You can then use this useFetch Hook in any component to fetch data: