const HogeComponent = () => {

const HogeComponent = () => {
  const AComponents = useMemo((): React.ReactNode[] => {
    return ['a', 'b', 'c'].map(v => <p>{v}</p>);
  }, [])
 
  const BComponents = useMemo((): React.ReactNode[] => {
    return ['1', '2', '3'].map(v => <p>{v}</p>);
  }, [])
 
  const renderComponents = useMemo((): React.ReactNode[] => {
    return [...AComponents, ...BComponents];
  }, [AComponents, BComponents])
 
  return (
  <div>
    {renderComponents.map(child => {
      return (
      <div>
        {child}
      </div>)
    })}
  </div>
  )
}