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

Bắt đầu với trang Keeping Components Pure, đặc biệt là thử thách “Fix a broken clock” và ví dụ useState trong đó, sau đó xem xét issue liên quan #5136. Làm rõ liệu phần giải thích có phân biệt đầy đủ giữa trình khởi tạo state và side effect trong quá trình render hay không, đồng thời cập nhật tài liệu để nguồn của thời gian ban đầu và quy tắc về tính thuần khiết không còn mơ hồ.