I have finally realized that we cannot do this:
const Comp = () => {
const { state, actions, libraries } = useConnect();
// ...
};
export default Comp;
even if we add reproxification to Connect, because we are doing memo in connect and that is an important optimization.
So in the end, the recommendation would be to do this:
const Comp = () => {
const { state, actions, libraries } = useConnect();
// ...
};
export default memo(Comp);
which doesn’t make sense because if we recommend wrapping the component, we can recommend to wrap it in connect and avoid the complexity of reproxification.
const Comp = () => {
const { state, actions, libraries } = useConnect();
// ...
};
export default connect(Comp);
And this hook is something we can do today with basically a line of code.
We could also do the mapState implementation:
const Comp = () => {
const { link } = useConnect(({ state }) => state.router.link);
// ...
};
export default Comp;
but I think it can lead to confusion. For example, this component won’t be reactive to changes of link and it is not trivial to know why:
const Comp = () => {
const { router } = useConnect(({ state }) => state.router);
return <div>{router.link}</div>;
};
export default Comp;
And again, we would have to recommend using memo anyway, so why bother.
Finally, one of the problems that this hook solves is to avoid passing state, actions and libraries as props to a children component, like this:
const CompWrapper = ({ state, someProp, ...restOfTheProps }) => {
// Do something with state and someProps.
// Comp will receive `actions` and `libraries`.
return <Comp {...restOfTheProps} />;
};
export default connect(CompWrapper);
For that to work now, you have to extract also actions and libraries like this:
const CompWrapper = ({
state,
actions,
libraries,
someProp,
...restOfTheProps
}) => {
// Do something with state and someProps.
// Comp won't receive anything but ...restOfTheProps.
return <Comp {...restOfTheProps} />;
};
export default connect(CompWrapper);
We can solve it using the useConnect hook, but we need to prevent connect from injecting the props. My proposal is to add a second argument to connect for options and add an injectProps boolean, like this:
const CompWrapper = ({ someProp, ...restOfTheProps }) => {
const { state } = useConnect();
// Do something with state and someProps.
// Comp won't receive anything but ...restOfTheProps.
https: return <Comp {...restOfTheProps} />;
};
export default connect(CompWrapper, { injectProps: false });
Most of the times this won’t be necessary as this is only an edge case.
