Return to Question

And a fancy code sandbox.

Again, here's the link to the code sandbox.

My custom hook useTyper.js ended up a bit of a mess to read.

It's mimicking a nested for-loop but using "React.useRef"s to hold on to index values between renders. With index values I mean current positions of the outer and inner loop (those often named i and j in a classic nested for loop).

One thing I'm particularly unhappy with is the naming of stringIdx and stringsIdx. Any suggestion for a change?

useTyper.js:

For completion, this is the useInterval hook being used by useTyper:

(It can be referenced from one of Dan Abramovs blog posts.)

useInterval.js:

Also, here's how the useTyper hook can be used:

My custom hook useTyper.js ended up as a bit of a mess and hard to read.

It's mimicking a nested for-loop but using React.useRefs to hold on to the indexes between renders. The indexes are the current positions of the outer and inner loop, those often named i and j in traditional nested for loops.

One thing I'm particularly unhappy with is the naming of stringIdx and stringsIdx. Any suggestion for a change?

useTyper.js

For completion, this is the useInterval hook being used by useTyper. It can be referenced from one of Dan Abramovs blog posts.
useInterval.js

Here is how the useTyper hook can be used.