I have some code like the sample below where I call a state setter inside the callback for another state setter. All of this needs to happen inside a useCallback hook to avoid the useEffect hook being called on every render.

My question is, how many renders does the useCallback hook trigger? Would setBar here trigger another render? And if so, is there a more efficient way to write this to trigger fewer renders (without removing the useEffect hook)?

Bear in mind that the code below is just a simplified example of the code in my application.

const [foo, setFoo] = useState(0)
const [bar, setBar] = useState(0)

const baz = useCallback(() => {
  setFoo((prevState) => {
    const newState = prevState += 1
    // does this trigger another render?
    setBar(newState)
    return newState
  })
})

useEffect(() => baz, [baz])