lostpebble / pullstate

Simple state stores using immer and React hooks - re-use parts of your state by pulling it anywhere you like!
https://lostpebble.github.io/pullstate
MIT License
1.08k stars 23 forks source link

[Question] Best Practices with CustomHooks, GlobalState, etc.. #103

Closed hohenp closed 3 years ago

hohenp commented 3 years ago

Hi @lostpebble

Sorry, for all my question :(, but with hooks and pullstate another world of options has opened :) Here another question, I am not sure about the better "architecture". Would you prefer using useStoreState within react components or within custom hooks or does it not realy makes a difference?

I am using a lot of custom hooks that load data and store them within a store using pullstate. And the hook provides the updated data using usestate of pullstate as well. So the idea is, that I only have to reference my custom hook to have access to the "loadData" method and to the data. I think that is the basic idea of hooks, as long as they are maintaining their own state. Now with pullstate I could easy access the data directly within the component and would not need the custom hook any more...

Example with a simple hook.

export const useMeetingsHook = () => {
     const meetingRepository = useMeetingRepository();
     const { contextObject } = useContextHook();

     const meetings = StartStore.useState((s) => s.meetings);

     useEffect(() => {
          if (contextObject) {
               loadMeetings();
          }
     }, [contextObject]);

     const loadMeetings = async () => {
          const meetings: IMeeting[] = await meetingRepository.getMeetings();
          StartStore.update((s) => {
               s.meetings = meetings;
          });
     };

     return { meetings, loadMeetings };
};

So the "meetings" is provided by that custom hook.

What I am now thinking about is, that as far as I know, every useState triggeres a rerender of the component that uses my customhook. So when i have hooks, that use customhooks again, couldn't that cause a big rerendering?

So in that example, when within the "useContextHook" another useState is executed, then the useContextHook is rerendered and so my "useMeetingsHook" is rerendered and every component using the useMeetingHook is rerendered, correct?

lostpebble commented 3 years ago

Hi @hohenp ,

I'll take a look at this soon- just swamped with work at the moment.

Btw, can we please move all "question" type of stuff outside of issues- they belong more in "discussions", as they're not really issues with the library itself, but rather there are many different ways of implementing things which can be discussed.

I'd prefer "issues" to be as much about actual issues with Pullstate as possible.

Would you prefer using useStoreState within react components or within custom hooks or does it not realy makes a difference?

Just quick from reading - this will make no difference, its totally up to you and how you want to implement it.

EDIT 2: I see you're doing Async Actions here- maybe you might want to look at Pullstate's Async Actions to help with this scenario? It can also set values in the store after the action has run. I'll try and help you implement it when I have time.

hohenp commented 3 years ago

Hi @lostpebble , definitly move to discussion board. Created it there, but I think you have ansered it already, when you say it doesn't care if you have the pullstate useSate within components or custom hooks, from a performance perspective. Thanks again!