Top React Interview Questions

What is React and how does it differ from other JavaScript libraries?

What are the core concepts of React?

What is the difference between a controlled component and an uncontrolled component in React?

What is the purpose of the `key` prop in React?

What is a higher-order component in React?

What is the difference between `useState` and `useReducer` in React?

What is React Hooks and how does it differ from class-based components?

What is the purpose of the `useEffect` hook in React?

What is a React context and how is it used?

What is the difference between `React.memo` and `React.useCallback`?

What is the purpose of the `useRef` hook in React?

What is the difference between a functional component and a class-based component in React?

What is the purpose of the `getDerivedStateFromProps` method in React?

What is the difference between `React.PureComponent` and `React.Component`?

What is the purpose of the `shouldComponentUpdate` method in React?

What is the difference between `React.lazy` and `React.Suspense`?

What is the purpose of the `useLayoutEffect` hook in React?

What is the difference between `React.createContext` and `React.useContext`?

What is the purpose of the `useImperativeHandle` hook in React?

What is the difference between `React.forwardRef` and `React.createRef`?

Write a React component that renders a list of items and allows the user to add new items to the list.

function ListItem(props) {
  return <li>{props.item}</li>;
}
function List() {
  const [items, setItems] = React.useState([]);
  const [newItem, setNewItem] = React.useState('');
  const handleSubmit = (event) => {
    event.preventDefault();
    setItems([...items, newItem]);
    setNewItem('');
  };
  return (
    <form onSubmit={handleSubmit}>
      {' '}
      <input
        type="text"
        value={newItem}
        onChange={(event) => setNewItem(event.target.value)}
      />{' '}
      <button type="submit">Add</button>{' '}
      <ul>
        {' '}
        {items.map((item, index) => (
          <ListItem key={index} item={item} />
        ))}{' '}
      </ul>{' '}
    </form>
  );
}

Write a React hook that fetches data from an API and returns the data and an error message if the fetch fails.

function useFetchData(url) {
  const [data, setData] = React.useState(null);
  const [error, setError] = React.useState(null);
  React.useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => setError(error));
  }, [url]);
  return [data, error];
}

Write a React component that renders a counter and allows the user to increment and decrement the counter.

function Counter() {
  const [count, setCount] = React.useState(0);
  const handleIncrement = () => setCount(count + 1);
  const handleDecrement = () => setCount(count - 1);
  return (
    <div>
      {' '}
      <p>Count: {count}</p> <button onClick={handleIncrement}>+</button>{' '}
      <button onClick={handleDecrement}>-</button>{' '}
    </div>
  );
}

Write a React component that renders a todo list and allows the user to add, remove, and toggle the completion of todo items.

function TodoItem(props) {
  return (
    <li style={{ textDecoration: props.completed ? 'line-through' : 'none' }}>
      {props.text}
    </li>
  );
}
function TodoList() {
  const [todos, setTodos] = React.useState([]);
  const [newTodo, setNewTodo] = React.useState('');
  const handleSubmit = (event) => {
    event.preventDefault();
    setTodos([...todos, { text: newTodo, completed: false }]);
    setNewTodo('');
  };
  const handleToggle = (index) =>
    setTodos(
      todos.map((todo, i) =>
        i === index ? { ...todo, completed: !todo.completed } : todo
      )
    );
  const handleRemove = (index) =>
    setTodos(todos.filter((todo, i) => i !== index));
  return (
    <form onSubmit={handleSubmit}>
      {' '}
      <input
        type="text"
        value={newTodo}
        onChange={(event) => setNewTodo(event.target.value)}
      />{' '}
      <button type="submit">Add</button>{' '}
      <ul>
        {' '}
        {todos.map((todo, index) => (
          <TodoItem key={index} text={todo.text} completed={todo.completed} />
        ))}{' '}
      </ul>{' '}
      <button onClick={() => handleToggle(0)}>Toggle</button>{' '}
      <button onClick={() => handleRemove(0)}>Remove</button>{' '}
    </form>
  );
}

Write a React component that renders a simple form with input fields for name and email, and a submit button that logs the form data to the console.

function Form() {
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log({ name, email });
  };
  return (
    <form onSubmit={handleSubmit}>
      {' '}
      <label>Name:</label>{' '}
      <input
        type="text"
        value={name}
        onChange={(event) => setName(event.target.value)}
      />{' '}
      <br /> <label>Email:</label>{' '}
      <input
        type="email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
      />{' '}
      <br /> <button type="submit">Submit</button>{' '}
    </form>
  );
}

Write a React component that renders a simple table with columns for name and age, and rows for each item in the data array.

function Table() {
  const data = [
    { name: 'John', age: 25 },
    { name: 'Jane', age: 30 },
  ];
  return (
    <table>
      {' '}
      <thead>
        {' '}
        <tr>
          {' '}
          <th>Name</th> <th>Age</th>{' '}
        </tr>{' '}
      </thead>{' '}
      <tbody>
        {' '}
        {data.map((item) => (
          <tr key={item.name}>
            {' '}
            <td>{item.name}</td> <td>{item.age}</td>{' '}
          </tr>
        ))}{' '}
      </tbody>{' '}
    </table>
  );
}

Write a React component that renders a simple dropdown menu with options for each item in the data array.

function Dropdown() {
  const data = ['Option 1', 'Option 2', 'Option 3'];
  const [selected, setSelected] = React.useState(data[0]);
  const handleChange = (event) => setSelected(event.target.value);
  return (
    <select value={selected} onChange={handleChange}>
      {' '}
      {data.map((option) => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}{' '}
    </select>
  );
}