MAL's Logo

Continuous flow

💡 In bigger applications, parts are oftentimes not directly related, but need to communicate with each other somehow - instead of reaching out for Redux or useContext, we can return it as a promise.

Code

// hook.tsx
export const useActivateStatus = () => {
  return React.useCallback(
	  async (isTrue: boolean): Promise<{ continueFlow: boolean }> => 
		  new Promise((resolve) => {
		    if (isTrue) {
		      return resolve({ continueFlow: true });
		    }
		    return resolve({ continueFlow: false });
	   }), []);
}

// app.tsx
const activate = useActivateStatus(); // step i.

React.useEffect(() => {
    const handleLogic = async () => {
      const status = await activate(true);
      if (status.continueFlow) {
        // do something here - step ii.
      }
      // else do something else
    };
    handleLogic();
}, [activate]);
MAL's Logo© 2021 – 2026 MAL. All rights reserved.