Alexandroppolus

Когда печатаешь в первом инпуте, меняется item.from. А он у тебя используется как key для CTableRow. При изменении ключа компонент не обновляется, а перемонтируется (т.е. сносится полностью и создается заново). Возможно, ты хотел для key использовать item.id? тогда было бы норм.

ты на каждой итерации forEach добавляешь doc.data() к пустому массиву data.

const [data, setData] = useState([]);
const takeData = async () => {
    const UID = getAuth().currentUser.uid;
    const db = getFirestore();
    const q = query(collection(db, "users", UID, "statistic"));

    const querySnapshot = await getDocs(q);
    setData(querySnapshot.map((doc) => doc.data()));
  };
  useEffect(() => {
    takeData();
  }, []);

Этот материал читал.

вроде должно подойти (см. там вариант с useMemo)

только у тебя параметр для мемоизации - не примитивное значение, а объект (position, он же dish). Потому укажи кастомный serializer, который просто возвращает position.id.

в целом способ прикольный, но надо помнить, что в отрендеренном родительском компоненте (в твоем примере - Category) мемоизация будет жить постоянно до размонтирования. И если будут часто меняться ключи, а компонент будет жить очень долго, то в кэше накопится много элементов. На этот случай в опциях fast-memoize можно задать свой кастомный кэш с ограничением на размер и удалением старых элементов. Впрочем, полагаю, в твоем случае до такого не дойдет.

ты можешь использовать 2 рефа: для дом-элемента и для твоего объекта

Но как показалось, React.memo можно было избежать.

зачем? здесь оно в самый раз.

а вообще у тебя какая-то хрень в нейминге. По идее, компонент Position должен быть для каждого элемента массива positions. А то что у тебя называется Position, должно называться Dish, и тоже быть memo
т.е. так:

{positions.map(({ id, name, ref, dishes }) => <Position ... />)}

export const Position = memo(({ ...,  dishes, ... }) => {
.........
   {dishes.map((item) => <Dish ... />}
.....
});

тогда при изменении чего-то, например, внутри блюда, будет перерендер компонента со списком позиций, перерендер одной позиции с блюдом, и перерендер блюда.
Это минимум для иммутабельного стейта. Если хочешь совсем упороться и выкинуть перерендер списка, то mobx в помощь.

Само приложение маленькое, организовывать хранение стейта с помощью условного redux не вижу смысла

ну тогда просто храни в контексте

Варианты:
1) выкинуть на мороз первый useEffect. При смене activeTab (это ведь происходит по клику на каком-то элементе?) заодно делать setPage(1).
2) дублировать в useRef текущие значения стейта, обновлять во втором эффекте, и не вызывать загрузку при определенной комбинации. Немного костыльный вариант, советую всё таки первый.

useEffect(() => {

    socket.current = new WebSocket(`ws://localhost:8000/message`)

    socket.current.onopen = () => {
      console.log('connected')
    };
    
    socket.current.onmessage = (event) => {
      const message = JSON.parse(event.data);
      setMessages((messages) => [...messages, message]);
    };

    socket.current.onclose = () => {
      console.log('socket was closed')
    };

    socket.current.onerror = () => {
      console.log('socket get some error')
    };

    return () => {
        socket.current.close();
    };
  }, [])

Рискну предположить, что Table - это и есть Component1.

Ты передаешь в Component1 проп children, но в самом компоненте этот проп, к сожалению, не используется.

надобно:

function Component1({children}) {
  return (
<StyledComponent1>
      <p>Wrapper</p>
      {children}
</StyledComponent1>
  );
}

куда именно воткнуть children внутри Component1 - это уж сам решай, но куда-то придётся.

в Component2 и Component3 тоже следует сделать так. Ну и читать доку, пока голова не отвалится.

reply.replies = [newReply,...reply.replies]
setReplies(rootReplies=>[...rootReplies])

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

есть 3 варианта:
1) Продолжать использовать дерево в useState. Но менять его надо иммутабельно. То есть если у какого-то узла что-то поменялось, то надо заменить узел и все его паренты, а не только корневой массив.
2) Нормализовать данные в плоскую структуру. Каждому реплаю присваивается уникальный id, все реплаи складываются в объект, где ключем будет id. В массиве replies у каждого объекта будут лежать не сами объекты, а только id, и потом надо будет их соединять во время рендера. Этот вариант канонично используется для redux, но как зайдет для useState, навскидку не совсем понятно.
3) Использовать MobX с этими его observable.deep (или просто observable). Как всегда, самый простой и удобный вариант.