React Interview Questions (Part 1): Basics

What is React, and why is it used?

React is a popular JavaScript library used for building user interfaces, especially single-page applications. It adopts a declarative approach, allowing developers to define the UI based on the application's state, and React efficiently handles updates to the DOM. This declarative model makes it easier to build scalable and optimized applications, leading to improved performance and a better user experience. React also allows for reusable components, which simplifies development and maintenance.

What are components in React?

Components are the fundamental building blocks of React applications. They combine markup, styles, and logic in a reusable way, allowing developers to break down the UI into smaller, isolated pieces. Each component can manage its own state and be reused across different parts of an application, making development more modular and scalable.

What are the differences between functional and class components?

Class components are the older method, structured similarly to object-oriented programming. They include a constructor for setting up state, and lifecycle methods like componentDidMount and componentWillUnmount to manage mounting and unmounting.

Class Component Example:

import React, { Component } from 'react';

class ToggleButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOn: true,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isOn: !prevState.isOn,
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isOn ? 'On' : 'Off'}
      </button>
    );
  }
}

export default ToggleButton;

Functional components, on the other hand, follow a more declarative approach and are simpler to write. They became more powerful with the introduction of hooks, which allow us to manage state, handle side effects, and use other React features without needing a class component. This results in cleaner, more readable, and maintainable code, especially for modern React development.

Functional Component Example:

import React, { useState } from 'react';

function ToggleButton() {
  const [isOn, setIsOn] = useState(true);

  const handleClick = () => {
    setIsOn(prevIsOn => !prevIsOn);
  };

  return (
    <button onClick={handleClick}>
      {isOn ? 'On' : 'Off'}
    </button>
  );
}

export default ToggleButton;

What are React Hooks, and can you explain the purpose of useState and useEffect?

Hooks are special features introduced in React 16.8 that enable the use of state and other React functionalities in functional components without needing class components. Two of the most important hooks are useState and useEffect

useState allows us to add and manage state within a functional component. It returns an array with the current state and a function to update it, enabling components to store and respond to user interactions or data changes.

import React, { useState } from 'react';

function Counter() {
  // Declare a state variable 'count' and a function 'setCount' to update it
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

useEffect handles side effects in functional components, such as data fetching, DOM manipulation, or interacting with browser APIs like setTimeout and setInterval. It can run code after the component renders and provides control over how and when effects should re-run based on dependencies, making it essential for managing lifecycle-related tasks.

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    // This runs after the component mounts
    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    // Cleanup function to clear the interval when the component unmounts
    return () => clearInterval(interval);
  }, []); // The empty dependency array ensures this effect runs only once after the component mounts

  return (
    <div>
      <h1>Timer: {seconds} seconds</h1>
    </div>
  );
}

export default Timer;

What is JSX in React, and how does it differ from regular JavaScript?

JSX (JavaScript XML) is a special syntax used in React that allows you to write HTML-like code within JavaScript. Although it looks like HTML, JSX is transpiled into JavaScript function calls, typically React.createElement(), when the application runs. The main benefit of using JSX is that it makes components more readable, clear, and easier to maintain, especially as the UI grows more complex. Without JSX, writing the UI purely in JavaScript could become difficult to manage and result in less maintainable code.

JSX Example:

import React from 'react';

function Greeting() {
  const name = 'John';
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to React.</p>
    </div>
  );
}

export default Greeting;

Equivalent React.createElement Example:

import React from 'react';

function Greeting() {
  const name = 'John';
  return React.createElement(
    'div', 
    null, 
    React.createElement('h1', null, `Hello, ${name}!`),
    React.createElement('p', null, 'Welcome to React.')
  );
}

export default Greeting;

Can you explain what prop drilling is and how to avoid it in React?

Prop drilling occurs in React when data is passed from a parent component to deeply nested child components through multiple layers of intermediary components. This can make the code harder to maintain, especially if intermediate components don't need to use the data themselves, but only pass it along. Prop drilling can be avoided by using the React Context API, which allows state to be shared across components without passing props through every level. Alternatively, state management libraries like Redux or Zustand can also help manage and share state more efficiently across an application.