Infinite recursion using React Hooks - reactjs

Question

I am using React's State Hook in a functional component for getting therapist from database. From which I seen, in useEffect() where setTherapists([therapists].concat(therapists)); is, the list is called in an infinite recursion. I can't see where the problems is, or how do I need to proper call the list.
After I correct get the therapists array I need to render all the therapist. This is how I thought about, but I don't know exactly how to write with Hooks State:
function renderTherapists() {
const items = this.state.therapists.map( (t, idx) => (
<TherapistCard therapist={t} key={idx} />
))
return (
<div ref={0} className="therapist-list">
{ items }
</div>
)
}
My current functional component:
function TypeArticleOne(props) {
const [ therapists, setTherapists ]= useState([]);
const [speciality, setSpeciality]= useState('ABA');
const [pageLoading, setPageLoading]= useState(true);
const topProfilesUrl = 'therapists/top/profiles'
useEffect(() => {
console.log(speciality);
getTopTherapists();
window.scrollTo(0, 0);
}, []);
const getTopTherapists = () => {
setPageLoading(true);
loadTopTherapists();
};
const loadTopTherapists = () => {
console.log("second");
props.actions.reqGetTherapistsTopProfiles({
body: {},
headers: null,
resource: `${topProfilesUrl}`
})
};
useEffect(() => {
let apiData = props.apiData;
if (apiData.topProfiles && apiData.topProfiles.success) {
const therapists = apiData.topProfiles.therapists;
setPageLoading(false);
setTherapists([therapists].concat(therapists));
}
}, [pageLoading, therapists]);

Answer 1

You need to pass the Therapists coming in the props to the default value of your useState declaration:
const [ therapists, setTherapists ] = useState(apiData.topProfiles.therapists);
So when it's re-rendered, it doesn't get called again in a loop.
The constant therapists is shadowing the therapist list from your outer scope.
if (apiData.topProfiles && apiData.topProfiles.success) {
const therapists = apiData.topProfiles.therapists;
setPageLoading(false);
setTherapists([therapists].concat(therapists));
}
Also, as it's already an array, you can call the concat method without put the list within brackets [].
Like:
const loadedTherapists = apiData.topProfiles.therapists;
setPageLoading(false);
setTherapists(therapists.concat(loadedTherapists));