CODEWITHSUNDEEP
javascriptreactjsinfinite-loopuse-effectuse-state
Vatsal A Mehta
Vatsal A Mehta

Reputation: 430

Why useEffect causing infinite rerender?

I have a Rooms component which I want to re-render when the filtering settings for the room changes.The useEffect hook for the same is:

 useEffect(()=>{
        var items1=items.filter((item)=>{
            if(item.fields.price<=price)
            return item;
        })
        var items2=items1.filter((item)=>{
            if(item.fields.breakfast==breakfast)
            return item;
        })
        var items3=items2.filter((item)=>{
            if(item.fields.pets==petsAllowed)
            return item;
        })
        var items4=items3.filter((item)=>{
            if(item.fields.capacity<=capacity)
            return item;
        })
        filteredRooms=items4;
        if(items4.length!=items.length)
        setFilteredRooms(items4);
    })

I havent added filteredRooms as a dependency but still its causing infinte re-rendering.

Upvotes: 0

Views: 289

Answers (2)

Felix Kling
Felix Kling

Reputation: 816970

I have a Rooms component which I want to re-render when the filtering settings for the room changes.

There is likely not a reason to store the filtered array in state. Instead you should be using useMemo, but if items is small you could also just compute the filtered array directly in the render function.

Also there is no need to call .filter multiple times, once is enough.

const filteredRooms = useMemo(
  () => items.filter(
    ({fields}) => fields.price === price && 
                  fields.breakfast === breakfast &&
                  fields.pets === petsAllowed &&
                  fields.capacity <= capacity
  ),
  [items, price, breakfast, petsAllowed, capacity]
)
// use filteredRooms as needed

This will update filteredRooms whenever items, price, breakfast, petsAllowed or capacity changes.

Upvotes: 0

U&#233;slei Suptitz
U&#233;slei Suptitz

Reputation: 410

When using useEffect without an array of dependencies it will be executed whenever some state changes. And your array comparison if(items4!=items) always returns true. So the state is always updated. This generates the loop.

Try something like:

 useEffect(()=>{
    var items1=items.filter((item)=>{
        if(item.fields.price<=price)
        return item;
    })
    var items2=items1.filter((item)=>{
        if(item.fields.breakfast==breakfast)
        return item;
    })
    var items3=items2.filter((item)=>{
        if(item.fields.pets==petsAllowed)
        return item;
    })
    var items4=items3.filter((item)=>{
        if(item.fields.capacity<=capacity)
        return item;
    })
    filteredRooms=items4;
    if(items4.equals(items))
    setFilteredRooms(items4);
},[])

Upvotes: 2

Related Questions