title: With a React Hook, trying to fetch multiple datas using forEach
body: <p>I'm trying to get data from the Figma API but unfortunately I can't do it in one call. I first need to get the list of all projects in a team and then for each project, get the list of files.</p>
  
  <p>Here is the code I made to do that:</p>
  
  <pre><code>  const [projects, setProjects] = useState([]);
    const [files, setFiles] = useState([]);
  
    useEffect(() =&gt; {
      const fetchProjects = async () =&gt; {
        const result = await axios(
          `https://api.figma.com/v1/teams/${teamId}/projects`, {
            headers: { 'Authorization': `Bearer ${token}` }
          });
        setProjects(result.data.projects);
      };
  
      fetchProjects();
    }, []);
  
    useEffect(() =&gt; {
      projects.forEach(project =&gt; {
        const fetchFiles = async () =&gt; {
          const result = await axios(
            `https://api.figma.com/v1/projects/${project.id}/files`, {
              headers: { 'Authorization': `Bearer ${token}` }
            });
  
          setFiles([ ...files, {
            projectName: project.name,
            files: result.data.files
          }])
        };
  
        fetchFiles();
      })
    }, [projects]);
  </code></pre>
  
  <p>I explicitly only put <code>projects</code> as a dependency on the second useEffect as otherwise it will create a lot of different render and I only want to loop in the list of projects.</p>
  
  <p>In my Figma team I have 4 projects. Each of these have from 1 to 5 files. I would like my state files to have 4 objects that contains the name of the project and the list of files that it contains.</p>
  
  <p>The problem that I have today is first that I have some warnings from React saying that I need to put the other dependencies and second that my files state is only populated with the latest project and not all 4 of them.</p>