Application state and UI components?

Question

React

Hello!
I'm learning React, writing a kind of online store. And there were a couple of questions about the state of the application.
I figured out the context and reducer hooks, used them to create and store states, and created my own state for different moments: the state of filters, the state of all UI components, the state where the data received from the backend is stored. Convenient and simple.
Now I decided to deal with redux, and then with mobx. And I came across the fact that everywhere they use only one state for the entire application. Google did not give an answer, how is it still optimal: to interfere with everything in one large state or break it into smaller ones. What confuses me is the fact that changing a basic UI element, such as a preview style (grid or list), will update the entire state, which in turn will start redrawing all the components on the page.
Perhaps I am fundamentally mistaken, then I will be grateful if you tell me a better structure.

Answer 1

You are fundamentally wrong. There will be a change in the whole state, yes. But redrawing all components is not. In redux, subscription selectors are not called if their state piece has not changed. And for more control, there are memoized selectors. Check it out for yourself - google how to enable flash on painting in chrome.