title: componentWillUnmount works after switching to another page
body: <p>I have two pages and two components LibraryPageFilters.tsx (url: /courses) and UserVideoCreatePage.tsx (url: /ugc/courses/${course.id}).
  In component LibraryPageFilters.tsx</p>
  <pre><code>useEffect(() =&gt; {
      console.log(course.id)
      if (course.id) {
        console.log(544)
        dispatch(push(`/ugc/courses/${course.id}`));
      }
    }, [course]);
  </code></pre>
  <p>i have a check that if course.id present in the store, then we make a redirect.
  In component UserVideoCreatePage.tsx</p>
  <pre><code>  useEffect(() =&gt; {
      return () =&gt; {
        console.log(333344444)
        dispatch(courseDelete());
      };
    }, []);
  </code></pre>
  <p>i am deleting a course from the store when componentUnmount.</p>
  <p><a href="https://i.stack.imgur.com/H4e5A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H4e5A.png" alt="enter image description here" /></a></p>
  <p>why does unmount happen after a redirect? as a result, I am redirected back. Because the course is not removed from the store at the moment of unmount, and the check (if (course.id)) shows that the course is in the store and a redirect occurs back (dispatch(push(<code>/ugc/courses/${course.id}</code>)))</p>
  <p>UserVideoCreatePage.tsx</p>
  <pre><code>import React, { useEffect, useRef, useState } from 'react';
  import { shallowEqual, useDispatch, useSelector } from 'react-redux';
  import { useParams } from 'react-router';
  import { Link } from 'react-router-dom';
  
  import { Container } from 'Core/components/Container/Container';
  import { Svg } from 'Core/components/Svg';
  import { Button } from 'Core/Molecules/Button';
  import { Select } from 'Core/Molecules/Select';
  
  import {
    agreementCourse, categoriesSelector,
    courseDelete,
    courseEditorCourseSelector,
    courseUpdateApi, getCategories,
    getCourse,
    updateCourseApi,
  } from 'Learnings/store/courseEdit';
  import { CourseComments } from 'Learnings/screens/CoursePlayPage/CourseBottom/CourseComments/CourseComments';
  
  import { AddItem } from './AddItem';
  import s from 'Admin/Pages/Course/Description/index.scss';
  import './UserVideoCreatePage.scss';
  
  export const UserVideoCreatePage: React.FC = () =&gt; {
    const dispatch = useDispatch();
    const { id: idCourse } = useParams();
    const course = useSelector(courseEditorCourseSelector, shallowEqual);
    const categories = useSelector(categoriesSelector, shallowEqual);
    const [value, valueSet] = useState({ name: '', description: '', categories: [], lectures: [], materials: [] });
    const [tab, tabSet] = useState('program');
    const inputFileRef = useRef&lt;HTMLInputElement&gt;(null);
    const img = course.gallery_items &amp;&amp; course.gallery_items[0];
    console.log(categories);
    const handleBtnClick = () =&gt; {
      if (inputFileRef &amp;&amp; inputFileRef.current) {
        inputFileRef.current.click();
      }
    };
  
    useEffect(() =&gt; {
      dispatch(getCourse(idCourse));
      dispatch(getCategories());
    }, [idCourse]);
  
    useEffect(() =&gt; {
      valueSet({
        name: course.name,
        description: course.description,
        categories: course.categories &amp;&amp; course.categories[0] &amp;&amp; course.categories[0].id,
        lectures: course.lectures,
        materials: course.materials,
      });
    }, [course]);
  
    useEffect(() =&gt; {
      return () =&gt; {
        console.log(333344444)
        dispatch(courseDelete());
      };
    }, []);
  
    return (
      &lt;Container className=&quot;createCourse&quot;&gt;
        &lt;Link to=&quot;/&quot; className=&quot;gallery__back&quot;&gt;
          &lt;Svg name=&quot;arrow_back&quot; width={26} height={20} className=&quot;gallery__svg&quot;/&gt;
          &lt;span&gt;Назад&lt;/span&gt;
        &lt;/Link&gt;
  
        &lt;div className=&quot;createCourse__twoColumn&quot;&gt;
          &lt;div className=&quot;createCourse__twoColumn-left&quot;&gt;
            &lt;div className=&quot;inputBlock&quot;&gt;
              &lt;label className=&quot;inputBlock__label&quot; htmlFor=&quot;video&quot;&gt;
                Название видео-курса
              &lt;/label&gt;
              &lt;input
                id=&quot;video&quot;
                type=&quot;text&quot;
                placeholder=&quot;Введите название вашего видео&quot;
                className=&quot;inputBlock__input&quot;
                value={value.name || ''}
                onChange={e =&gt;
                  valueSet({
                    ...value,
                    name: e.target.value,
                  })
                }
                onBlur={e =&gt; {
                  if (e.target.value &amp;&amp; course.name !== e.target.value) {
                    dispatch(updateCourseApi(idCourse, { name: e.target.value }));
                  }
                }}
              /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;inputBlock&quot;&gt;
              &lt;label className=&quot;inputBlock__label&quot; htmlFor=&quot;opisanie&quot;&gt;
                Описание видео-курса
              &lt;/label&gt;
              &lt;textarea
                id=&quot;opisanie&quot;
                placeholder=&quot;Введите краткое описание вашего видео&quot;
                className=&quot;inputBlock__input&quot;
                value={value.description || ''}
                onChange={e =&gt;
                  valueSet({
                    ...value,
                    description: e.target.value,
                  })
                }
                onBlur={e =&gt; {
                  if (e.target.value &amp;&amp; course.description !== e.target.value) {
                    dispatch(updateCourseApi(idCourse, { description: e.target.value }));
                  }
                }}
              /&gt;
            &lt;/div&gt;
  
            &lt;Select
              title=&quot;Категории видео-курса&quot;
              placeholder=&quot;Категории видео-курса&quot;
              value={value.categories}
              options={categories.map(category =&gt; ({ value: category.id, label: category.name }))}
              onChange={val =&gt; {
                valueSet({
                  ...value,
                  categories: val,
                });
  
                dispatch(
                  updateCourseApi(idCourse, {
                    category_ids: val,
                    courses_curators: {
                      '': {
                        user_id: val,
                      },
                    },
                  }),
                );
              }}
              search
            /&gt;
          &lt;/div&gt;
  
          &lt;div className=&quot;createCourse__twoColumn-right&quot;&gt;
            &lt;div className=&quot;loadVideo&quot;&gt;
              &lt;div className=&quot;loadVideo__field&quot;&gt;
                &lt;div className=&quot;loadVideo__field--block&quot;&gt;
                  {!img &amp;&amp; (
                    &lt;&gt;
                      &lt;Svg className=&quot;loadVideo__field--block-icon&quot; name=&quot;icn-load&quot; width={104} height={69}/&gt;
                      &lt;p className=&quot;loadVideo__field--block-text&quot;&gt;Загрузите обложку к видео&lt;/p&gt;
                    &lt;/&gt;
                  )}
                  {img &amp;&amp; &lt;img src={img &amp;&amp; img.image_url} alt=&quot;&quot;/&gt;}
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className=&quot;loadVideo__under&quot;&gt;
                &lt;div className=&quot;loadVideo__under--left&quot;&gt;
                  &lt;div className=&quot;loadVideo__under--text&quot;&gt;
                    &lt;span className=&quot;loadVideo__under--text-grey&quot;&gt;*Рекомендуемый формат&lt;/span&gt;
                    &lt;span className=&quot;loadVideo__under--text-bold&quot;&gt; 356х100&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;loadVideo__under--text&quot;&gt;
                    &lt;span className=&quot;loadVideo__under--text-grey&quot;&gt;*Вес не должен превышать&lt;/span&gt;
                    &lt;span className=&quot;loadVideo__under--text-bold&quot;&gt; 10 Мб&lt;/span&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className=&quot;loadVideo__under--right&quot;&gt;
                  &lt;input
                    onChange={val =&gt; {
                      if (val.target.files[0]) {
                        if (img) {
                          dispatch(
                            updateCourseApi(idCourse, {
                              gallery_items: {
                                '': {
                                  image: val.target.files[0],
                                  id: img.id,
                                },
                              },
                            }),
                          );
                        } else {
                          dispatch(
                            updateCourseApi(idCourse, {
                              gallery_items: {
                                '': {
                                  image: val.target.files[0],
                                },
                              },
                            }),
                          );
                        }
                      }
                    }}
                    type=&quot;file&quot;
                    ref={inputFileRef}
                    className=&quot;Library__btn&quot;
                  /&gt;
                  &lt;Button
                    onClick={() =&gt; {
                      handleBtnClick();
                    }}
                  &gt;
                    Библиотека обложек
                  &lt;/Button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div className={`block-switcher block-switcher--courseCreate`}&gt;
          &lt;div
            className={`block-switcher__item ${tab === 'program' &amp;&amp; 'block-switcher__item_active'}`}
            onClick={() =&gt; tabSet('program')}
          &gt;
            Программы
          &lt;/div&gt;
          &lt;div
            className={`block-switcher__item ${tab === 'comments' &amp;&amp; 'block-switcher__item_active'}`}
            onClick={() =&gt; tabSet('comments')}
          &gt;
            Комментарии эксперта
          &lt;/div&gt;
        &lt;/div&gt;
  
        {tab === 'program' &amp;&amp; (
          &lt;&gt;
            &lt;AddItem
              accept=&quot;video/mp4,video/x-m4v,video/*&quot;
              fieldName=&quot;name&quot;
              addType=&quot;lecture_type&quot;
              title=&quot;Видео-курсы&quot;
              addBtn=&quot;Добавить видео&quot;
              type=&quot;lectures&quot;
              file=&quot;video&quot;
              lecturesArg={course.lectures}
              value={value}
              onChangeInput={lecturesNew =&gt; {
                valueSet({
                  ...value,
                  lectures: lecturesNew,
                });
              }}
              onVideoUpdate={(params: any) =&gt; {
                dispatch(updateCourseApi(idCourse, params));
              }}
              posMove={(lectures: any) =&gt; {
                dispatch(courseUpdateApi({ id: idCourse, lectures: lectures }, true));
              }}
            /&gt;
            &lt;AddItem
              accept=&quot;&quot;
              fieldName=&quot;title&quot;
              addType=&quot;material_type&quot;
              title=&quot;Материалы к видео-курсам&quot;
              addBtn=&quot;Добавить файл&quot;
              type=&quot;materials&quot;
              file=&quot;document&quot;
              lecturesArg={course.materials}
              value={value}
              onChangeInput={lecturesNew =&gt; {
                valueSet({
                  ...value,
                  materials: lecturesNew,
                });
              }}
              onVideoUpdate={(params: any) =&gt; {
                dispatch(updateCourseApi(idCourse, params));
              }}
              posMove={(lectures: any) =&gt; {
                dispatch(courseUpdateApi({ id: idCourse, materials: lectures }, true));
              }}
            /&gt;
          &lt;/&gt;
        )}
  
        {tab === 'comments' &amp;&amp; &lt;CourseComments title=&quot;Обсуждение&quot;/&gt;}
  
        &lt;Button
          className={`${s.button} agreement__btn`}
          size=&quot;big&quot;
          onClick={() =&gt;
            dispatch(
              agreementCourse(idCourse, {
                visibility_all_users: true,
              }),
            )
          }
        &gt;
          Отправить на согласование
        &lt;/Button&gt;
      &lt;/Container&gt;
    );
  };
  </code></pre>
  <p>LibraryPageFilters.tsx</p>
  <pre><code>import React, { useEffect, useState } from 'react';
  import { useDispatch, useSelector, shallowEqual } from 'react-redux';
  import { push } from 'connected-react-router';
  
  import { getSettingsGlobalSelector } from 'Core/store/settings';
  import { Svg } from 'Core/components/Svg';
  import { NavBar } from 'Core/Organisms/NavBar';
  import { Button } from 'Core/Molecules/Button';
  import { CategoriesFilter } from 'Core/Organisms/Filters/components/CategoriesFilter';
  
  import { courseDelete, courseEditorCourseSelector, createNewCourse } from 'Learnings/store/courseEdit';
  
  import { FILTERS, LINKS } from '../../libraryPageConstants';
  import { setLibraryPageQuery } from '../../actions/libraryPageActions';
  import { getLibraryPageQuerySelector } from '../../libraryPageSelectors';
  
  import s from './index.scss';
  import { languageTranslateSelector } from 'Core/store/language';
  import { LanguageType } from 'Core/models/LanguageSchema';
  import { Status, Tabs } from 'Core/components/Tabs/Tabs';
  
  const statuses: Array&lt;Status&gt; = [
    {
      key: 'Filter/all',
      link: '/courses' || '/courses',
      type: 'all' || '',
    },
    {
      key: 'Filter/online',
      link: '/courses/online',
      type: 'online',
    },
    {
      key: 'Filter/offline',
      link: '/courses/offline',
      type: 'offline',
    },
    {
      key: 'Filter/complete',
      link: '/courses/complete',
      type: 'complete',
    },
  ];
  
  export const LibraryPageFilters = () =&gt; {
    const dispatch = useDispatch();
    const [searchTerm, setSearchTerm] = useState('');
    const [isBtnDisabled, setIsBtnDisabled] = useState(false);
    const course = useSelector(courseEditorCourseSelector, shallowEqual);
  
    const global = useSelector(getSettingsGlobalSelector);
    const query = useSelector(getLibraryPageQuerySelector, shallowEqual);
    const courseCreateButtonText = useSelector(
      languageTranslateSelector('CoursePage/courseCreateButton'),
    ) as LanguageType;
    const { category_id: categoryID } = query;
  console.log(course)
    useEffect(() =&gt; {
      console.log(course.id)
      if (course.id) {
        console.log(544)
        dispatch(push(`/ugc/courses/${course.id}`));
      }
    }, [course]);
  
    useEffect(() =&gt; {
      return () =&gt; {
        setIsBtnDisabled(false);
        dispatch(courseDelete());
      };
    }, []);
  
    const onFilter = (values: any) =&gt; {
      return false;
    };
  
    const handleActiveCategory = (id: number) =&gt; {
      const categoryParam = {
        ...query,
        offset: 0,
        category_id: id,
      };
  
      if (id === categoryID) {
        delete categoryParam.category_id;
      }
  
      dispatch(setLibraryPageQuery(categoryParam));
    };
  
    const handleSearch = () =&gt; {
      dispatch(setLibraryPageQuery({ query: searchTerm }));
    };
  
    return (
      &lt;React.Fragment&gt;
        &lt;div className={s.filters}&gt;
          {global.coursesPage?.filters.length ? (
            &lt;NavBar
              className={s.navBar}
              links={global.coursesPage.filtersLinks.map(linkType =&gt; LINKS[linkType])}
              filters={global.coursesPage.filters.map(filterType =&gt; FILTERS[filterType])}
              onFilter={onFilter}
              postfix={
                global.coursesPage.courseCreateButton &amp;&amp; global.coursesPage.courseCreateButton.enable ? (
                  &lt;Button
                    className=&quot;coursePageCreateButton&quot;
                    onClick={() =&gt; {
                      dispatch(createNewCourse());
                      setIsBtnDisabled(true);
                    }}
                    disabled={isBtnDisabled}
                  &gt;
                    {courseCreateButtonText['CoursePage/courseCreateButton']}
                  &lt;/Button&gt;
                ) : null
              }
            /&gt;
          ) : (
            &lt;div className=&quot;track-page__header&quot; data-tut=&quot;track-header&quot;&gt;
              &lt;Tabs statuses={statuses} /&gt;
              &lt;div className={s.filtersSearch}&gt;
                &lt;Svg className={s.filtersSearchIcon} name=&quot;search_alternative&quot; width={18} height={18} /&gt;
                &lt;input
                  type=&quot;text&quot;
                  placeholder=&quot;Поиск&quot;
                  className={s.filtersSearchInput}
                  value={searchTerm}
                  onChange={event =&gt; setSearchTerm(event.target.value)}
                /&gt;
                &lt;button type=&quot;button&quot; className={s.filtersButton} onClick={handleSearch}&gt;
                  Найти
                &lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          )}
        &lt;/div&gt;
  
        &lt;CategoriesFilter onChange={handleActiveCategory} selectedID={categoryID} /&gt;
      &lt;/React.Fragment&gt;
    );
  };
  </code></pre>