Kataev

Вот с кодом - другое дело. Сделать, чтобы не дергалось можно. height: auto;- не анимируется.

https://codepen.io/raubaca/pen/PZzpVe вот один из множества примеров, как это можно сделать.

Пусть это будет как не идеальный пример с пространством для творчества и развития https://codepen.io/KataevAS/pen/zYXpdoV

Пометить компонент и все места применения экспортируемого хука, как use client.

forEach заменить на map

Чтобы не делать лишних запросов к бд, можно прийти к соглашению в названии разделов (если это возможно в рамках проекта) и паттерна URL для товаров, например:
/shop/section1/section2/section3/product-productName
В таком случае достаточно проверить на соответствие паттерну продукта последний элемент массива, если он не соответствует, то это раздел, если соответствует, то товар. Но не одно из названий разделов, не должно иметь в себе оговорённый паттерн.

Предпочтительнее первый вариант.
Почему: https://github.com/facebook/create-react-app/pull/8177

https://learn.javascript.ru/bubbling-and-capturing

https://codepen.io/Mr_Sti4/pen/QWOOgxV

export default function Input(value: any, onChange: any) {

export default function Input({ value: any, onChange: any }) {

Мемоизировать компоненты формы с помощью React.memo. Тогда они будут ререндериться только если изменятся именно их пропсы.
https://ru.reactjs.org/docs/react-api.html#reactmemo

Если делать с тем что есть:
https://codepen.io/Mr_Sti4/pen/QWjorqN

https://learn.javascript.ru/localstorage
Направляю: есть такой объект Date. Пользователь пушит в localstorage такой объект с заданной датой (через указанное количество дней), при загрузке страницы создаётся новый объект Date с текущей датой и сверяется с той, что в localstorage.

https://learn.javascript.ru/custom-elements

https://codepen.io/Mr_Sti4/pen/qBOLajG

https://ru.reactjs.org/docs/forms.html
а для ошибки
https://stackoverflow.com/questions/44786669/warni...

Нет.

Ты в функцию передаешь класс, а не id
class="hide"

плюс у тебя ошибка в названии атрибута
ionclick="showHide('hide')"

не ionclick, а onclick

Ограничь размеры родительского блока слайдера и задай в css свойство overflow: hidden;

.child:last-child {
    margin-left: auto;
    background: lime;
  }