Print a warning when a prop is shadowed?
janis-kra opened this issue · comments
When a component consumes state via withState('foo')(MyComp) and the component also gets the same prop passed from its parent component via foo={bar}, the prop from the parent shadows the state from fleux.
I don't know if this is intentional or not, but fleux should at least print a warning that this is happening. Also, what happens if I call setFoo in such a scenario? Props are readonly after all 🤔
The question is: What behavior do developers expect in such a case?
On the one hand I feel like the parent has a legitimate claim to authority when it comes to injecting props into their children. This corresponds to the current behavior.
On the other hand, if a parent wants to pass down the conflicting keys as props, why is it using the stateful component in the first place? It could just not call withState but instead use the unsugared component (which needs to be exported for that to work).
In any case though: This kind of overwriting props with dramatically different behavior - while it might be useful - is very hard to distinguish from a programmer mistake. It should IMO not be possible, to implicitly do this.
My proposed solution would be, to have fleux throw an error if that happens (maybe only for NODE_ENV=development). Silently overwriting a key is just covering up a potential error.
In the future, we might come up with a more explicit solution to overwrite keys.
Also, what happens if I call setFoo in such a scenario?
The setter uses the store and does not write to the prop itself.