react hook 的一个问题， useEffect 内部，为什么 可以调用 setxxx 方法？

最近在学习 react hook 经常看到这样的写法：

import { getname } from "..."; my_compOnent= (props) => { const [name, setName] = useState("yazoox"); clickme = () => { const newname = getname(); setName(newname); } useEffect(() => { // call API getname，每次调用，都会随机拿一个名字 const newname = getname(); setName(newname); }, [name]); return ( <div>{name}</div> <div> <button Onclick={clickme()} >click me</button> </div> ); } 

useEffect 是在 component mount 后调用的（相当于 componentDidMount/DidUpdate)。

两个问题：

1. mount 完成后，useEffect 触发了，调用 getname 得到了新的名字，再用 setName 更新这个 state，那就是说 UI 又要 update 。这样的话，不会再触发 useEffect 么？再 setName 一次，dependency - name 又变化了，这个 effect 就会再触发啊。......

注：这种情况，我能想到的实际场景，就是打开网站，界面先画出来，但是图片还在后台加载。等图片加载完成了，继续画。

1. 另外一个例子，我点击 button，刷新了一次 name，userEffect 会不会触发啊？

还是说，react hook 设计上，保证了在 useEffect 内部，setXXX 即使是 dependency，也不会重复触发？

谢谢！

p.s. 有没有 react 可以 online 编辑 /实践的网站？ codepen.io 需要 VIP 才可以......