reactjs - リンクホバーでReact Send API呼び出しを行い、データをプリロードします

Question

私は React アプリの UI を改善しようとしています。私が試して解決したいことの 1 つは、ユーザーがリンクにカーソルを合わせたときに API 呼び出しを事前に起動する方法です。データはすでにロードされておりFakeAPI.jsx、API 呼び出しからのデータを使用して状態にすでに取り込まれています

現在、私は以下を持っています：

//Home.jsx

import {Link} from 'react-router-dom';

const Home = () => {
    return (
        <div className="links">
            //I would want to load the API call when a user hovers on the below link
            <Link to="/fakeApi">Fake Api</Link>
        </div>
    );
};

export default Home;

そして、API呼び出し

//FakeApi.jsx
import React, { useState, useEffect } from 'react';

const FakeApi = () => {

const [data, setData] = useState([])

useEffect(()=>{
    setTimeout(() => {
        //simulates an api call to the backend
        setData(['1','2','3'])
    }, 250);
}, [])



    return (
        <div>
            Fake Api call
            {data.map(entry=>(
                <div key={entry}>number is {entry}</div>
            ))}
        </div>
    );
};

export default FakeApi;

これまでに思いついた唯一の解決策は、API 呼び出しを に配置しhome.jsx、ホバー時に呼び出して、データを小道具として渡すことです。

以下の通り：

//Home.jsx
import React from 'react';
import {Link} from 'react-router-dom';
import LinkWithPreload from '../shared/LinkWithPreload';

const Home = () => {

    const [data, setData] = useState([])

    useEffect(()=>{
        setTimeout(() => {
            //simulates an api call to the backend
            setData(['1','2','3'])
        }, 1000);
    }, [])

    return (
        <div className="links">
            <Link to="/fakeApi" props={data}>Fake Api</Link>
        </div>
    );
};

export default Home;

ただし、実際home.jsxには、他のいくつかの関数と API 呼び出しを含む非常に大きなファイルであり、整理しようとしているので、別の解決策を探しています-ルートへの各呼び出しを保持するために、

ご協力いただきありがとうございます！