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 才可以......