useEffect - это хук, который позволяет использовать сайд эффект. В классах его аналогом было использование componentDidMount, componentDidUpdate и componentWillUnmount. В нем можно делать подписки, отправлять запросы управлять анимацией и т. д.

const [data, setData] = useState(null);

useEffect(() => {
  const controller = new AbortController()
  fetchData(controller.signal).then(setData)

  return () => controller.abort()
}, [fetchData, setData])

useCallback и useMemo предназначены для оптимизации. useCallback получает на функцию и массив аргументов, и возвращает одну и туже функцию, до тех пор, пока аргументы не изменились. useMemo отличается тем, что он возвращает не саму функцию, а результат её выполнения. По большому счету они являются взаимозаменямыми.
Таким образом, useMemo используется для сохранения результатов тяжёлых вычислений, например обработка массива.

const data = useMemo(() => array.map(mapper).filter(predicate).reduce(reducer), [array])

А useCallback используется, когда важна постоянность ссылок на функцию. Например, когда мы передаём ссылку в компонент, который использует React.PureComponent или React.memo, или, когда функция используется в качестве аргумента в других хуках

const handler = useCallback(() => {
  // что-то сделать 
}, [])

useEffect(() => {
  handler(value)
  // если не использовать useCallback, эффект будет срабатывать постоянно 
}, [handler, value])

Как-то так

Нужно поднять состояние в родителя:

this.state = {
    openedServiceFormIndex: -1,
  };

  clickServiceCard(index) {
    this.setState(
      prevState => {
        if (index === prevState.openedServiceFormIndex) {
          return {
            openedServiceFormIndex: -1,
          }
        } else {
          return {
            openedServiceFormIndex: index,
          }
        }
      }
    );
  }

  render() {
  <div className="service-list">
          {serviceCards.map((card, index) => {
            return (
              <React.Fragment key={"service-card" + index}>
                <ServiceCard
                  opened={index === this.state.openedServiceCardIndex}
                  clickServiceCard={() => this.clickServiceCard(index)}
                  extraClass="service-list__card"
                />
              </React.Fragment>
            );
          })}
</div>
  }

И убрать из карточки

render() {
  return (
           <div className={cn("service-card", { "--opened": this.props.opened})}>
                <button 
                     className="service-card__btn" 
                     onClick={this.props.clickServiceCard}
                >
                   Кнопка
               </button>
           </div>
         )}
}

Как один из вариантов, можно добавить это в класс.

Request0() {
    // this.abort()
    // можно делать это тут, если запрос должен быть только один, а можно в useEffect
    this.abortController = new AbortController()
    
    // fetch

    finally {
      this.abortController  = null
    }
  }

  abort() {
    if (this.abortController) {
      this.abortController.abort();
      this.abortController = null
    }
  }