Logic for an image gallery built with React Hooks! 🐱https://codesandbox.io/s/hooks-gallery-4xjzz

gallery.js

import { useState, useReducer, useEffect } from 'react'

export function useGallery(
  collectionUrl,
  initialTag,
  initialPageNumber = 0
) {
  const [pageNumber, updatePageNumber] = useState(
    initialPageNumber,
  )
  const [tag, updateTag] = useState(initialTag)

  const [taggedImages, updateImages] = useReducer(
    (taggedImages, resp) => {
      const pages = (
        taggedImages[resp.tag] || new Array(resp.totalPages)
      ).slice()
      pages[pageNumber] = resp.images

      return {
        ...taggedImages,
        [resp.tag]: pages,
      }
    },
    {},
  )

  const [loading, updateLoading] = useState(true)
  const [error, updateError] = useState()
  
  const shouldLoad =
    !taggedImages[tag] || !taggedImages[tag][pageNumber]

  useEffect(() => {
    if (shouldLoad) {
      updateLoading(true)
      fetch(`${collectionUrl}?tag=${tag}&page=${pageNumber}`)
        .then(resp => resp.json())
        .then((data: any) => {
          updateLoading(false)
          updateImages(data)
        })
        .catch(e => {
          updateLoading(false)
          updateError(e.toString())
        })
    } else {
      updateLoading(false)
    }
  }, [shouldLoad, collectionUrl, tag, pageNumber])

  const pages = taggedImages[tag]
  const images = pages && pages[pageNumber] ? pages[pageNumber] : []

  return {
    images,
    totalPages: pages ? pages.length : 0,
    loading,
    error,
    updatePageNumber,
    updateTag: (tag, pageNumber = 0) => {
      updatePageNumber(pageNumber)
      updateTag(tag)
    },
    tag,
    pageNumber,
  }
}

gallery.ts

import { useState, useReducer, useEffect } from 'react'

export type Image = {
  url: string
  title: string
}

export type ImageResponse = {
  tag: string
  images: Image[]
  totalPages: number
}

type TaggedImages = Record<string, Image[][]>

export function useGallery(
  collectionUrl: string,
  initialTag: string,
  initialPageNumber: number = 0
) {
  const [pageNumber, updatePageNumber] = useState<number>(
    initialPageNumber,
  )
  const [tag, updateTag] = useState<string>(initialTag)

  const [taggedImages, updateImages] = useReducer(
    (taggedImages: TaggedImages, resp: ImageResponse) => {
      const pages = (
        taggedImages[resp.tag] || new Array(resp.totalPages)
      ).slice()
      pages[pageNumber] = resp.images

      return {
        ...taggedImages,
        [resp.tag]: pages,
      }
    },
    {} as TaggedImages,
  )

  const [loading, updateLoading] = useState<boolean>(true)
  const [error, updateError] = useState<string>()
  
  const shouldLoad =
    !taggedImages[tag] || !taggedImages[tag][pageNumber]

  useEffect(() => {
    if (shouldLoad) {
      updateLoading(true)
      fetch(`${collectionUrl}?tag=${tag}&page=${pageNumber}`)
        .then(resp => resp.json())
        .then((data: any) => {
          updateLoading(false)
          updateImages(data as ImageResponse)
        })
        .catch(e => {
          updateLoading(false)
          updateError(e.toString())
        })
    } else {
      updateLoading(false)
    }
  }, [shouldLoad, collectionUrl, tag, pageNumber])

  const pages = taggedImages[tag]
  const images = pages && pages[pageNumber] ? pages[pageNumber] : []

  return {
    images,
    totalPages: pages ? pages.length : 0,
    loading,
    error,
    updatePageNumber,
    updateTag: (tag: string, pageNumber: number = 0) => {
      updatePageNumber(pageNumber)
      updateTag(tag)
    },
    tag,
    pageNumber,
  }
}