title: API call / state in an EventHandler is always one step behind - cant fix it with an useEffect
body: <p>So basically I try to get data (movie list) from an API call when clicking on a NavLink, but the state or the param is always one step behind.</p>
  <p>I think the problem is that the handler is async. But I can't find the solution to make it work. For example, I tried to get the id of movie list with event.target, but then when copying a route for example genre/99-Documentary and opening it in a new tap it would render /.</p>
  <p>Could somebody help me? Would really appreciate it.</p>
  <pre><code>export default function DiscoverMovies(props) {
    const { setMovies } = props;
    const [genres, setGenres] = useState([]);
    const params = useParams();
    let genreId = params.id;
  
    async function handleGetMovieList(event) {
      try {
        const response = await fetch(
          `https://api.themoviedb.org/3/discover/movie?api_key=${apiKey}&amp;with_genres=${genreId}`
        );
        const data = await response.json();
        setMovies(data.results);
      } catch (error) {
        console.log(error);
      }
    }
  
    useEffect(() =&gt; {
      (async () =&gt; {
        try {
          const response = await fetch(
            `https://api.themoviedb.org/3/genre/movie/list?api_key=${apiKey}`
          );
          const data = await response.json();
          setGenres(data.genres);
        } catch (error) {
          console.log(error);
        }
      })();
    }, [setGenres]);
  
    return (
      &lt;&gt;
        &lt;ul className=&quot;genre-list&quot;&gt;
          {genres.map((genre) =&gt; (
            &lt;li className=&quot;genre-list__item&quot; key={genre.id}&gt;
              &lt;NavLink
                exact
                id={genre.id}
                onClick={handleGetMovieList}
                activeClassName=&quot;active&quot;
                to={`/genre/${genre.id}-${genre.name}`}
              &gt;
                {genre.name}
              &lt;/NavLink&gt;
            &lt;/li&gt;
          ))}
        &lt;/ul&gt;
      &lt;/&gt;
    );
  }
  </code></pre>