Concatenate an array with 2 different useEffect calls react - reactjs

Question

I am trying to make two different api calls -- get the array results and then concatenate them together into 1 array, which I then present in the return.
I am having difficulty with :
a) There are two calls so the array is populated 2x or
b) The data is not persisted so I lose it between calls.
The goal is to make 2 calls to the api (each once) and concatenate the arrays together into 1 result -- which is cleared or emptied between page refresh. So it is not called more than once ... or is not continuously lengthened.
My code is as follows:
const [results, setResults] = useState([]);
useEffect(() => {
getStories();
getContributions();
}, []);
const getStories = async () => {
const { data } = await axios.get(`/api/stories/admin`); // get the data
setResults((currentArray) => [...currentArray, ...data]);
};
const getContributions = async () => {
const { data } = await axios.get(`/api/contributions/admin`);
setResults((currentArray) => [...currentArray, ...data]);
};
useEffect(() => {
async function loadBootstrap() {
const bootstrap = await import(
"../../../node_modules/bootstrap/dist/js/bootstrap"
);
var tooltipTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
}
loadBootstrap();
}, []);
return (<> {JSON.stringify(results)}
</>);

Answer 1

You should fetch them both and then set the result once.
Something like the following:
useEffect(() => {
getStoriesAndContributions();
}, []);
const getStoriesAndContributions = async () => {
const [{ data: stories }, { data: contributions }] = await Promise.all([
axios.get(`/api/stories/admin`),
axios.get(`/api/contributions/admin`),
]);
setResults([...stories, ...contributions]);
};
The Promise.all() is not really needed, just in order to make it parallel.

Answer 2

I'm not sure I quite get what you mean when listing the problems, but why not simply do:
const loadArrayElements = async () => {
const { data: stories } = await axios.get(`/api/stories/admin`);
const { data: contributions } = await axios.get(`/api/contributions/admin`);
setState([...stories, ...contributions]);
}
useEffect(() => void loadArrayElements(), []);

Answer 3

What you can do is fetch and store the two data sources in javascript variables and call the setState one time in the useEffect :
useEffect( async () => {
fetchData()
}, []);
const fetchData = async () => {
const { data:stories } = await axios.get(`/api/stories/admin`);
const { data:contributions } = await axios.get(`/api/contributions/admin`);
setResults([...stories, ...contributions])
}