React 18 concurrent instantiation and disposal

Hi there!

I have been reflecting on what React 18 concurrent mode means for instantiation and disposal of objects returning state.

So something you could do before React 18 and StrictMode was:

const SomeComponent = () => {
  const ref = useRef()

  if (!ref.current) {
    ref.current = new SomeStateToAccessInComponentRender()
  }

  useEffect(() => {
    return () => ref.current.dispose()
  }, [])
}

But as I understand, with React 18 (spearheaded by StrictMode) you can not really rely on creating instances during "rendering" cause React might call the function body multiple times ,and even abandon it, before mounting and running any effects.

I understand that pure components are necessary for concurrent mode and to me it makes a lot of sense that React is becoming this pure state synchronisation using subscriptions type of implementation. But what does not make sense to me is that there is no way to "create something" when React has the intention of mounting a component and "dispose that something" when React is abandoning the component due to concurrent mode or unmounting it.

I wish there was some explicit documentation/statement that explains you can not rely on React 18 to control the instantiation and disposal of objects and more importantly some guides to how you should actually deal with it.

Which brings me to... have I gotten it wrong? Is there a way to safely do this? And if not, do we now rely on external state stores to determine when to instantiate/dispose of objects?

ファイルやテストは指定されていません。まず issue の React 18、concurrent-rendering、StrictMode に関する例から始め、続いて render-time instantiation、effects、disposal について既存のドキュメントを確認してください。完了条件は、このパターンが安全かどうか、およびオブジェクトをどのように作成して破棄すべきかについて、明示的なガイダンスを追加することです。