Структура приложения, вопросы оптимизации?

Question

[x333]

Привет !
Ребята, вопрос относительно стиля написания кода в реакт приложениях с использованием редакса, хуков.
Есть страница : Home
она рендерит в себе компоненты :
Sidebar
Content
Sort
У меня есть определенный стейт, значения которого нужны дочерним компонентам Home. Как лучше оформлять все? Использую useSelector, useDispatch, колбэки. Все манипуляции лучше производить в Home и прокидывать пропсами в дочерние или можно все производить уже "на месте". ( обработки действий пользователя в дочернем компоненте и диспатчить действия в редакс ). Стал вопрос об оптимизации. Content делал ререндер из-за действий пользователя ( так и задумано ) и Sidebar делал тоже самое, хотя sidebar не должен ( предполагаю все из-за useSelector ). Обернул sidebar с помощью react.memo и проблему решил. Но не будет ли такое использование memo в убыток приложению?

Answer 1

[Vladimir Lewandowski]

все производить уже "на месте".

Да, надо так. Иначе Home при любом изменении стора будет ререндерить всех детей. Если вынести логику из Home будет ререндерится только компонент, который использует конкретный кусок стора.

Только не запутайтесь потом, какие именно компоненты слушают стор, — разделяйте на компоненты и контейнеры.

Comments

[Vladimir Lewandowski]

Ну и есть понятие «пропс хелл». Передавать кучу пропсов вниз по дереву — плохо. Примерно для этого и существуют сторы типа Редакса.

[x333]

Спасибо за ответ, Владимир.

[Vladimir Lewandowski]

x333, если помогло, отметьте решением.