LEXA_JA

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

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>
         )}
}

Похоже на то, что eslint конфиг подхватился VS Code, но не create-react-app. Если ошибки prettier не появляются в браузере, то скорее всего так и есть. Надо смотреть в сторону Продвинутой конфигурации, конкретно флаг "EXTEND_ESLINT"

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])

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

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

    finally {
      this.abortController  = null
    }
  }

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

Нужно использовать forwardRef или передать ref под другим именем.
Ссылка на документацию

const Input = forwardRef((props, ref) => <input ref={ref} {...props}  />)

const Input = ({  inputRef, ...props }) => <input ref={inputRef} {...props} />

Длина нового массива, созданного map, будет всегда равна длине оригинального массива. Просто в тех случаях, где условие не выполняется, там будет на реактовский элемент, а false. Нужно сделать filter вместо map.

const products = filteredProducts.filter(product => product.category === "Some, category");

const count = products.length;

return (
  <div className="products-list">
    <Title title="Some Title" />
    <div className="products-container">
        <p> {count} </p>
    </div>
    <div className="products-container">
      {products.map(product => (
          <ProductCard 
             key={product.id}
             product = {product}
           />
       ))}
     </div>
</div>
);