Closed jasonlo87 closed 4 weeks ago
Don't have a specific answer for this one, I'm afraid - they ought to both update. Not sure there's anything I can do without seeing a specific example that reproduces the issue.
(Also, this would really be a React-Redux question, not an RTK question.)
I am confused why there is a connect
call as part of all of this though. You shouldn't need that since you're using the hooks.
Thanks for looking so quickly guys!
I've made some progress on this and found the issue since posting, although I would still like you're input on the behavior if you don't mind :)
Basically I had a bug where I was pushing directly into an array that was frozen by Immer in the Child's mapStateToProps (which I didn't include above, so you guys couldn't have known anyway).
So the question is when I was doing that as the code was setup above, I got no error in the console whatsoever abour pushing into the frozen array The child just didn't re-render.
However, if I selected my currentGroupId state in the Parent instead, and passed it to the child as a Prop, I suddenly got a stacktrace about the frozen array push?
I am confused why there is a
connect
call as part of all of this though. You shouldn't need that since you're using the hooks.
The code's kind of in flux, so there's a mix of both right now. Is that bad practice for some for some reason other than mixing styles?
Yeah, what's happening is that the error is getting thrown in mapState
due to attempting to mutate a frozen array, but per https://github.com/reduxjs/react-redux/issues/1942 , that gets swallowed.
(This is yet another reason to migrate away from connect
ASAP :) )
All that said, I am very curious how your logic ended up trying to mutate an array in mapState
in the first place.
Yeah, what's happening is that the error is getting thrown in
mapState
due to attempting to mutate a frozen array, but per reduxjs/react-redux#1942 , that gets swallowed.(This is yet another reason to migrate away from
connect
ASAP :) )All that said, I am very curious how your logic ended up trying to mutate an array in
mapState
in the first place.
It's just bad programming on my part I guess, and now that I know not to do that I can just fix it. Definitely vote for not swallowing errors in the framework if possible tho, this was a 1 minute fix that took like 2 days to find :(
I can migrate to hooks no issue, but the docs I'd read seemed to suggest that while hooks were newer, connect was in some way better because it did some intelligent batching or something, which is why I hadn't banished it yet
why is the error swallowed in one case and not the other?
Because connect
is a very complex legacy layer with its own logic, whereas useSelector
is basically just React's useSyncExternalStore
hook at this point.
Definitely vote for not swallowing errors in the framework if possible tho
Per the linked issue, it's probably fixable in some way, but making changes to connect
isn't on our priority list at all at this point, and none of us maintainers have put any thought into it. Open to PRs, but the better answer here is definitely to drop connect
and switch to the hooks anyway.
the docs I'd read seemed to suggest that while hooks were newer, connect was in some way better because it did some intelligent batching or something
Definitely not the case, and if anything connect
is worse for performance because it has to do some complex cascading of store updates to nested components during the commit phase.
why is the error swallowed in one case and not the other?
Because
connect
is a very complex legacy layer with its own logic, whereasuseSelector
is basically just React'suseSyncExternalStore
hook at this point.the docs I'd read seemed to suggest that while hooks were newer, connect was in some way better because it did some intelligent batching or something
Definitely not the case, and if anything
connect
is worse for performance because it has to do some complex cascading of store updates to nested components during the commit phase.
Good Info! Ok I'll switch to selectors, thanks for looking
Hello,
I'm probably doing something dumb, but I've been struggling to determine what the problem is here. Essentially I have a Parent component that has a Child component, and when I select the same Redux state in both Parent and Child, only the parent sees updates? When I run and change the state, I see the Parent's "current group outer" log but not the Child's "current group inner" log?
Parent
Child
Package Json: