J'ai une page avec plusieurs balises ChildComponent et je souhaite que chaque ChildComponent sache quelle API appeler en fonction du ChildComponent sur lequel l'utilisateur a cliqué. onClick() ouvrira un modal.

J'ai remarqué que lorsque le modal est ouvert, l'appel API est effectué deux fois. Lorsque je ferme le modal, l'appel API sera à nouveau effectué.

Ce que j'ai appris de cet article, c'est que React se comporte correctement - en appelant plusieurs fois des fonctions dans les composants fonctionnels de React

Existe-t-il une autre façon de structurer cela pour qu'il n'y ait qu'un seul appel API axios à la fois ?

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);