如何使用reactjs render方法运行多个任务？

import React, { useState, useEffect } from 'react';

// 子组件1：任务1
const Task1 = () => {
  const [data, setData] = useState('');

  useEffect(() => {
    // 在组件加载后执行任务
    fetchData();
  }, []);

  const fetchData = async () => {
    // 执行异步任务
    const response = await fetch('https://api.example.com/task1');
    const result = await response.json();
    setData(result);
  };

  return (
    <div>
      <h2>任务1</h2>
      <p>{data}</p>
    </div>
  );
};

// 子组件2：任务2
const Task2 = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    // 执行任务
    setCount(count + 1);
  };

  return (
    <div>
      <h2>任务2</h2>
      <button onClick={handleClick}>点击增加</button>
      <p>计数：{count}</p>
    </div>
  );
};

// 父组件
const App = () => {
  return (
    <div>
      <Task1 />
      <Task2 />
    </div>
  );
};

export default App;