I have a page with multiple ChildComponent tags, and I want each ChildComponent to be told which API to call based on which ChildComponent the user clicked. onClick() will open a modal.

I noticed that when the modal is opened, the API call is made twice. When I close the modal, the API call will be made again.

What I learned from this post is that React behaves correctly - calling functions multiple times in React functional components

Is there another way to structure this so that there is only one axios API call at a time?

const [posts, setPosts] = useState([]);

export default function ParentComponent() {
    const fetchPosts = useCallback(async () => {
        try {
            const result = await axios(`https://jsonplaceholder.typicode.com/posts`);
            setPosts(result.data.data);
        } catch (error) {
            console.log(error);
        }
    }, []);
}

<ChildComponent
      fetchPosts={fetchPosts}
      onClick={handleOnclick}
/>

const ChildComponent = ({ fetchPosts }) => {
    useEffect(
       () => props.fetchPosts, 
       [props.fetchPosts]
    );
}

export default memo(ChildComponent);