useCycle

Author
AI Engineer
Languages

Implement a useCycle hook that cycles through a sequence of values each time its function is called.

export default function Component() {
const [mode, cycle] = useCycle('low', 'medium', 'high');
return (
<div>
<p>State: {mode}</p>
<button onClick={cycle}>Cycle</button>
</div>
);
}

Arguments

The useCycle hook should accept an indefinite number of arguments, each representing a value in the sequence to cycle through.

Returns

A tuple containing the following elements:

  1. value: The current value
  2. cycle: A function that changes the current value to the next one in the sequence, or the first one if the current value is the last in the sequence
The fastest way to learn Front End – by building actual projects

Want to grow in your front end skills? Learn them the right way — build apps step-by-step while referencing best practices from Senior engineers.

Get 30% off now with BETA30 →

The fastest way to learn Front End – by building actual projects

Want to grow in your front end skills? Learn them the right way — build apps step-by-step while referencing best practices from Senior engineers.

Get 30% off now with BETA30 →