With the availability of the Redux hooks, there is no longer a need to send state property values as component props using connect. You can forego the connect() HOC and access the state properties directly in the component via the useSelector() hook.
useSelector() creates a new subscription to the redux store. The component using the useSelector() hook will only be re-rendered if the subscribed value changes.
I usually use useSelector() in the container components. The UI renders are all delegated to pure functional components that can be optimized using React.memo(). For example:
export const Greeting = React.memo(({ label }) => <p>{label}</p>);const TodoListContainer = () => {
const todos = useSelector(state => state.todos);
const label = "Hello";
return <Greeting label={label} />
}
Here even while the container is re-rendered via a change in the selector state, Greeting component is still memoized and will not be recomputed unnecessarily. Hope this helps.