How can I stop infinite loop and multi call of api in reactjs?

Question

I create a component which have to call 3 api.

The issue is with one of the call I have to do a filter on the 2 others one but if I do this I have an infinite loop because I set so the component is re-render

const component = ({}) => {
    const [selectedDataFromTabA, setSelectedDataFromTabA] = React.useState(null)
    const [selectedDataFromTabB, setSelectedDataFromTabB] = React.useState(null)

    const { data, loading, error} = useFetch(getData())
    const { data: dataTabA, loading: loadingTabA, error: errorTabA} = useFetch(getDataTabA())
    const { data: dataTabB, loading: loadingTabB, error: errorTabB} = useFetch(getDataTabB())

    if (loading|| loadingTabA|| loadingTabB)
        return "loading"

    if (error|| errorTabA|| errorTabB)
        return 'eror'
    
    setSelectedDataFromTabA(dataTabA.filter(x => x.IdTabA == data[0].IdTabA ))
    setSelectedDataFromTabB(dataTabB.filter(x => x.IdTabB == data[0].IdTabB ))

    return <div>NULL</div>
}

The problem is if I put my sets in useEffect it will call 2 or 3 times my api. So how can I avoid infinite loop and multi calls on api.

function useFetch(serviceFunctionApiCall) {
    const [loading, setLoading] = React.useState(true)
    const [error, setError] = React.useState(false)
    const [data, setData] = React.useState(null)
    React.useEffect(() => {
        const init = async () => {
            var response = await serviceFunctionApiCall
            if (response.status != 200) {
                setError(true)
            } else {
                setData(response.data)
            }
            setLoading(false)
        }

        init()
    }, [])
    return {
        loading,
        error,
        data,
        setData
    }
}

3limin4t0r · Accepted Answer · 2024-03-07 16:08:36Z

4

You should never call a setter directly inside the body of the component, else each time your component will be rerenderd the setter will be called causing a rerender and so here is your infinite loop.

A change of state should only occurred inside of a hook or be triggered by an interaction.

In your case, you want to set selectedDataFromTabA if data or dataTabA is changed, and same for selectedDataFromTabB. So you should put your updates in some useEffect

useEffect(() => {
 if(data && dataTabA) {
   setSelectedDataFromTabA(dataTabA.filter(x => x.IdTabA == data[0].IdTabA ))
 }
}, [data, dataTabA)

useEffect(() => {
 if(data && dataTabB) {
   setSelectedDataFromTabB(dataTabB.filter(x => x.IdTabB == data[0].IdTabB ))
 }
}, [data, dataTabB)

edited Mar 7, 2024 at 16:08

3limin4t0r

21.4k3 gold badges38 silver badges61 bronze badges

answered Mar 7, 2024 at 16:00

Florent M.

1,5473 gold badges10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

3limin4t0r Over a year ago

useMemo() would be a better fit given the context. The only reason to use a state is if OP wants to change the collection after it's being loaded.

const selectedDataFromTabA = useMemo(() => data && dataTabA && dataTabA.filter(x => x.IdTabA == data[0].IdTabA), [data, dataTabA])

Florent M. Over a year ago

Indeed, but in that case we should also ask ourselves if it is needed to memoize those values, and so just creating the variable in the body of the component should be enough. Not sure i should add it in the answer though as they might have their own reason to use a state here

user10863293 Over a year ago

It was the second part of my question, so when I put the setter in useeffect it will call multiple times my api because it rerender the component. To avoid that I have to put the api call in parent ? or there is an other solution ? And yeah I have to use a setter because the data will change with user interaction.

3limin4t0r Over a year ago

@user10863293 The component should only call the API once for getData(), once for getDataTabA(), and once for getDataTabB(). It might be called twice depending on the implementation of useFetch() in combination with <React.StrictMode>, though this issue should not occur in production. See: My React Component is rendering twice because of Strict Mode. (1/2)

3limin4t0r Over a year ago

Alternatively React might unmount/mount your component if the JSX position changes. Which could cause multiple API calls. You could solve this by providing you component with a key to help React identify it as the same component, preventing an unmount/mount cycle. <YourComponent key="unique-identifier"> (2/2)

|

Collectives™ on Stack Overflow

How can I stop infinite loop and multi call of api in reactjs?

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related