【Next.js】共通化しているheaderでsetStateを使うとエラーがでる

エラー文

Warning: Cannot update a component (Header) while rendering a different component (Home). To locate the bad setState() call inside Home, follow the stack trace as described in

以下翻訳
store.ts:20 Warning： 別のコンポーネント（Home）をレンダリング中にコンポーネント（Header）を更新できません。Home`内の不正なsetState()コールを特定するには、スタックトレースを以下のようにたどります。

結論と理由

useEffectで囲むだけでよい

useEffect(() => {
  setInView(inView);
}, [setInView, inView]);

Reactのレンダリングサイクルの制御: useEffect 内での状態更新は、Reactのレンダリングサイクルの制御を助けます。useEffect のコールバックは、Reactがコンポーネントのレンダリングを完了してから実行されるため、状態更新が適切なタイミングで行われます
なのでレンダリング中ではなくなるためエラーが解消されます。