React + Redux - Update local state on store change => infinity loop

I have an array that resides in store, let's call it users and I have a custom hook that retrieves it from store (via useSelector). Based on this array in the store, I have a local state in my component that I use as the display source of a table. I need to have it separately in local state since I filter the data based on a search functionality.

What I want to do is, every time when the data in the store changes, I want to update the local state as well to reflect those changes (but call the filtering function on top of it before hand).

This however results in an infinity loop since the useEffect+setState cause a redraw which changes the store variable again etc.

const users = useUsers() // uses redux store  const [displayUsers, setDisplayUsers] = useState(users) // local state    useEffect(() => {     const filteredUsers = onSearch(users) // applies the filtering     setDisplayUsers(filteredUsers) // updates the local state  }, [users])    return <Table source={displayUsers} ... />    

https://stackoverflow.com/questions/66792490/react-redux-update-local-state-on-store-change-infinity-loop March 25, 2021 at 11:07AM