0

I'm learning React Hook and useEffect but I might not get the key point of using it correctly.

I have a following scenario:

  1. If a user switches the dropdown, will check if a flag of isAnyChange from the global state if there is any update on the current page.
  2. If there is no change, will go ahead and redirect to next page,
  3. If there is any change, will display a confirm dialog.

Then inside the confirm dialog, will have 2 buttons:

  • 4.1 one asks for saving, checking the validation and redirect,
  • 4.2 one asks for do not save and redirect.

I am including the above logic with using different useEffect, but I am not sure if I am doing the correct way since it looks wired to myself and making things complicated, what'd be the best way to decomposite my functionality then? am I doing the correct design here by using those local state flag to trigger different useEffect? I couldn't think of any better way though...

const pageComponent = props => {
   const [isSelectChange, setIsSelectChange] = useState(false);
   const [canRedirect, setCanRedirect] = useState(false);
   const [isSaveCompleted, setIsSaveCompleted] = useState(false);

   const anyChange = useSelector(state => return state.anyChange;);
   const anyValidError = useSelector(state => return state.anyValidError;);

   // step 1. dropdown change to change local state and trigger useEffect in step 2
   const selectChange = () => {
      setIsSelectChange(true);
   }

   // step 2. state isSelectChange to trigger step 3 howConfirmDialog or useEffect in step 6
   useEffect(() => {
     if (isSelectChange) {
        if (anyChange) { showConfirmDialog(); }
        else { setCanRedirect(); }
        // should I placed it here? but this seems to trigger the same useEffect a second time even though no code is executing 
        // setIsSelectChange(false);
     }

     return () {
        // clean up to reset the flag back to avoid looping here on isSelectChange, is it the right place to do it here?
        setIsSelectChange(false);
     }
   }, [isSelectChange])

   // step 3. dispatch a confirm dialog
   const showConfirmDialog() => {
      dispatch(openConfirmDialog(
        dialog: <ConfirmDialog confirmhdlr={saveAndRedirect} cancelhdlr={cancelAndRedirect} />
      );
   }

   // step 4.1 save and redirect
   const saveAndRedirect = async () => {
      await(savePage());
      // this is to trigger another useEffect monitoring on isSaveCompleted flag
      setIsSaveCompleted(true);
      setCanRedirect(true);
   }
   
   // step 4.2 cancel and redirect
   const cancelAndRedirect = () => {
      setCanRedirect(true);
   }
   
   // step 5. state isSaveCompleted to trigger
   useEffect(() => {
     if (isSaveCompleted && !anyValidError) {
        // this is to trigger another useEffect monitoring on "canRedirect"
        setCanRedirect(true);
        // should I placed it here? but this seems to trigger the same useEffect a second time even though no code is executing 
        // setIsSaveCompleted(false);
     }

     return () {
        // clean up to reset the flag back to avoid looping here on isSaveCompleted flag, is it the right place to do it here?
        setIsSaveCompleted(false);
     }
   }, [isSaveCompleted])

   // step 6. state canRedirect to trigger redirect
   useEffect(() => {
     if (canRedirect) {
       if (isSaveCompleted && !anyValidError) {
          // this is to trigger another useEffect monitoring on "canRedirect"
          setCanRedirect(true);
       }
       // should I placed it here? but this seems to trigger the same useEffect a second time even though no code is executing 
       // setCanRedirect(false);
     }

     return () {
        // clean up to reset the flag back to avoid looping here on canRedirect flag, is it the right place to do it here?
        setCanRedirect(false);
     }
   }, [canRedirect])

   return (<select onChange={selectChange}>)
}

as you see I have different flags to trigger different useEffect, I could do all of them in one function, then why would use useEffect here?

2
  • You don't need to reset the state in your cleanup function - they are called when the component unmounts in which case all state is cleared as well. The return function is used to cancel subscriptions, etc.
    – thedude
    Commented Aug 3, 2020 at 20:12
  • @thedude, thank you! so should I place the reset state inside useEffect execution but outside the return() clean up? Seems like the reset would invoke the useEffect again which I am not sure if I am doing correctly here...
    – Drex
    Commented Aug 3, 2020 at 20:59

1 Answer 1

1

It is not an answer but it should help you to understand hook a bit better. You ve got three useEffects and each of them works every time when ANY state is changed. So your step 1 fires all useEffects below. Use dependencies list like this:

useEffect(()=>{
  ...
}, [isSelectChange]) // this hook fires only when isSelectChange state changes.

useEffect(()=>{
  ...
}, []) // this hook fires only once, when the component ie rendering for the very first time
4
  • Thank you, I know that dependency list is suggested, here I would like to learn more about the mechanism of using useEffect, as you see I have different flag to trigger different useEffect, I could do all of them in one function, then why would use useEffect here?
    – Drex
    Commented Aug 3, 2020 at 16:28
  • The same question - I checked your code once again and could not find that you have different triggers to useEffects. All three of them are with no dependency list that means they will work in the same way - right after any state is changed. The fact you check conditions inside the hook does not set dependencies up.
    – Tarukami
    Commented Aug 3, 2020 at 16:34
  • Hi @Tarukami, I've added my depdency into useEffect, however, regarding to my original confusion, am I doing the correct design here by using those local state flag to trigger different useEffect? I couldn't think of any better way though...
    – Drex
    Commented Aug 3, 2020 at 20:03
  • and if I added my flag into the useEffect as dependency, whenever something changed, all my 3 useEffect would still trigger even though my flag does not get changed...
    – Drex
    Commented Aug 3, 2020 at 21:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.