Feature request: Add a key property to custom hooks to reset state

This issue has been tracked since 2022-09-11.

We know that we can provide key to React custom components, and when we provide a different key to React custom component on next render, the previous instance associated with that custom component will be gone, all state will be reset, etc. In some situations this is even recommended in react docs.

Would similar feature be useful also for custom hooks? To pass it a key as parameter? And if on next render this key is different, then all state of this custom hook will be destroyed.

Pros:

  • Similar to components in some situations it may be desirable to reset state of custom hook. With this feature you can do it automatically, without manually dealing with such situation.

Possible difficulties

  • After giving it some more thought I think it might be tricky how to pass that key to the custom hook. It must go as a parameter, but then users won't be able to use it inside. Also how should the custom hook guess which parameter is the key, etc.
vkurchatkin wrote this answer on 2022-09-12

"Custom hooks" are not something that React can control or is aware of. It is just a plain function that is called normally.
So, if you want to add some sort of key as an argument of your custom hook, you have to handle it yourself:

function myCustomHook({ key }) {
   const [state, setState] = useState(initialState);

  useEffect(() => {
    setState(initialState);
  }, [key]);
}
gmoniava wrote this answer on 2022-09-12

Yeah also like I mentioned after giving some more thought, although this might be useful (because like components hooks maintain state too and I might want to reset it), not sure how this can be done in practice.

More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-10-05
Star Count 195628
Watcher Count 6648
Fork Count 40518
Issue Count 1111

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date