React useEffect keeps fetching-CodePudding

I'm using useEffect to fetch data from DB and later the code displays that list of data.

  useEffect(() => {
    console.log("triggered")
    fetch("http://localhost:8080/group/getAll")
    .then(response => response.json())
    .then(data => {
      setGroups(data)
    })
  })

I noticed that triggered got printed to console thousands of times in a couple seconds so I'm assuming it's constantly sending request to the DB.

Is this the expected behavior? And if not, how to I fix it?

p.s. I know with the [] parameter it only renders once. But is there a way to make useEffect work correctly (only fetch data when groups rerenders on the webpage)

-----edit-----

This is how I used groups

  const createGroup = groups.map((group, i) => {
    return (
      <Dropdown.Item 
        key = {i}
        onClick = {showUser}
        id = {group["groupId"]}
      >
      {group["groupName"]}
      </Dropdown.Item> 
    )
  })

And createGroup

<Dropdown.Menu>
  {createGroup}
</Dropdown.Menu>

----edit2------- I understand how dependency arrays work. I tried [groups] but that didn't change anything. I also tried [createGroup] but got an error because the function was not initialized at first. Can I add an HTML element or something to the dependency array? With the structure of my code what exactly should I put in there?

CodePudding user response：

You should specify, the state variables or the props, which when changed should trigger the useEffect, like this:

useEffect(() => {
    console.log("triggered")
    fetch("http://localhost:8080/group/getAll")
    .then(response => response.json())
    .then(data => {
      setGroups(data)
    })
  }, [x , y]);

Here x and y, can be state variables, props, or both. Only when the values of these will change, then the useEffect will trigger.

CodePudding user response：

Regarding:

I noticed that triggered got printed to console thousands of times in a couple seconds so I'm assuming it's constantly sending request to the DB.

This has already been answered, and no, for your use case, this isn't the expected behavior since you seem to want to fetch data from the DB,

fetch("http://localhost:8080/group/getAll")

collect the JSON,

.then(response => response.json())

and set a state variable using setGroups

.then(data => {
  setGroups(data)
})

That said, regarding:

But is there a way to make useEffect work correctly (only fetch data when groups rerenders on the webpage)

How do you want the useEffect to work correctly ?

Per its usage in your code, it seems to working as designed. If you want to trigger a re-render using useEffect you are going to want another state variable other than groups, which, as many commentators and users pointed out, is going to cause an infinite loop.

Ask yourself: Do you want the API call to be made again? (and hence the re-render) based on the selection of a group from <Dropdown>?

Then the value that was selected in the <Dropdown> needs to be passed to the dependency array of useEffect