react 子コンポーネントに渡すprop(optional)がインスタンスを持ってからレンダリングしたい

Question

reactで、親コンポーネントでoptionalな値を子に受け渡しているのを想定します。

問題のコード

const Parent = () => {
  const [data, fetchData] = useState()

  useEffect(()=> {
    if(data === undefined) fetchData(dispatch(...)) // APIなどでデータを取得
  },[data, fetchData])

  render (
    <Child data={data} />
  )
}


const Child = (data) => {
  
  render (
    {console.log(data)}
  )
}

このとき、コンソール上では

undefined
undefined
...
Object
Object
...

みたいに、undefinedの時にもレンダリングが走ってしまいます。この状態を無くしたいのですが、方法はありますでしょうか？

質問の背景

レンダリング最適化が目的ではなく、undefinedの値をChildコンポーネントの中で描画時にインスタンスを持たせていなければエラーが出てしまう問題を解決したいためです。：例 MUI SelectのselectOptionsなど ref: https://github.com/mui-org/material-ui/issues/18494)

Answer 1

Childを描画するか条件分岐させる、のが手っ取り早いかと思います。

  return (
    data ? <Child data={data} /> : null
  )

Comments

[yochun02]

ありがとうございます！