Questions about components purity and "Fix a broken clock" challenge

Reading page Keeping Components Pure made many things clear to me that I somehow already knew but could not put into words before. However, in my opinion Challenge 1 Fix a broken clock raises more questions than it tries to answer.

If x = 3, y won’t sometimes be 9 or –1 or 2.5 depending on the time of day or the state of the stock market.

I understand that the Clock component is considered to be pure because the current time is passed as a prop and time.getHours() will always return the same hour based on that prop:

export default function Clock({ time }) {
  let hours = time.getHours();
  // ...
}

The docs make clear that calling new Date() during render would make the component impure. Also I am assuming that all components must be pure, even the root component. So I was asking where and how should new Date() be called to access the current time? The docs say:

[...] in React there are three kinds of inputs that you can read while rendering: props, state, and context.

and

When you need to “change things”, you’ll usually want to do it in an event handler. As a last resort, you can useEffect.

I am able to look into the code of App.js when forking the CodeSandbox:

import { useState, useEffect } from 'react';
import Clock from './Clock.js';

function useTime() {
  const [time, setTime] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return () => clearInterval(id);
  }, []);
  return time;
}

export default function App() {
  const time = useTime();
  return (
    <Clock time={time} />
  );
}

I am assuming that also custom hooks have to be pure. I also understand that calling setTime(new Date()) in a useEffect plays by the rules of purity.

Now, what is not clear to me is, how setting the initial value const [time, setTime] = useState(() => new Date()) ensures that the component is pure? As far as I know this will happen during (first) render. So isn't this a side effect called during render? Is this some kind of exception to the rules?

Note that there is another related issue to this challenge: https://github.com/reactjs/reactjs.org/issues/5136

先从 Keeping Components Pure 页面开始，尤其是“Fix a broken clock”挑战及其中的 useState 示例，然后查看相关 issue #5136。明确说明是否充分区分了 state initializer 与渲染期间的副作用，并更新文档，使初始时间的来源和纯函数规则都清晰明确。