From 43e03d269a56700c50b33d41ee161e4a11a543d1 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Wed, 11 Mar 2026 15:19:58 -0700
Subject: [PATCH] integrate mobx for todos

---
 package.json     |  2 ++
 src/App.test.tsx |  3 ++-
 src/App.tsx      | 16 ++++++++++++++--
 src/index.tsx    |  3 ++-
 src/state.tsx    | 31 +++++++++++++++++++++++++++++++
 yarn.lock        | 17 +++++++++++++++++
 6 files changed, 68 insertions(+), 4 deletions(-)
 create mode 100644 src/state.tsx

diff --git a/package.json b/package.json
index 147edb0..5c01ffa 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,8 @@
     "@types/node": "^16.7.13",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "mobx": "^6.15.0",
+    "mobx-react-lite": "^4.1.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-scripts": "5.0.1",
diff --git a/src/App.test.tsx b/src/App.test.tsx
index 2a68616..bac5f47 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import App from './App';
+import { TodoList } from './state';
 
 test('renders learn react link', () => {
-  render(<App />);
+  render(<App todos={new TodoList()} />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();
 });
diff --git a/src/App.tsx b/src/App.tsx
index a53698a..e203507 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import { observer } from 'mobx-react-lite';
+import { TodoList } from './state';
 
-function App() {
+const App = observer(({ todos }: { todos: TodoList }) => {
   return (
     <div className="App">
       <header className="App-header">
@@ -18,9 +20,19 @@ function App() {
         >
           Learn React
         </a>
+        {todos.todos.map((todo, index) => (
+          <div key={index}>
+            <input
+              type="checkbox"
+              checked={todo.done}
+              onChange={() => (todo.done = !todo.done)}
+            />
+            {todo.name}
+          </div>
+        ))}
       </header>
     </div>
   );
-}
+});
 
 export default App;
diff --git a/src/index.tsx b/src/index.tsx
index 032464f..e7da1b1 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import { TodoList } from './state';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
@@ -9,7 +10,7 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <App todos={new TodoList()} />
   </React.StrictMode>
 );
 
diff --git a/src/state.tsx b/src/state.tsx
new file mode 100644
index 0000000..8f070be
--- /dev/null
+++ b/src/state.tsx
@@ -0,0 +1,31 @@
+import { makeAutoObservable } from 'mobx';
+
+export class Todo {
+  name: string
+  done: boolean
+
+  constructor(name: string, done: boolean) {
+    this.name = name;
+    this.done = done;
+    makeAutoObservable(this);
+  }
+}
+
+export class TodoList {
+  todos: Todo[]
+
+  constructor() {
+    this.todos = [{
+      name: 'Learn MobX',
+      done: false
+    }, {
+      name: 'Learn React',
+      done: false
+    }];
+    makeAutoObservable(this);
+  }
+
+  addTodo(name: string) {
+    this.todos.push(new Todo(name, false));
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 612710d..06a3260 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6509,6 +6509,18 @@ mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.6"
 
+mobx-react-lite@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-4.1.1.tgz#725d74b025235f73dc2ab815766ffe010be2cf8a"
+  integrity sha512-iUxiMpsvNraCKXU+yPotsOncNNmyeS2B5DKL+TL6Tar/xm+wwNJAubJmtRSeAoYawdZqwv8Z/+5nPRHeQxTiXg==
+  dependencies:
+    use-sync-external-store "^1.4.0"
+
+mobx@^6.15.0:
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.15.0.tgz#78b9b82d383724eebb4b6e50c2eb4ae2da861cb5"
+  integrity sha512-UczzB+0nnwGotYSgllfARAqWCJ5e/skuV2K/l+Zyck/H6pJIhLXuBnz+6vn2i211o7DtbE78HQtsYEKICHGI+g==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -9138,6 +9150,11 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+use-sync-external-store@^1.4.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz#b174bfa65cb2b526732d9f2ac0a408027876f32d"
+  integrity sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"