diff --git a/frontend/src/pages/EnvironmentSettings/EnvironmentSettings.tsx b/frontend/src/pages/EnvironmentSettings/EnvironmentSettings.tsx
index 1e47ffa52..483b64c5e 100644
--- a/frontend/src/pages/EnvironmentSettings/EnvironmentSettings.tsx
+++ b/frontend/src/pages/EnvironmentSettings/EnvironmentSettings.tsx
@@ -5,8 +5,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import ReduxToastr, { toastr } from 'react-redux-toastr';
 import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';
 import { RouteComponentProps } from 'react-router';
-import { useProjectById } from 'redux/entities/projects/hooks';
-import { ProjectToastrDisplayType } from 'redux/entities/projects/types';
+import { useProjectById, useToastr } from 'redux/entities/projects/hooks';
 import { useCurrentUser } from 'redux/user/selectors';
 import { makeGetRequest } from 'services/networking/request';
 import { isUserAdminOfProject } from 'services/utils';
@@ -22,22 +21,14 @@ import {
   ProjectSettingsBlock,
 } from './EnvironmentSettings.style';
 
-export type OwnProps = {} & RouteComponentProps<{
+type Props = RouteComponentProps<{
   projectId: string;
 }>;
 
-type Props = {
-  toastrDisplay: ProjectToastrDisplayType;
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) => void;
-} & OwnProps;
-
-const EnvironmentSettings: React.FunctionComponent<Props> = ({
-  match,
-  toastrDisplay,
-  setProjectToastrDisplay,
-}) => {
+const EnvironmentSettings: React.FunctionComponent<Props> = ({ match }) => {
   const intl = useIntl();
   const currentUser = useCurrentUser();
+  const { currentToastrDisplay, resetToastrDisplay } = useToastr();
 
   interface UserOption {
     value: string;
@@ -82,8 +73,8 @@ const EnvironmentSettings: React.FunctionComponent<Props> = ({
 
   React.useEffect(
     () => {
-      if ('' !== toastrDisplay) {
-        switch (toastrDisplay) {
+      if ('' !== currentToastrDisplay) {
+        switch (currentToastrDisplay) {
           case 'addAuditParameterSuccess':
             toastr.success(
               intl.formatMessage({ id: 'Toastr.ProjectSettings.success_title' }),
@@ -114,10 +105,10 @@ const EnvironmentSettings: React.FunctionComponent<Props> = ({
             break;
         }
 
-        setProjectToastrDisplay('');
+        resetToastrDisplay();
       }
     },
-    [toastrDisplay, setProjectToastrDisplay, intl],
+    [currentToastrDisplay, resetToastrDisplay, intl],
   );
 
   if (project === undefined) {
diff --git a/frontend/src/pages/EnvironmentSettings/EnvironmentSettings.wrap.tsx b/frontend/src/pages/EnvironmentSettings/EnvironmentSettings.wrap.tsx
index d80a20e84..b55ad4313 100644
--- a/frontend/src/pages/EnvironmentSettings/EnvironmentSettings.wrap.tsx
+++ b/frontend/src/pages/EnvironmentSettings/EnvironmentSettings.wrap.tsx
@@ -1,22 +1,3 @@
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-import { RootState } from 'redux/types';
+import EnvironmentSettings from './EnvironmentSettings';
 
-import { setProjectToastrDisplay } from 'redux/entities/projects';
-import { getProjectToastrDisplay } from 'redux/entities/projects/selectors';
-import { ProjectToastrDisplayType } from 'redux/entities/projects/types';
-import EnvironmentSettings, { OwnProps } from './EnvironmentSettings';
-
-const mapStateToProps = (state: RootState, props: OwnProps) => ({
-  toastrDisplay: getProjectToastrDisplay(state),
-});
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) =>
-    dispatch(setProjectToastrDisplay({ toastrDisplay })),
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(EnvironmentSettings);
+export default EnvironmentSettings;
diff --git a/frontend/src/pages/GeneralSettings/GeneralSettings.tsx b/frontend/src/pages/GeneralSettings/GeneralSettings.tsx
index b86d07d42..931b28529 100644
--- a/frontend/src/pages/GeneralSettings/GeneralSettings.tsx
+++ b/frontend/src/pages/GeneralSettings/GeneralSettings.tsx
@@ -5,8 +5,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import ReduxToastr, { toastr } from 'react-redux-toastr';
 import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';
 import { RouteComponentProps } from 'react-router';
-import { useProjectById } from 'redux/entities/projects/hooks';
-import { ProjectToastrDisplayType } from 'redux/entities/projects/types';
+import { useProjectById, useToastr } from 'redux/entities/projects/hooks';
 import { useCurrentUser } from 'redux/user/selectors';
 import ProjectDetailsInput from './Components/ProjectDetailsInput';
 import {
@@ -17,27 +16,19 @@ import {
   Title,
 } from './GeneralSettings.style';
 
-export type OwnProps = {} & RouteComponentProps<{
-  projectId: string;
-}>;
-
 type Props = {
-  toastrDisplay: ProjectToastrDisplayType;
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) => void;
   editProjectDetailsRequest: (
     projectId: string,
     payload: { name: string; wpt_api_key: string; wpt_instance_url: string },
   ) => void;
-} & OwnProps;
-
-const GeneralSettings: React.FunctionComponent<Props> = ({
-  match,
-  toastrDisplay,
-  setProjectToastrDisplay,
-  editProjectDetailsRequest,
-}) => {
+} & RouteComponentProps<{
+  projectId: string;
+}>;
+
+const GeneralSettings: React.FunctionComponent<Props> = ({ match, editProjectDetailsRequest }) => {
   const intl = useIntl();
   const currentUser = useCurrentUser();
+  const { currentToastrDisplay, resetToastrDisplay } = useToastr();
 
   interface UserOption {
     value: string;
@@ -69,8 +60,8 @@ const GeneralSettings: React.FunctionComponent<Props> = ({
 
   React.useEffect(
     () => {
-      if ('' !== toastrDisplay) {
-        switch (toastrDisplay) {
+      if ('' !== currentToastrDisplay) {
+        switch (currentToastrDisplay) {
           case 'editProjectDetailsSuccess':
             toastr.success(
               intl.formatMessage({ id: 'Toastr.ProjectSettings.success_title' }),
@@ -85,10 +76,10 @@ const GeneralSettings: React.FunctionComponent<Props> = ({
             break;
         }
 
-        setProjectToastrDisplay('');
+        resetToastrDisplay();
       }
     },
-    [toastrDisplay, setProjectToastrDisplay, intl],
+    [currentToastrDisplay, resetToastrDisplay, intl],
   );
 
   if (project === undefined) {
diff --git a/frontend/src/pages/GeneralSettings/GeneralSettings.wrap.tsx b/frontend/src/pages/GeneralSettings/GeneralSettings.wrap.tsx
index d0c29141b..4e76ce4fb 100644
--- a/frontend/src/pages/GeneralSettings/GeneralSettings.wrap.tsx
+++ b/frontend/src/pages/GeneralSettings/GeneralSettings.wrap.tsx
@@ -1,19 +1,10 @@
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
-import { RootState } from 'redux/types';
 
-import { editProjectDetailsRequest, setProjectToastrDisplay } from 'redux/entities/projects';
-import { getProjectToastrDisplay } from 'redux/entities/projects/selectors';
-import { ProjectToastrDisplayType } from 'redux/entities/projects/types';
-import GeneralSettings, { OwnProps } from './GeneralSettings';
-
-const mapStateToProps = (state: RootState, props: OwnProps) => ({
-  toastrDisplay: getProjectToastrDisplay(state),
-});
+import { editProjectDetailsRequest } from 'redux/entities/projects';
+import GeneralSettings from './GeneralSettings';
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) =>
-    dispatch(setProjectToastrDisplay({ toastrDisplay })),
   editProjectDetailsRequest: (
     projectId: string,
     payload: { name: string; wpt_api_key: string; wpt_instance_url: string },
@@ -21,6 +12,6 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
 });
 
 export default connect(
-  mapStateToProps,
+  null,
   mapDispatchToProps,
 )(GeneralSettings);
diff --git a/frontend/src/pages/MembersSettings/MembersSettings.tsx b/frontend/src/pages/MembersSettings/MembersSettings.tsx
index 78ed02c9d..8ceaa3f58 100644
--- a/frontend/src/pages/MembersSettings/MembersSettings.tsx
+++ b/frontend/src/pages/MembersSettings/MembersSettings.tsx
@@ -9,8 +9,8 @@ import ReduxToastr, { toastr } from 'react-redux-toastr';
 import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';
 import { RouteComponentProps } from 'react-router';
 import { ValueType } from 'react-select/lib/types';
-import { useProjectById } from 'redux/entities/projects/hooks';
-import { ProjectMember, ProjectToastrDisplayType } from 'redux/entities/projects/types';
+import { useProjectById, useToastr } from 'redux/entities/projects/hooks';
+import { ProjectMember } from 'redux/entities/projects/types';
 import { modelizeUser } from 'redux/user/modelizer';
 import { useCurrentUser } from 'redux/user/selectors';
 import { ApiUser, User } from 'redux/user/types';
@@ -32,25 +32,19 @@ import {
   SelectUser,
 } from './MembersSettings.style';
 
-export type OwnProps = {} & RouteComponentProps<{
-  projectId: string;
-}>;
-
 type Props = {
   addMemberToProject: (projectId: string, userId: string) => void;
   removeMemberOfProjectRequest: (projectId: string, userId: string) => void;
   editMemberOfProjectRequest: (projectId: string, userId: string, isAdmin: boolean) => void;
-  toastrDisplay: ProjectToastrDisplayType;
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) => void;
-} & OwnProps;
+} & RouteComponentProps<{
+  projectId: string;
+}>;
 
 const MembersSettings: React.FunctionComponent<Props> = ({
   addMemberToProject,
   removeMemberOfProjectRequest,
   editMemberOfProjectRequest,
   match,
-  toastrDisplay,
-  setProjectToastrDisplay,
 }) => {
   const intl = useIntl();
 
@@ -62,6 +56,8 @@ const MembersSettings: React.FunctionComponent<Props> = ({
 
   const currentUser = useCurrentUser();
 
+  const { currentToastrDisplay, resetToastrDisplay } = useToastr();
+
   const [selectOption, setSelectOption]: [ValueType<UserOption | {}>, any] = React.useState(null);
   const [allUsers, setAllUsers] = React.useState([]);
 
@@ -89,8 +85,8 @@ const MembersSettings: React.FunctionComponent<Props> = ({
 
   React.useEffect(
     () => {
-      if ('' !== toastrDisplay) {
-        switch (toastrDisplay) {
+      if ('' !== currentToastrDisplay) {
+        switch (currentToastrDisplay) {
           case 'addMemberSuccess':
             toastr.success(
               intl.formatMessage({ id: 'Toastr.ProjectSettings.success_title' }),
@@ -105,10 +101,10 @@ const MembersSettings: React.FunctionComponent<Props> = ({
             break;
         }
 
-        setProjectToastrDisplay('');
+        resetToastrDisplay();
       }
     },
-    [toastrDisplay, setProjectToastrDisplay, intl],
+    [currentToastrDisplay, resetToastrDisplay, intl],
   );
 
   const onChange = (selectedOption: ValueType<UserOption | {}>) => {
diff --git a/frontend/src/pages/MembersSettings/MembersSettings.wrap.tsx b/frontend/src/pages/MembersSettings/MembersSettings.wrap.tsx
index 84e522865..9a7df5050 100644
--- a/frontend/src/pages/MembersSettings/MembersSettings.wrap.tsx
+++ b/frontend/src/pages/MembersSettings/MembersSettings.wrap.tsx
@@ -1,20 +1,12 @@
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
-import { RootState } from 'redux/types';
 
 import {
   addMemberToProjectRequest,
   deleteMemberOfProjectRequest,
   editMemberOfProjectRequest,
-  setProjectToastrDisplay,
 } from 'redux/entities/projects';
-import { getProjectToastrDisplay } from 'redux/entities/projects/selectors';
-import { ProjectToastrDisplayType } from 'redux/entities/projects/types';
-import MembersSettings, { OwnProps } from './MembersSettings';
-
-const mapStateToProps = (state: RootState, props: OwnProps) => ({
-  toastrDisplay: getProjectToastrDisplay(state),
-});
+import MembersSettings from './MembersSettings';
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
   addMemberToProject: (projectId: string, userId: string) =>
@@ -23,11 +15,9 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
     dispatch(deleteMemberOfProjectRequest({ projectId, userId })),
   editMemberOfProjectRequest: (projectId: string, userId: string, isAdmin: boolean) =>
     dispatch(editMemberOfProjectRequest({ projectId, userId, isAdmin })),
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) =>
-    dispatch(setProjectToastrDisplay({ toastrDisplay })),
 });
 
 export default connect(
-  mapStateToProps,
+  null,
   mapDispatchToProps,
 )(MembersSettings);
diff --git a/frontend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptModal/ScriptModal.tsx b/frontend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptModal/ScriptModal.tsx
index 60fdea290..452f758c3 100644
--- a/frontend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptModal/ScriptModal.tsx
+++ b/frontend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptModal/ScriptModal.tsx
@@ -4,7 +4,7 @@ import Modal from 'react-modal';
 import { useAsyncFn } from 'react-use';
 
 import Close from 'icons/Close';
-import { ProjectToastrDisplayType } from 'redux/entities/projects/types';
+import { useToastr } from 'redux/entities/projects/hooks';
 import { modelizeScript } from 'redux/entities/scripts/modelizer';
 import { ScriptType } from 'redux/entities/scripts/types';
 import { makePostRequest, makePutRequest } from 'services/networking/request';
@@ -30,7 +30,6 @@ type Props = {
   addScriptToProjectSuccess: (projectId: string, scriptId: string) => void;
   addScript: (byId: Record<string, ScriptType>) => void;
   editScriptSuccess: (byId: Record<string, ScriptType>) => void;
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) => void;
 } & OwnProps;
 
 export const ScriptModal: React.FunctionComponent<Props> = ({
@@ -42,13 +41,14 @@ export const ScriptModal: React.FunctionComponent<Props> = ({
   addScriptToProjectSuccess,
   addScript,
   editScriptSuccess,
-  setProjectToastrDisplay,
 }) => {
   const intl = useIntl();
 
   const [scriptContent, setScriptContent] = React.useState(script ? script.script : '');
   const [scriptName, setScriptName] = React.useState(script ? script.name : '');
 
+  const { setToastrDisplay } = useToastr();
+
   const [state, createScript] = useAsyncFn(
     async () => {
       try {
@@ -62,10 +62,10 @@ export const ScriptModal: React.FunctionComponent<Props> = ({
         const modelizedScript = modelizeScript(response.body);
         addScript({ [modelizedScript.uuid]: modelizedScript });
         addScriptToProjectSuccess(projectId, modelizedScript.uuid);
-        setProjectToastrDisplay('addScriptToProjectSuccess');
+        setToastrDisplay('addScriptToProjectSuccess');
         close();
       } catch (e) {
-        setProjectToastrDisplay('addScriptToProjectError');
+        setToastrDisplay('addScriptToProjectError');
       }
     },
     [projectId, scriptContent, scriptName],
@@ -86,11 +86,11 @@ export const ScriptModal: React.FunctionComponent<Props> = ({
           throw new Error('No response');
         }
         const modelizedScript = modelizeScript(response.body);
-        setProjectToastrDisplay('editScriptSuccess');
+        setToastrDisplay('editScriptSuccess');
         editScriptSuccess({ [modelizedScript.uuid]: modelizedScript });
         close();
       } catch (e) {
-        setProjectToastrDisplay('editScriptError');
+        setToastrDisplay('editScriptError');
       }
     },
     [projectId, scriptContent, scriptName],
diff --git a/frontend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptModal/ScriptModal.wrap.tsx b/frontend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptModal/ScriptModal.wrap.tsx
index 1f6d31373..ce5b3f342 100644
--- a/frontend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptModal/ScriptModal.wrap.tsx
+++ b/frontend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptModal/ScriptModal.wrap.tsx
@@ -1,7 +1,6 @@
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
-import { addScriptToProjectSuccess, setProjectToastrDisplay } from 'redux/entities/projects';
-import { ProjectToastrDisplayType } from 'redux/entities/projects/types';
+import { addScriptToProjectSuccess } from 'redux/entities/projects';
 import { addScript, editScriptSuccess } from 'redux/entities/scripts';
 import { getScript } from 'redux/entities/scripts/selectors';
 import { ScriptType } from 'redux/entities/scripts/types';
@@ -17,8 +16,6 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
     dispatch(addScriptToProjectSuccess({ projectId, scriptId })),
   addScript: (byId: Record<string, ScriptType>) => dispatch(addScript({ byId })),
   editScriptSuccess: (byId: Record<string, ScriptType>) => dispatch(editScriptSuccess({ byId })),
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) =>
-    dispatch(setProjectToastrDisplay({ toastrDisplay })),
 });
 
 export default connect(
diff --git a/frontend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptRow/ScriptRow.tsx b/frontend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptRow/ScriptRow.tsx
index fcc2d5c4d..9eed5312a 100644
--- a/frontend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptRow/ScriptRow.tsx
+++ b/frontend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptRow/ScriptRow.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useIntl } from 'react-intl';
 import { toastr } from 'react-redux-toastr';
 import { useAsyncFn } from 'react-use';
-import { ProjectToastrDisplayType } from 'redux/entities/projects/types';
+import { useToastr } from 'redux/entities/projects/hooks';
 import { ScriptType } from 'redux/entities/scripts/types';
 import { makeDeleteRequest } from 'services/networking/request';
 import { colorUsage } from 'stylesheet';
@@ -24,24 +24,21 @@ export interface OwnProps {
 
 type Props = {
   script: ScriptType | null | undefined;
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) => void;
   deleteScriptFromProjectSuccess: (payload: { projectId: string; scriptId: string }) => void;
 } & OwnProps;
 
 export const ScriptRow: React.FunctionComponent<Props> = ({
   scriptId,
   projectId,
-  setProjectToastrDisplay,
   deleteScriptFromProjectSuccess,
   script,
 }) => {
   const intl = useIntl();
+  const { setToastrDisplay } = useToastr();
 
   const [displayScriptModal, setDisplayScriptModal] = React.useState(false);
 
-  // could’t find a way to not declare `state` using `useAsyncFn`
-  // eslint-disable-next-line
-  const [state, deleteScript] = useAsyncFn(
+  const [, deleteScript] = useAsyncFn(
     async () => {
       try {
         const response = await makeDeleteRequest(
@@ -52,12 +49,12 @@ export const ScriptRow: React.FunctionComponent<Props> = ({
           throw new Error('No response');
         }
         deleteScriptFromProjectSuccess({ projectId, scriptId });
-        setProjectToastrDisplay('deleteScriptSuccess');
+        setToastrDisplay('deleteScriptSuccess');
       } catch (e) {
-        setProjectToastrDisplay('deleteScriptError');
+        setToastrDisplay('deleteScriptError');
       }
     },
-    [projectId, scriptId],
+    [projectId, scriptId, setToastrDisplay],
   );
 
   const openScriptModal = () => {
diff --git a/frontend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptRow/ScriptRow.wrap.tsx b/frontend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptRow/ScriptRow.wrap.tsx
index 90e71991b..eb4786ea7 100644
--- a/frontend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptRow/ScriptRow.wrap.tsx
+++ b/frontend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptRow/ScriptRow.wrap.tsx
@@ -1,8 +1,6 @@
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
-import { setProjectToastrDisplay } from 'redux/entities/projects';
 import { deleteScriptFromProjectSuccess } from 'redux/entities/projects/actions';
-import { ProjectToastrDisplayType } from 'redux/entities/projects/types';
 import { getScript } from 'redux/entities/scripts/selectors';
 import { RootState } from 'redux/types';
 import { OwnProps, ScriptRow } from './ScriptRow';
@@ -14,8 +12,6 @@ const mapStateToProps = (state: RootState, props: OwnProps) => ({
 const mapDispatchToProps = (dispatch: Dispatch) => ({
   deleteScriptFromProjectSuccess: (payload: { projectId: string; scriptId: string }) =>
     dispatch(deleteScriptFromProjectSuccess(payload)),
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) =>
-    dispatch(setProjectToastrDisplay({ toastrDisplay })),
 });
 
 export default connect(
diff --git a/frontend/src/pages/PagesAndScriptsSettings/PagesAndScriptsSettings.tsx b/frontend/src/pages/PagesAndScriptsSettings/PagesAndScriptsSettings.tsx
index 8e9dca34a..e6de6042d 100644
--- a/frontend/src/pages/PagesAndScriptsSettings/PagesAndScriptsSettings.tsx
+++ b/frontend/src/pages/PagesAndScriptsSettings/PagesAndScriptsSettings.tsx
@@ -5,8 +5,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import ReduxToastr, { toastr } from 'react-redux-toastr';
 import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';
 import { RouteComponentProps } from 'react-router';
-import { useProjectById } from 'redux/entities/projects/hooks';
-import { ProjectToastrDisplayType } from 'redux/entities/projects/types';
+import { useProjectById, useToastr } from 'redux/entities/projects/hooks';
 import { useCurrentUser } from 'redux/user/selectors';
 import { isUserAdminOfProject } from 'services/utils';
 import { AddPageRow } from './Components/PageTable';
@@ -20,22 +19,14 @@ import {
   ProjectSettingsBlock,
 } from './PagesAndScriptsSettings.style';
 
-export type OwnProps = {} & RouteComponentProps<{
+type Props = RouteComponentProps<{
   projectId: string;
 }>;
 
-type Props = {
-  toastrDisplay: ProjectToastrDisplayType;
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) => void;
-} & OwnProps;
-
-const PagesAndScriptsSettings: React.FunctionComponent<Props> = ({
-  match,
-  toastrDisplay,
-  setProjectToastrDisplay,
-}) => {
+const PagesAndScriptsSettings: React.FunctionComponent<Props> = ({ match }) => {
   const intl = useIntl();
   const currentUser = useCurrentUser();
+  const { currentToastrDisplay, resetToastrDisplay } = useToastr();
 
   interface UserOption {
     value: string;
@@ -54,8 +45,8 @@ const PagesAndScriptsSettings: React.FunctionComponent<Props> = ({
 
   React.useEffect(
     () => {
-      if ('' !== toastrDisplay) {
-        switch (toastrDisplay) {
+      if ('' !== currentToastrDisplay) {
+        switch (currentToastrDisplay) {
           case 'addPageSuccess':
             toastr.success(
               intl.formatMessage({ id: 'Toastr.ProjectSettings.success_title' }),
@@ -105,10 +96,10 @@ const PagesAndScriptsSettings: React.FunctionComponent<Props> = ({
             break;
         }
 
-        setProjectToastrDisplay('');
+        resetToastrDisplay();
       }
     },
-    [toastrDisplay, setProjectToastrDisplay, intl],
+    [currentToastrDisplay, resetToastrDisplay, intl],
   );
 
   if (project === undefined) {
diff --git a/frontend/src/pages/PagesAndScriptsSettings/PagesAndScriptsSettings.wrap.tsx b/frontend/src/pages/PagesAndScriptsSettings/PagesAndScriptsSettings.wrap.tsx
index 3b41b0dfa..73dee4852 100644
--- a/frontend/src/pages/PagesAndScriptsSettings/PagesAndScriptsSettings.wrap.tsx
+++ b/frontend/src/pages/PagesAndScriptsSettings/PagesAndScriptsSettings.wrap.tsx
@@ -1,22 +1,3 @@
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-import { RootState } from 'redux/types';
+import PagesAndScriptsSettings from './PagesAndScriptsSettings';
 
-import { setProjectToastrDisplay } from 'redux/entities/projects';
-import { getProjectToastrDisplay } from 'redux/entities/projects/selectors';
-import { ProjectToastrDisplayType } from 'redux/entities/projects/types';
-import PagesAndScriptsSettings, { OwnProps } from './PagesAndScriptsSettings';
-
-const mapStateToProps = (state: RootState, props: OwnProps) => ({
-  toastrDisplay: getProjectToastrDisplay(state),
-});
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) =>
-    dispatch(setProjectToastrDisplay({ toastrDisplay })),
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(PagesAndScriptsSettings);
+export default PagesAndScriptsSettings;
diff --git a/frontend/src/redux/entities/projects/hooks.ts b/frontend/src/redux/entities/projects/hooks.ts
index e2a87f28b..71dc3a5e8 100644
--- a/frontend/src/redux/entities/projects/hooks.ts
+++ b/frontend/src/redux/entities/projects/hooks.ts
@@ -1,10 +1,11 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { RootState } from 'redux/types';
 
-import { fetchProjectsRequest } from './actions';
-import { getAllProjects, getProject } from './selectors';
+import { fetchProjectsRequest, setProjectToastrDisplay } from './actions';
+import { getAllProjects, getProject, getProjectToastrDisplay } from './selectors';
+import { ProjectToastrDisplayType } from './types';
 
 export const useAllProjects = () => {
   const projects = useSelector(getAllProjects);
@@ -37,3 +38,23 @@ export const useProjectById = (projectId: string) => {
 
   return project;
 };
+
+export const useToastr = () => {
+  const currentToastrDisplay = useSelector(getProjectToastrDisplay);
+
+  const dispatch = useDispatch();
+  const setToastrDisplay = useCallback(
+    (display: ProjectToastrDisplayType) => {
+      dispatch(setProjectToastrDisplay({ toastrDisplay: display }));
+    },
+    [dispatch],
+  );
+  const resetToastrDisplay = useCallback(
+    () => {
+      dispatch(setProjectToastrDisplay({ toastrDisplay: '' }));
+    },
+    [dispatch],
+  );
+
+  return { currentToastrDisplay, setToastrDisplay, resetToastrDisplay };
+};