Build a Typewriter Effect

Question

Accepted Answer

## Building a Typewriter Effect in React

**Mental model:** A small state machine that grows then shrinks the visible substring of the current phrase. State: the phrase index, the current character count, and whether we're deleting. Each timed step adjusts the count by ±1; at the ends you flip phase (pause, then delete; or advance to the next phrase).

### Step 1 — Index, count, phase
```jsx
const [phrase, setPhrase] = useState(0);
const [count, setCount] = useState(0);
const [deleting, setDeleting] = useState(false);
```

### Step 2 — Step the machine on a timer
```jsx
useEffect(() => {
  const full = phrases[phrase];
  const done = !deleting && count === full.length;
  const empty = deleting && count === 0;
  const delay = done ? 1200 : deleting ? 50 : 100;
  const id = setTimeout(() => {
    if (done) setDeleting(true);
    else if (empty) { setDeleting(false); setPhrase((p) => (p + 1) % phrases.length); }
    else setCount((c) => c + (deleting ? -1 : 1));
  }, delay);
  return () =

Build a Typewriter Effect

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)