I am implementing a todo application which has several pages where each page displays a filtered list of all todos depending on the todos' references.

In addition, there is a global "Add task" button and modal from which users can add a task with references. Depending on which page the user is on when adding a task, this newly added task must either be shown right away because the reference is included in currently active page's filter or it must not be shown.

For example, if the user is on the page "Project 1"

• If user adds task for Project 1 -> show on page
• If user adds task for Project 2 -> don't show on page

Currently, App.js looks something like this

function App() {
  return (
    <Page>
      <Router>
        <Route path="/project1" element={<TaskListProject1 />} />
        <Route path="/project2" element={<TaskListProject2 />} />
      <Router />
      <AddTaskButtonAndModal />
    <Page />
  );
} 

How do I best set up and manage the state so that the components TaskListProject1 and TaskListProject2 are only updated if the added task must be included there?

I was thinking about adding the task from the AddTaskButtonAndModal component to the data base and then let the currently active component retrieve all their tasks from the data base again. For this, I would introduce a dummy state whose sole purpose is triggering a rerender of components like so

function App() {
  const [dummyState, setDummyState] = useState(0);
  return (
    <Page>
      <Router>
        <Route path="/project1" element={<TaskListProject1 dummyState={dummyState} />} />
        <Route path="/project2" element={<TaskListProject2 dummyState={dummyState} />} />
      <Router />
      <AddTaskButtonAndModal setDummyState={setDummyState} />
    <Page />
  );
} 

...but that feels like I'm misusing states.

Another idea was to always have a complete list of all tasks in the top level state and let each component filter for their tasks when it is rendered. But then I need to always have all tasks in the state when only a fraction of tasks are actually needed.

As you can probably imagine, I'm new to React, so I might simply miss a basic concept. Thanks for any help!