I have a Person component in my react app to get detail personal information from a API endpoint by email address:

const Person = ({ email }) => {
    const [userProfile, setUserProfile] = useState();

    const { callApi } = useUtils();

    const getUser = async ({ email }) => {
        let profile = localStorage.getItem("Person:" + email)
        if (!profile) {
            const response = await callApi({
                endpoint: `WebPage/GetUserProfile?Email=${email}`,
                method: "GET"
            });
            setUserProfile(response);
            localStorage.setItem("Person:" + email, JSON.stringify(response))
        }
        else {
            setUserProfile(JSON.parse(profile))
        }
    }

    useEffect(() => {
        getUser({ email: email });
    }, [])

    return (
        !userProfile ? (
            <span>{email}</span>
        ) : (
            <span title={userProfile.Email}>{userProfile.Name}</span>
        )
    )
}

export default Person;

It is used in many place in my webapp and they are all good, but now I want to use it in a table to convert email address data to detail person profile, so I insert this Person component in each row. here is my table:

<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Created By</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        {currentItems.map(item => (
            <tr key={item.ApprovalId}>
                <td>{item.Title}</td>
                <td><Person email={item.TicketCreatedByEmail} /></td>
                <td>
                    <Button
                        variant="contained"
                        onClick={() => viewDetail(item.SignTicketId, item.ApprovalId)}
                    >Open</Button>
                </td>
            </tr>
        ))}
    </tbody>
</table>

and now the problem is every time when this table load, it will fire fetch request to my API for each row, althought there are same person in different row. for example, I have this table from data source:

|      Title    |          Created By       |   Action  |
|---------------|---------------------------|-----------|
|      test1    |        [email protected]     ||
|      test2    |        [email protected]       ||
|      test3    |        [email protected]     ||
|      test4    |        [email protected]       ||
|      test5    |        [email protected]       ||
|      test6    |        [email protected]     ||

there are only 2 person in this table, Alice and Bob. Ideally there should be only 2 requests go to backend API, and use cached result in local storage for rest of row. but what really happened are 6 requests for all the rows, and request duplicated data. I’m wondering if there is a query or similar way to improve the performance of this case? Thank you.