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.
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()