Why useEffect causing infinite rerender?

Question

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.

Answer 1

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);
},[])

Answer 2

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.