title: How to toggle the state to false on component unmount using react?
body: <p>i am toggling state of a dialog using context. initially the state isOpen is set to false. when add button is clicked the state isOpen is true and clicking cancel button will set state isOpen to false.</p>
  <p>now when user doesnt click cancel button then the state isOpen is true still even when user navigates to another page.</p>
  <p>below is my code,</p>
  <pre><code>function Main() {
      return(
          &lt;DialogContextProvider&gt;
              &lt;Parent/&gt;
          &lt;/DialogContextProvider&gt;
     );
  }
  
  
  function Parent() {
      return (
          &lt;AddButton/&gt;
      );
  }
  
  
  function AddButton() {
      const { isOpen, toggleDialog } = useDialogs();
      return(
          &lt;Icon 
              onClick={() =&gt; {
                  toggleDialog(true); //isOpen set to true
              }}/&gt;
          {isOpen &amp;&amp;
              &lt;Dialog
                  onCancel={() =&gt; {
                  toggleDialog(false); //isOpen set to false
          }}
      );
  }
  
  
  interface DialogsState {
      isOpen: boolean;
      setOpen: React.Dispatch&lt;React.SetStateAction&lt;boolean&gt;&gt;;
  }
  
  const initialState: DialogsState = {
      isOpen: false,
      setIsOpen: () =&gt; {},
  };
  
  const DialogsContext = React.createContext&lt;DialogsState&gt;(
      initialState
  );
  
  export const DialogsContextProvider: React.FC = ({ children }) =&gt; {
      const [isOpen, setOpen] = React.useState&lt;boolean&gt;(false);
  
      return (
          &lt;DialogsContext.Provider
              value={{isOpen,setOpen}}&gt;
              {children}
          &lt;/DialogsContext.Provider&gt;
      );
  };
  
  export function useDialogs() {
      const {
          isOpen,
          setOpen,
      } = React.useContext(ScheduleDialogsContext);
      const toggleDialog = (toggleValue: boolean) =&gt; {
          setOpen(toggleValue);
      };
  
      return {
          isOpen,
          toggleDialog,
      };
  } 
  </code></pre>
  <p>I am not sure how to set the state isOpen to false when this dialog unmounts meaning when user opens this dialog the isOpen state is true. if user doesnt click cancel on dialog and moves to another page still this isOpen state is true. it should be false in that case.</p>
  <p>how can i fix this. could someone help me with this? thanks.</p>