Destroy state on component destroy

[kopach]

Which @ngneat/elf-* package(s) are relevant/releated to the feature request?

No response

Description

I currently use Elf lib with React. Elf is really powerful yet simple lib. What I really like, is that it allows creating multiple independent stores (even store per component if needed). I sometimes create such a repo/store per component to handle component-level data there. It really works great, but what is not obvious is that store, created specifically for component and being used only inside 1 component isn't “destroyed” automatically once component gets destroyed. So we need to make sure to manually “reset” store on component destroy. This “reset” mechanism has to be implemented in both repository/store and component to work.

This really adds pain when switching from (or got use to work with) regular React's useState hook, which does destroy any state on component destroy automatically

Proposed solution

Create extra helper functions which could destroy/reset store once main component is destroyed. E.g., in context of React, we could have some HOC e.g. withStore which would "listen" on for component to be unmounted/destroyed and would also destroy associated store. Additional run time check could be performed to prevent multiple usage of withStore for same instance of store per multiple components.

Alternatives considered

Maybe some linter could also work. E.g. set of some eslint rules which would notify once store is used per component but there is no "reset" mechanism called on component destroy.

Still, even with this approach, there is currently no way to "reset" store to it's initial state with 1 command. So, this should be added anyway, I think

Do you want to create a pull request?

No

[NetanelBasal]

Hi, that's nice to hear.

You have a store.reset() method. In regards to the hook, it really depends on how you choose to use Elf, but I think it's as easy as:

function useRepo(Repo)  {
  const instance = useMemo(() => new Repo(), []);

  useEffect(() => () => repo.destroy(), []);

  return instance;
}