title: Using useEffect & useState with Nextjs
body: <p>I'm trying to get my head around useState and useEffect but I think I have started to run before I could walk.</p>
  <p>I have an array of words:</p>
  <pre><code>const words = [&quot;There&quot;, &quot;Their&quot;, &quot;They're&quot;, &quot;Were&quot;];
  </code></pre>
  <p>I want to display the first word in the array, when I click 'Next Word' it will change to the next word, click 'Prev Word' and it will go to the previous word.</p>
  <p>Simple enough using useState right?</p>
  <p>Here's my code:</p>
  <pre><code>import { useState, useEffect } from 'react';
  
  const Array = () =&gt; {
  
    const words = [&quot;There&quot;, &quot;Their&quot;, &quot;They're&quot;, &quot;Were&quot;];
    const [count, setCount] = useState(0);
    const [word, setWord] = useState(words[0]);
    return (
      &lt;div&gt;
        &lt;button onClick={prevWord}&gt;Prev Word&lt;/button&gt;
        &lt;span&gt;{words[count]} &lt;/span&gt;
        &lt;button onClick={nextWord}&gt;Next Word&lt;/button&gt;
      &lt;/div&gt;
    );
  }
    
  export default Array;
  </code></pre>
  <p>First issue:</p>
  <p>When I click 'Next Word' or 'Prev Word' it clicks through the array, unfortunately it keeps going. If the user clicked 'Next Word' e.g 15 times, he would have to click 'Prev Word' 12 times before he would see a word again, I don't like this one bit. What would be the fix?</p>
  <p>My second issue</p>
  <p>I then want to take it a step further. When I click next letter I want it to show the first letter, each time I click Next it will add the next letter.</p>
  <p>I currently have the letters showing in the console but I can't work out how to display it they I want?</p>
  <p>Here's the full code for everything I have:</p>
  <pre><code>import { useState, useEffect } from 'react';
  
  const Array = () =&gt; {
  
    const words = [&quot;There&quot;, &quot;Their&quot;, &quot;They're&quot;, &quot;Were&quot;];
    const [count, setCount] = useState(0);
    const [countLetter, setCountLetter] = useState(0);
    const [word, setWord] = useState(words[0]);
    const [letter, setLetter] = useState(word[0]);
  
    const nextWord = (() =&gt; {
      setCount(prevCount =&gt; prevCount + 1)
      console.log(words[count]);
    })
    const prevWord = (() =&gt; {
      setCount(prevCount =&gt; prevCount - 1)
      console.log(words[count]);
    })
    const nextLetter = (() =&gt; {
      setCountLetter(prevcountLetter =&gt; prevcountLetter + 1)
      console.log(word[countLetter]);
    })
    const prevLetter = (() =&gt; {
      setCountLetter(prevcountLetter =&gt; prevcountLetter - 1)
      console.log(word[countLetter]);
    })
  
  
    // console.log(word[count]); // spells the word
    // console.log(word[count]); // spells the word
    return (
      &lt;div&gt;
        &lt;button onClick={prevLetter}&gt;Prev Letter&lt;/button&gt;
        &lt;button onClick={prevWord}&gt;Prev Word&lt;/button&gt;
        &lt;span&gt;{words[count]} &lt;/span&gt;
        &lt;button onClick={nextWord}&gt;Next Word&lt;/button&gt;
        &lt;button onClick={nextLetter}&gt;Next Letter&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  export default Array;
  </code></pre>
  <p>Any help appreciated.</p>