Retype This Passage

React Hooks and Functional Component Typing Practice

Practice typing realistic React component syntax using useState, useEffect, useCallback, useMemo, JSX, event handlers, and dependency arrays.

90s testintermediateCode passage

Instructions

Type the passage exactly as shown. Preserve capitalization, indentation, line breaks, brackets, quotes, commas, semicolons, JSX syntax, and spacing. Prioritize accuracy first, then improve your typing speed.

Timer01:30

WPM0

Accuracy100%

Progress0%

Mistakes0

Type here

Use Tab for ⇄ and Enter for ↵

import React, { useState, useEffect, useCallback, useMemo } from 'react';↵ ↵ function Counter({ initial = 0 }) {↵ const [count, setCount] = useState(initial);↵ ↵ const increment = useCallback(() => {↵ setCount(current => current + 1);↵ }, []);↵ ↵ const decrement = useCallback(() => {↵ setCount(current => current - 1);↵ }, []);↵ ↵ useEffect(() => {↵ const timer = setInterval(increment, 1000);↵ ↵ return () => {↵ clearInterval(timer);↵ };↵ }, [increment]);↵ ↵ const status = useMemo(() => {↵ return count % 2 === 0 ? 'Even' : 'Odd';↵ }, [count]);↵ ↵ return (↵ <section className="counter">↵ <h1>Count: {count}</h1>↵ <p>Status: {status}</p>↵ ↵ <button type="button" onClick={decrement}>↵ Decrease↵ </button>↵ ↵ <button type="button" onClick={increment}>↵ Increase↵ </button>↵ </section>↵ );↵ }↵ ↵ export default Counter;

The passage stays in place while your typed text lines up directly on top of it. Tip: use `Tab` for `⇄` and `Enter` for `↵` while typing the passage.

Progress0%

Correct chars: 0Typed chars: 0Mistakes: 0Status: Ready