I have a React application with three main components: a List Page, a Create/Edit Page, and a Contextual Save Bar. Everything is working as expected, except for one issue with the save bar. The problem occurs when I save data on the Create/Edit page. The data is successfully saved, and I am redirected to the List page. However, the Contextual Save Bar remains visible at the top of the List page, even though it should only appear on the Create/Edit screen. If I remove the redirect to the List page after saving, the save bar closes properly. But when the redirect is in place, the save bar gets "stuck." Here are some details about my setup: updateSuccess being true means that the data has been successfully created or updated. I expect the save bar to close when the updateSuccess state is true and to only show on the Create/Edit page. How can I fix this issue so that the Contextual Save Bar closes properly when the data is saved and does not persist after the redirect to the List page? import React from 'react'; import { useAppSelector } from 'app/config/store'; import { useNavigate } from 'react-router-dom'; import { Page } from '@shopify/polaris'; const DataList = () => { const navigate = useNavigate(); const { totalItems, loading, entities, updateSuccess, updating } = useAppSelector(state => state?.dataRule); return ( <Page title="My data" subtitle="" compactTitle fullWidth={false} primaryAction={{ content: 'Create', onAction: () => navigate('/new'), }} > List Of Data </Page> ); }; export default DataList; import React, { useEffect, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { useAppDispatch, useAppSelector } from 'app/config/store'; import { Controller, SubmitHandler, useForm } from 'react-hook-form'; import { FormLayout, Page, TextField } from '@shopify/polaris'; import { createEntity, getEntity, reset as resetEntity, updateEntity } from 'app/entities/bargain-rule/bargain-rule.reducer'; import { defaultValue, IBargainRule } from 'app/shared/model/bargain-rule.model'; import ContextualSaveBar from 'app/MerchantPortal/Components/CustomPolarisComponents/ContextualSaveBar'; import useIsShopifyAdmin from 'app/MerchantPortal/hooks/useIsShopifyAdmin'; import FormUiLoader from 'app/MerchantPortal/Components/Loaders/FormUiLoader'; const CreateData = () => { const params = useParams(); const navigate = useNavigate(); const dispatch = useAppDispatch(); const { entity, loading, updating, updateSuccess } = useAppSelector(state => state.dataRule); const [isNew] = useState(!params?.id); const { isShopifyAdmin } = useIsShopifyAdmin(); const { control, handleSubmit, clearErrors, trigger, reset, watch, setValue, formState: { isDirty }, } = useForm<IBargainRule>({ defaultValues: defaultValue, mode: 'onBlur', }); const values: IBargainRule = watch(); useEffect(() => { reset({}, { keepValues: false }); dispatch(resetEntity()); if (!isNew) { dispatch(getEntity(params?.id)); } }, [isNew]); useEffect(() => { if (!isNew && entity?.id) { reset(entity); } }, [entity]); const onSubmit: SubmitHandler<any> = values => { if (isNew) { dispatch(createEntity(values)); } else { dispatch(updateEntity(values)); } }; useEffect(() => { if(updateSuccess === true){ navigate('/list'); } }, [updateSuccess]); return ( <Page compactTitle title={isNew ? 'Create Data' : 'Update Data'} primaryAction={ isShopifyAdmin ? undefined : { content: isNew ? 'Create' : 'Update', onAction: handleSubmit(onSubmit), loading: updating, disabled: updating || loading, } } > {loading ? ( <FormUiLoader number={4} lines={6} /> ) : ( <form onSubmit={handleSubmit(onSubmit)}> <FormLayout> <Controller name="name" control={control} rules={{ required: 'Bargain name is required!' }} render={({ field, fieldState }) => ( <TextField label="Name" {...field} placeholder="Summer" autoComplete="off" clearButton onClearButtonClick={() => setValue(field?.name, '')} error={fieldState.error?.message} /> )} /> </FormLayout> </form> )} <ContextualSaveBar isDirty={isDirty} handleSave={handleSubmit(onSubmit)} loading={loading} updating={updating} updateSuccess={updateSuccess} handleDiscard={() => reset(entity)} /> </Page> ); }; export default CreateData; import React, { useEffect, useState } from 'react'; import { SaveBar } from '@shopify/app-bridge-react'; import useIsShopifyAdmin from 'app/MerchantPortal/hooks/useIsShopifyAdmin'; interface ContextualSaveBarProps { isDirty: boolean; loading?: boolean; updating?: boolean; updateSuccess?: boolean; handleSave: () => void; handleDiscard: () => void; } const ContextualSaveBar: React.FC<ContextualSaveBarProps> = ({ isDirty, loading, updating, updateSuccess, handleSave, handleDiscard }) => { const { isShopifyAdmin } = useIsShopifyAdmin(); const [isShowSaveBar, setIsShowSaveBar] = useState(false); useEffect(() => { setIsShowSaveBar(isDirty); }, [isDirty]); useEffect(() => { if(updateSuccess === true) { setIsShowSaveBar(false); } }, [updateSuccess]); const handleDiscardAction = () => { handleDiscard(); setIsShowSaveBar(false); }; if (!isShopifyAdmin) return null; return ( <SaveBar id="contextual-save-bar" open={isShowSaveBar}> <button variant="primary" onClick={handleSave} loading={updating ? '' : false} disabled={loading || updating}> Save </button> <button onClick={handleDiscardAction} disabled={loading || updating}> Discard </button> </SaveBar> ); }; export default ContextualSaveBar;