title: My useState variable throws cannot read length of undefined
body: <p>I'm implementing pagination where I have a useState variable which I change with a change in page number, below is the code where I use two useEffects to call the data of pagenumber and pagenumber+1 to check if it throws a 404 so I know when to stop displaying the next button.</p>
  <pre><code>useEffect(() =&gt; {
      
          async function fetchData() {
              try {
                  const baseUrl = 'https://gateway.marvel.com:443/v1/public/characters';
                  const url = baseUrl + '?ts=' + ts + '&amp;apikey=' + publickey + '&amp;hash=' + hash+ '&amp;limit=100&amp;offset='+parseInt(pageNumber)*50;
                  const { data } = await axios.get(url);
                  setCharactersData(data.data.results);
                  setLoading(false);
              } catch (e) {
                  setCharactersData([]);
                  console.log(e);
              }
          }
          
          fetchData();
      }, [ pageNumber ]);
  
  
      
      useEffect(() =&gt; {
      
          async function fetchData() {
              try {
                  const baseUrl = 'https://gateway.marvel.com:443/v1/public/characters';
                  const url = baseUrl + '?ts=' + ts + '&amp;apikey=' + publickey + '&amp;hash=' + hash+ '&amp;limit=100&amp;offset='+(parseInt(pageNumber)+1)*50;
                  const { data } = await axios.get(url);
                  console.log(data);
                  setNewData(data.data.results);
                  setLoading(false);
              } catch (e) {
                  setNewData([]);
                  console.log(e);
              }
          }
          
          fetchData();
      }, [ pageNumber ]);
  </code></pre>
  <p>Return part:</p>
  <pre><code>return (
              &lt;div&gt;
                  { parseInt(pageNumber)!==0 &amp;&amp; &lt;Link className='characterlink1' to={`/characters/page/${parseInt(pageNumber)-1}`}&gt;
                          Previous
                      &lt;/Link&gt;}
                      
                      { charactersData.length===0 &amp;&amp; &lt;Four /&gt;}
  
                   { newData.length&gt;0 &amp;&amp; &lt;Link className='characterlink2' to={`/characters/page/${parseInt(pageNumber)+1}`}&gt;
                          Next
                      &lt;/Link&gt;}
              
  </code></pre>
  <p>This was working fine until I added the lines:</p>
  <ol>
  <li>setCharactersData([]); in catch block of first useEffect.</li>
  <li>{ charactersData.length===0 &amp;&amp; } in the return part.</li>
  </ol>
  <p>I added these lines to add a 404 page if the url has a pagenumber which is larger than the available pagenumbers. When I do this I get an error saying:</p>
  <pre><code>TypeError: Cannot read properties of undefined (reading 'length')
  </code></pre>
  <p>The weird part is that I don't see this error until I change the url 3-4 times.</p>