React でウィンドウサイズが小さいときだけスライドショー表示をする方法

/**
 * ImageGallery
 */

import React, { useState, useEffect } from "react"
import Slider from "react-slick"
import "slick-carousel/slick/slick.css"
import "slick-carousel/slick/slick-theme.css"

// 画面幅がこの値に満たないときはスライドショー表示する
WIDTH_THRESHOLD = 768

const ImageGallery = ({ images }) => {
  const [width, setWidth] = useState(null)
  const updateWidth = (event) => {
    setWidth(window.innerWidth)
  }

  useEffect(() => {
    window.addEventListener(`resize`, updateWidth, {
      capture: false,
      passive: true,
    })

    return () => window.removeEventListener(`resize`, updateWidth)
  })

  // 初期表示時に画面幅に合わないコンポーネントが一瞬表示されてしまうのを防ぐ
  if (width === null) {
    return ``
  }

  if (width < WIDTH_THRESHOLD) {
    // 画像をスライドショー表示する
    return (
      <Slider>
        {images.map((image) => (
          <div key={image.src}>
            <img src={image.src} alt={image.alt} />
          </div>
        ))}
      </Slider>
    )
  }

  // 画像をそのまま並べる
  return (
    ...
  )
}