【Next.js】React 18 → 19 へ移行しました [Techblog#53]

import React, { cloneElement, useMemo, useRef } from 'react'
type TransitionGroupProps = {  children: React.ReactElement<{ in?: boolean; onExited?: () => any }>[]  component?: React.ElementType | null}
export const TransitionGroup = ({  children,  component = 'div',  ...props}: TransitionGroupProps) => {  const oldChildren = useRef<React.ReactElement<{ in?: boolean; onExited?: () => any }>[]>([])
  const __component = useMemo(() => {    // 更新された children の key を取得    const newKeys = children.map((child) => child.key)
    // 更新された要素を元に、in を true にして返す    const el = children.map((child) => {      return cloneElement(child, {        in: true,        onExited: () => {},        ...props,      })    })
    // 更新された要素の中に oldChildren に存在しないものがあれば、in を false にして返す    oldChildren.current.forEach((child, idx) => {      if (!newKeys.includes(child.key)) {        // idx が 0 の場合は先頭に追加し、それ以外は直前の id の次に追加        const index = (() => {          if (idx === 0) return 0          const __index = el.findIndex((e) => e.key === oldChildren.current[idx - 1].key)
          return __index === -1 ? el.length : __index + 1        })()
        el.splice(          index,          0,          cloneElement(oldChildren.current[idx], { in: false, onExited: () => {}, ...props }),        )      }    })
    // oldChildren を更新    oldChildren.current = children
    // component が存在する場合は、component で囲む    if (component) return React.createElement(component, {}, el)
    return el  }, [children])
  return __component}