title: reactjs state is not being updated with button click using useState hook
body: <p>I am new to React js and to practice my skills I have tried to make a pokemon react js app using the pokemon api. After following a tutorial I decided to add more features onto the application for further practice.</p>
  <p>What I want to do is change the fetched url on the click of a button using the <code>useState</code> hook and the <code>onClick</code> function. When I change the <code>resourceType</code> to <code>berry</code> from <code>pokemon</code>, it updates successfully, however the problem is when I try to query <code>pokemon</code> from <code>berry</code> the state is not being updated to <code>pokemon</code>.</p>
  <p>I am unsure why this is happening because in the <code>useEffect</code> function, I have included the dependency to be <code>resourceType</code>, thus it should be changing everytime the <code>resourceType</code> is updated.</p>
  <p>Any hints towards the right direction would be greatly appreciated.</p>
  <p>Main <code>App.js</code> component:</p>
  <pre><code>import './App.css';
  import { Button } from '@material-ui/core'
  import React, { useEffect, useState } from 'react'
  import BerryCards from './Components/BerryCards';
  import PokemonCards from './Components/PokemonCards';
  
  function App() {
    const [resourceType, setResourceType] = useState('pokemon');
    const [data, setData] = useState([]);
    const [nextUrl, setNextUrl] = useState('');
    const [prevUrl, setPrevUrl] = useState('');
    const [loading, setLoading] = useState(true);
  
    async function getAllPokemon(url) {
      return new Promise((resolve, reject) =&gt; {
        fetch(url)
          .then(res =&gt; res.json())
          .then(data =&gt; {
            resolve(data);
          })
      })
    }
  
    async function getPokemons(url) {
      return new Promise((resolve, reject) =&gt; {
        fetch(url)
          .then(res =&gt; res.json())
          .then(data =&gt; {
            resolve(data);
          })
      })
    }
  
    useEffect(() =&gt; {
      async function fetchData() {
        try {
          let response = await getAllPokemon(`https://pokeapi.co/api/v2/${resourceType}`);
          setNextUrl(response.next)
          setPrevUrl(response.previous)
          setLoading(false)
          await loadingPokemon(response.results);
        }
        catch (e) {
          console.log(e);
        }
      }
      fetchData();
    }, [resourceType])
  
    console.log(resourceType)
  
    const next = async () =&gt; {
      setLoading(true)
      let nextData = await getAllPokemon(nextUrl)
      await loadingPokemon(nextData.results)
      setNextUrl(nextData.next)
      setPrevUrl(nextData.previous)
      setLoading(false)
    }
  
  
    const prev = async () =&gt; {
      if (!prevUrl) {
        return;
      } else {
        setLoading(true)
        let nextData = await getAllPokemon(prevUrl)
        await loadingPokemon(nextData.results)
        setNextUrl(nextData.next)
        setPrevUrl(nextData.previous)
        setLoading(false)
      }
  
    }
  
    const loadingPokemon = async (pokemonData) =&gt; {
      let _pokemon = await Promise.all(pokemonData.map(async pokemon =&gt; {
        let pokemonRecord = await getPokemons(pokemon.url);
        return pokemonRecord;
      }))
  
      setData(_pokemon)
    }
  
    return (
      &lt;div&gt;
        {loading ? &lt;h1&gt;Loading...&lt;/h1&gt; : (
          &lt;&gt;
            &lt;div&gt;
              &lt;div&gt;
                &lt;Button onClick={() =&gt; setResourceType('berry')}&gt;Berries&lt;/Button&gt;
                &lt;Button onClick={() =&gt; setResourceType('pokemon')}&gt;Pokemon&lt;/Button&gt;
              &lt;/div&gt;
  
              &lt;div&gt;
                {!prevUrl ? &lt;Button onClick={prev} variant=&quot;outlined&quot; disabled&gt;Prev&lt;/Button&gt; :
                  &lt;Button onClick={prev} variant=&quot;outlined&quot; color=&quot;primary&quot;&gt;Prev&lt;/Button&gt;}
                {!nextUrl ? &lt;Button onClick={next} disabled variant=&quot;outlined&quot;&gt;Next&lt;/Button&gt; :
                  &lt;Button onClick={next} color=&quot;primary&quot; variant=&quot;outlined&quot;&gt;Next&lt;/Button&gt;}
              &lt;/div&gt;
              {resourceType === 'pokemon' ? data &amp;&amp; data.map((pokemon, i) =&gt; {
                return (
                  &lt;div&gt;
                    &lt;PokemonCards key={i}
                      pokemon={pokemon} /&gt;
                  &lt;/div&gt;
                )
              }) : data &amp;&amp; data.map((berry, i) =&gt; {
                return (
                  &lt;div&gt;
                    &lt;BerryCards key={i}
                      berry={berry} /&gt;
                  &lt;/div&gt;
                )
  
              })}
  
            &lt;/div &gt;
          &lt;/&gt;
        )
        }
  
      &lt;/div &gt;
    )
  }
  
  export default App;
  </code></pre>
  <p>Using props to pass the data to the other UI components</p>
  <pre><code>import React from 'react'
  import { Card } from '@material-ui/core'
  
      const BerryCards = ({ berry }) =&gt; {
          return (
              &lt;div&gt;
                  &lt;Card&gt;
                      &lt;p&gt;{berry.name}&lt;/p&gt;
                      &lt;p&gt;{berry.natural_gift_power}&lt;/p&gt;
                  &lt;/Card&gt;
              &lt;/div&gt;
          )
      }
      export default BerryCards
  
      import React from 'react'
      import { Card } from '@material-ui/core'
      const PokemonCards = ({ pokemon }) =&gt; {
          try {
              return (
                  &lt;div&gt;
                      &lt;Card&gt;
                          &lt;p&gt;{pokemon.name}&lt;/p&gt;
                          {pokemon.types.map(type =&gt; &lt;p key={Math.random() + 1}&gt;{type.type.name}&lt;/p&gt;)}
                          &lt;p&gt;Height {pokemon.height}&lt;/p&gt;
                          &lt;p&gt;Weight {pokemon.weight}&lt;/p&gt;
                          &lt;p&gt;Ability: {pokemon.abilities[0].ability.name}&lt;/p&gt;
                          &lt;img src={pokemon.sprites.front_default} alt={pokemon.name}&gt;&lt;/img&gt;
                      &lt;/Card&gt;
                  &lt;/div&gt;
              )
          } catch (e) {
              console.log(e)
              //the problem- when request url is changed to berries, it remains as berries and is not changed
              console.log(pokemon)
          }
      
      }
      export default PokemonCards
  </code></pre>