以下のコードで、fetchDataが再作成されることによる無限ループを防ぐ方法はどれですか? ```jsx const MyComponent = () => { const [data, setData] = useState([]); const fetchData = async () => { const response = await fetch('/api/data'); setData(await response.json()); }; useEffect(() => { fetchData(); }, [fetchData]); }; ```