Carousel in React — React Technical Interview Questions & Answers

Carousel in React

Carousel in React

  • Carousel = array of slides + index state. Next: setI(i => (i + 1) % n). Prev similar. Optional autoplay is useEffect + interval + cleanup. Accessibility: buttons labelled, pause on focus. Libraries exist; a 10-line version proves you understand state.
  • Carousel in React — start A. Next → B. Modulo wraps to A after C.

Technical Interview Tip: Index state + modulo next.

Code Examples for Carousel in React

Example

// Carousel
import { useState } from "react";

const slides = ["A", "B", "C"];

export default function Carousel() {
  const [i, setI] = useState(0);
  return (
    <div>
      <p>{slides[i]}</p>
      <button onClick={() => setI((x) => (x + 1) % slides.length)}>Next</button>
    </div>
  );
}

Carousel in React — start A. Next → B. Modulo wraps to A after C.

How to Explain Carousel in React to an Interviewer

Explain Carousel as if you are teaching a junior — definition, then one tiny UI.

State : index. Next : modulo wrap.

Write 5–10 lines that use Carousel and say what the UI does.

Show JSX Say the screen

What mistake do freshers make with Carousel?

Autoplay : effect + cleanup.