Application structure, optimization issues?

Question

React

Hello !
Guys, a question regarding the style of writing code in react applications using redax, hooks.
There is a page : Home
it renders components in itself :
Sidebar
Content
Sort
I have a specific state whose values ​​are needed by the child Home components. What's the best way to arrange everything? I use useSelector, useDispatch, callbacks. It is better to do all manipulations in Home and propagate props to children, or you can do everything already "on the spot". (handling user actions in a child component and dispatching actions to redux). There was a question about optimization. The Content was rerendering due to user action (as intended) and the Sidebar was doing the same, although the sidebar shouldn't be (I'm assuming it's because of useSelector ). I wrapped the sidebar with react.memo and solved the problem. But wouldn't this use of memo be at a loss to the application?

Answer 1

everything is already produced "in place".

Yes, it needs to be. Otherwise Home, with any change, the store will re-render all children. If you take out the logic from Home, only the component that uses a specific piece of the store will be rendered.
Just don’t get confused later on which components are listening to the store - separate them into components and containers.