how do you prevent repeating a reaction?

The main problem is with setUsers(usersTemp) in the code of the UserList.

Whenever some local state is changed, the component re-renders. So, since you always re-set the users during the render, you trigger another render.

You could use a useEffect and only update the users when the userList changes

const UserList = (props) => {

  // Get list
  const {
    userlist
  } = props

  // Set up state variable - users
  const [users, setUsers] = useState([])

  useEffect(() => {
      // Now get all users as objects
      let usersTemp = []

      for (let ii = 0; ii < userlist.users.count; ii++) {
        const user = userlist.users[ii];
        const userItem = {
          id: user.index,
          name: user.firstname + user.surname
            ... // More things go here, but I don't think they're relevant
        }
        usersTemp.push(userItem)
      }
    }

    setUsers(usersTemp)
  }, [userlist])

return (
    <div className="userList">
      { // This will render a UserItem component}
    </div>
  )
}

export default UserList