Right, yes thank you, I can push the problem up and reset with a key.
But you know, sometimes it’s not the only state, and it would be nice to solve the problem internally in the component rather than lift the problem up, but yes, great idea, thanks
Okay @wolverineks
, here's a derived but concrete example:
Let's say you've got a component that lists the members of a team, and you can switch the teams and view the different members in the members-list.
In that list, each team member has a small UI state, to determine if the details view is showing, this doesn't seem appropriate to add to the team-member itself, because that object is provided from elsewhere (global/domain state), and it is really just a UI concern.
In the list of members, there is also a toggle with the option to "Hide Inactive Members", so you may not want to use the "reset with a key" method when the team changes, because you'd lose the "Hide Inactive Members" state.
So in the example above, you can look at the custom hook use-open-state.js and see that what I am doing is using useEffect to re-set the state for "what's open" whenever the list changes.
There are lot's of ways to solve this particular problem, keep a member mapping in state no matter what team shows, some crazy memoization, moving the "hide inactive members" state out of the members list (and use key to reset instead)... lot's of ways, it's not an insurmountable problem.
But my point was, I often find myself wishing useState() (or useReducer()) would take an inputs/deps argument like useEffect/useMemo/useCallback, so I could just reset my initial state based on a prop.
My name is Kent C. Dodds and I'm a Remix Co-Founder, JavaScript engineer, and teacher. I'm also active in the open source community. I like my family, JavaScript, and React.
Well, personally I think useState() having a method of reseting state would be the 'simplest' solution...
useState(list.map(addExtraProp),[list]);
...but yes, I could lift the state out of the MembersList, and convert it to a fully controlled stateless component, and just reset the state in the handler for the Team's dropdown onChange. Definitely another good way to solve the problem.
I guess maybe I am the only one who ever felt like they wanted a way to reset the state in useState() or useReducer()
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
If you want to reset all the state, you can assign that prop the key of the component, and it will rebuild that component in it's original state
Right, yes thank you, I can push the problem up and reset with a key.
But you know, sometimes it’s not the only state, and it would be nice to solve the problem internally in the component rather than lift the problem up, but yes, great idea, thanks
Hmmm, interesting. My brain's not going to let this one go... Could you provide a concrete example? and I'll let you know what I come up with.
Okay @wolverineks , here's a derived but concrete example:
Let's say you've got a component that lists the members of a team, and you can switch the teams and view the different members in the members-list.
In that list, each team member has a small UI state, to determine if the details view is showing, this doesn't seem appropriate to add to the team-member itself, because that object is provided from elsewhere (global/domain state), and it is really just a UI concern.
In the list of members, there is also a toggle with the option to "Hide Inactive Members", so you may not want to use the "reset with a key" method when the team changes, because you'd lose the "Hide Inactive Members" state.
So in the example above, you can look at the custom hook
use-open-state.jsand see that what I am doing is usinguseEffectto re-set the state for "what's open" whenever the list changes.There are lot's of ways to solve this particular problem, keep a member mapping in state no matter what team shows, some crazy memoization, moving the "hide inactive members" state out of the members list (and use
keyto reset instead)... lot's of ways, it's not an insurmountable problem.But my point was, I often find myself wishing
useState()(oruseReducer()) would take an inputs/deps argument likeuseEffect/useMemo/useCallback, so I could just reset my initial state based on a prop.Something like...
I think that would be swell.
I think the simplest solution to this problem is to Lift State Up no?
Well, personally I think
useState()having a method of reseting state would be the 'simplest' solution......but yes, I could lift the state out of the
MembersList, and convert it to a fully controlled stateless component, and just reset the state in the handler for theTeam's dropdownonChange. Definitely another good way to solve the problem.I guess maybe I am the only one who ever felt like they wanted a way to reset the state in
useState()oruseReducer()