├── src
    ├── vite-env.d.ts
    ├── utils.ts
    ├── index.css
    ├── App.tsx
    ├── main.tsx
    ├── tutorial
    │   ├── 02-actions
    │   │   ├── 02-action.tsx
    │   │   ├── 03-hook.tsx
    │   │   ├── 04-complex.tsx
    │   │   └── 01-traditional-approach.tsx
    │   ├── 01-use
    │   │   ├── 02-use-approach.tsx
    │   │   └── 01-traditional-approach.tsx
    │   ├── 05-render-issue
    │   │   └── index.tsx
    │   ├── 03-useFormStatus
    │   │   ├── 02-final.tsx
    │   │   └── 01-starter.tsx
    │   └── 04-useOptimistic
    │   │   ├── 02-final.tsx
    │   │   └── 01-starter.tsx
    ├── final
    │   ├── 05-render-issue
    │   │   └── index.tsx
    │   ├── 01-use
    │   │   ├── 01-traditional-approach.tsx
    │   │   └── 02-use-approach.tsx
    │   ├── 02-actions
    │   │   ├── 02-action.tsx
    │   │   ├── 03-hook.tsx
    │   │   ├── 04-complex.tsx
    │   │   └── 01-traditional-approach.tsx
    │   ├── 03-useFormStatus
    │   │   ├── 01-starter.tsx
    │   │   └── 02-final.tsx
    │   └── 04-useOptimistic
    │   │   ├── 01-starter.tsx
    │   │   └── 02-final.tsx
    └── assets
    │   └── react.svg
├── postcss.config.js
├── tsconfig.json
├── tailwind.config.js
├── .gitignore
├── vite.config.ts
├── index.html
├── tsconfig.node.json
├── tsconfig.app.json
├── db.json
├── eslint.config.js
├── package.json
├── public
    └── vite.svg
└── README.md


/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
1 | export const API_URL = 'http://localhost:3001';
2 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "files": [],
3 |   "references": [
4 |     { "path": "./tsconfig.app.json" },
5 |     { "path": "./tsconfig.node.json" }
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 |   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | function App() {
 2 |   return (
 3 |     <h1 className='text-3xl font-bold underline text-center p-10'>
 4 |       React 19 Tutorial with TypeScript
 5 |     </h1>
 6 |   );
 7 | }
 8 | 
 9 | export default App;
10 | 


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from 'react'
 2 | import { createRoot } from 'react-dom/client'
 3 | import './index.css'
 4 | import App from './App.tsx'
 5 | 
 6 | createRoot(document.getElementById('root')!).render(
 7 |   <StrictMode>
 8 |     <App />
 9 |   </StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite';
 2 | import react from '@vitejs/plugin-react';
 3 | const ReactCompilerConfig = {};
 4 | // https://vite.dev/config/
 5 | export default defineConfig({
 6 |   plugins: [
 7 |     react({
 8 |       babel: {
 9 |         plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]],
10 |       },
11 |     }),
12 |   ],
13 | });
14 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>React 19 Tutorial with TS</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.tsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
 4 |     "target": "ES2022",
 5 |     "lib": ["ES2023"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "isolatedModules": true,
13 |     "moduleDetection": "force",
14 |     "noEmit": true,
15 | 
16 |     /* Linting */
17 |     "strict": true,
18 |     "noUnusedLocals": true,
19 |     "noUnusedParameters": true,
20 |     "noFallthroughCasesInSwitch": true,
21 |     "noUncheckedSideEffectImports": true
22 |   },
23 |   "include": ["vite.config.ts"]
24 | }
25 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 4 |     "target": "ES2020",
 5 |     "useDefineForClassFields": true,
 6 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 7 |     "module": "ESNext",
 8 |     "skipLibCheck": true,
 9 | 
10 |     /* Bundler mode */
11 |     "moduleResolution": "bundler",
12 |     "allowImportingTsExtensions": true,
13 |     "isolatedModules": true,
14 |     "moduleDetection": "force",
15 |     "noEmit": true,
16 |     "jsx": "react-jsx",
17 | 
18 |     /* Linting */
19 |     "strict": true,
20 |     "noUnusedLocals": true,
21 |     "noUnusedParameters": true,
22 |     "noFallthroughCasesInSwitch": true,
23 |     "noUncheckedSideEffectImports": true
24 |   },
25 |   "include": ["src"]
26 | }
27 | 


--------------------------------------------------------------------------------
/db.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "users": [
 3 |     {
 4 |       "id": "1",
 5 |       "name": "John Doe",
 6 |       "email": "johndoe@example.com"
 7 |     },
 8 |     {
 9 |       "id": "2",
10 |       "name": "Jane Smith",
11 |       "email": "janesmith@example.com"
12 |     },
13 |     {
14 |       "id": "d6ce",
15 |       "name": "susan",
16 |       "email": "susan@gmail.com"
17 |     },
18 |     {
19 |       "id": "b98d",
20 |       "name": "john",
21 |       "email": "john@gmail.com"
22 |     },
23 |     {
24 |       "id": "f661",
25 |       "name": "john",
26 |       "email": "john@gmail.com"
27 |     }
28 |   ],
29 | 
30 |   "todos": [
31 |     {
32 |       "id": "1",
33 |       "text": "Learn React",
34 |       "completed": true
35 |     },
36 |     {
37 |       "id": "a185",
38 |       "text": "new item",
39 |       "completed": true
40 |     }
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js';
 2 | import globals from 'globals';
 3 | import reactHooks from 'eslint-plugin-react-hooks';
 4 | import reactRefresh from 'eslint-plugin-react-refresh';
 5 | import tseslint from 'typescript-eslint';
 6 | import reactCompiler from 'eslint-plugin-react-compiler';
 7 | 
 8 | export default tseslint.config(
 9 |   { ignores: ['dist'] },
10 |   {
11 |     extends: [js.configs.recommended, ...tseslint.configs.recommended],
12 |     files: ['**/*.{ts,tsx}'],
13 |     languageOptions: {
14 |       ecmaVersion: 2020,
15 |       globals: globals.browser,
16 |     },
17 |     plugins: {
18 |       'react-hooks': reactHooks,
19 |       'react-refresh': reactRefresh,
20 |       'react-compiler': reactCompiler,
21 |     },
22 |     rules: {
23 |       ...reactHooks.configs.recommended.rules,
24 |       'react-refresh/only-export-components': [
25 |         'warn',
26 |         { allowConstantExport: true },
27 |       ],
28 |       'react-compiler/react-compiler': 'error',
29 |     },
30 |   }
31 | );
32 | 


--------------------------------------------------------------------------------
/src/tutorial/02-actions/02-action.tsx:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | import { API_URL } from '../../utils';
 3 | 
 4 | const Component = () => {
 5 |   return (
 6 |     <form className={formStyles.container}>
 7 |       <input
 8 |         type='text'
 9 |         name='name'
10 |         required
11 |         className={formStyles.input}
12 |         placeholder='name'
13 |       />
14 |       <input
15 |         type='email'
16 |         name='email'
17 |         required
18 |         className={formStyles.input}
19 |         placeholder='email'
20 |       />
21 |       <button type='submit' className={formStyles.button}>
22 |         Submit
23 |       </button>
24 |     </form>
25 |   );
26 | };
27 | export default Component;
28 | 
29 | const formStyles = {
30 |   container: 'max-w-md mx-auto mt-24 p-8 space-y-4 bg-white rounded shadow',
31 |   input:
32 |     'w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500',
33 |   button:
34 |     'w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200',
35 | };
36 | 


--------------------------------------------------------------------------------
/src/tutorial/02-actions/03-hook.tsx:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | import { useActionState } from 'react';
 3 | import { API_URL } from '../../utils';
 4 | 
 5 | const Component = () => {
 6 |   return (
 7 |     <form className={formStyles.container}>
 8 |       <input
 9 |         type='text'
10 |         name='name'
11 |         required
12 |         className={formStyles.input}
13 |         placeholder='name'
14 |       />
15 |       <input
16 |         type='email'
17 |         name='email'
18 |         required
19 |         className={formStyles.input}
20 |         placeholder='email'
21 |       />
22 |       <button type='submit' className={formStyles.button}>
23 |         Submit
24 |       </button>
25 |     </form>
26 |   );
27 | };
28 | export default Component;
29 | 
30 | const formStyles = {
31 |   container: 'max-w-md mx-auto mt-24 p-8 space-y-4 bg-white rounded shadow',
32 |   input:
33 |     'w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500',
34 |   button:
35 |     'w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200',
36 | };
37 | 


--------------------------------------------------------------------------------
/src/tutorial/01-use/02-use-approach.tsx:
--------------------------------------------------------------------------------
 1 | import { use, Suspense, useState } from 'react';
 2 | import axios from 'axios';
 3 | import { API_URL } from '../../utils';
 4 | 
 5 | type User = {
 6 |   id: string;
 7 |   name: string;
 8 |   email: string;
 9 | };
10 | 
11 | const Component = () => {
12 |   const users = [] as User[];
13 |   const [count, setCount] = useState(0);
14 | 
15 |   return (
16 |     <div className='p-6 max-w-4xl mx-auto'>
17 |       <button
18 |         className='bg-blue-500 text-white px-4 py-2 rounded-md mb-4'
19 |         onClick={() => setCount(count + 1)}
20 |       >
21 |         Count: {count}
22 |       </button>
23 |       <h1 className='text-3xl font-bold mb-6'>Users</h1>
24 |       <ul className='space-y-3'>
25 |         {users.map((user) => (
26 |           <li
27 |             key={user.id}
28 |             className='p-4 rounded-lg bg-white shadow hover:shadow-md transition-shadow'
29 |           >
30 |             <span className='font-medium'>{user.name}</span>
31 |             <span className='text-gray-600 ml-2'>- {user.email}</span>
32 |           </li>
33 |         ))}
34 |       </ul>
35 |     </div>
36 |   );
37 | };
38 | 


--------------------------------------------------------------------------------
/src/tutorial/02-actions/04-complex.tsx:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | import { useActionState } from 'react';
 3 | import { API_URL } from '../../utils';
 4 | type Status = 'success' | 'error' | 'idle';
 5 | type FormState = { status: Status; name: string };
 6 | 
 7 | const Component = () => {
 8 |   return (
 9 |     <form className={formStyles.container}>
10 |       <input
11 |         type='text'
12 |         name='name'
13 |         required
14 |         className={formStyles.input}
15 |         placeholder='name'
16 |       />
17 |       <input
18 |         type='email'
19 |         name='email'
20 |         required
21 |         className={formStyles.input}
22 |         placeholder='email'
23 |       />
24 |       <button type='submit' className={formStyles.button}>
25 |         Submit
26 |       </button>
27 |     </form>
28 |   );
29 | };
30 | export default Component;
31 | 
32 | const formStyles = {
33 |   container: 'max-w-md mx-auto mt-24 p-8 space-y-4 bg-white rounded shadow',
34 |   input:
35 |     'w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500',
36 |   button:
37 |     'w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200',
38 | };
39 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-19-tutorial",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "server": "json-server db.json --port 3001",
 8 |     "dev": "concurrently \"npm run server\" \"vite\"",
 9 |     "build": "tsc -b && vite build",
10 |     "lint": "eslint .",
11 |     "preview": "vite preview"
12 |   },
13 |   "dependencies": {
14 |     "@types/react": "19.0.2",
15 |     "@types/react-dom": "19.0.2",
16 |     "axios": "^1.7.9",
17 |     "concurrently": "^9.1.0",
18 |     "json-server": "^1.0.0-beta.3",
19 |     "react": "^19.0.0",
20 |     "react-dom": "^19.0.0"
21 |   },
22 |   "devDependencies": {
23 |     "@eslint/js": "^9.17.0",
24 |     "@vitejs/plugin-react": "^4.3.4",
25 |     "autoprefixer": "^10.4.20",
26 |     "babel-plugin-react-compiler": "^19.0.0-beta-201e55d-20241215",
27 |     "eslint": "^9.17.0",
28 |     "eslint-plugin-react-compiler": "^19.0.0-beta-201e55d-20241215",
29 |     "eslint-plugin-react-hooks": "^5.0.0",
30 |     "eslint-plugin-react-refresh": "^0.4.16",
31 |     "globals": "^15.13.0",
32 |     "postcss": "^8.4.49",
33 |     "tailwindcss": "^3.4.17",
34 |     "typescript": "~5.6.2",
35 |     "typescript-eslint": "^8.18.1",
36 |     "vite": "^6.0.3"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/final/05-render-issue/index.tsx:
--------------------------------------------------------------------------------
 1 | import { memo, useState } from 'react';
 2 | 
 3 | const Parent = () => {
 4 |   const [count, setCount] = useState(0);
 5 |   const [value, setValue] = useState(0);
 6 |   return (
 7 |     <div className='container mx-auto pt-8 text-center'>
 8 |       <h1 className='text-2xl font-bold mb-4'>Parent Component</h1>
 9 |       <p className='mb-2'>Count: {count}</p>
10 |       <button
11 |         className='bg-blue-500 text-white px-4 py-2 rounded mb-8'
12 |         onClick={() => setCount(count + 1)}
13 |       >
14 |         Increment
15 |       </button>
16 |       <Child value={value} setValue={setValue} />
17 |       {/* <OptimizedChild value={value} setValue={setValue} /> */}
18 |     </div>
19 |   );
20 | };
21 | 
22 | type ChildProps = {
23 |   value: number;
24 |   setValue: (value: number) => void;
25 | };
26 | 
27 | const Child = ({ value, setValue }: ChildProps) => {
28 |   console.log('Child rendered');
29 |   return (
30 |     <div className='mt-8'>
31 |       <h1 className='text-xl font-bold mb-4'>Child Component</h1>
32 |       <p className='mb-2'>Value: {value}</p>
33 |       <button
34 |         className='bg-green-500 text-white px-4 py-2 rounded'
35 |         onClick={() => setValue(value + 1)}
36 |       >
37 |         Increment
38 |       </button>
39 |     </div>
40 |   );
41 | };
42 | const OptimizedChild = memo(Child);
43 | 
44 | export default Parent;
45 | 


--------------------------------------------------------------------------------
/src/tutorial/05-render-issue/index.tsx:
--------------------------------------------------------------------------------
 1 | import { memo, useState } from 'react';
 2 | 
 3 | const Parent = () => {
 4 |   const [count, setCount] = useState(0);
 5 |   const [value, setValue] = useState(0);
 6 |   return (
 7 |     <div className='container mx-auto pt-8 text-center'>
 8 |       <h1 className='text-2xl font-bold mb-4'>Parent Component</h1>
 9 |       <p className='mb-2'>Count: {count}</p>
10 |       <button
11 |         className='bg-blue-500 text-white px-4 py-2 rounded mb-8'
12 |         onClick={() => setCount(count + 1)}
13 |       >
14 |         Increment
15 |       </button>
16 |       <Child value={value} setValue={setValue} />
17 |       {/* <OptimizedChild value={value} setValue={setValue} /> */}
18 |     </div>
19 |   );
20 | };
21 | 
22 | type ChildProps = {
23 |   value: number;
24 |   setValue: (value: number) => void;
25 | };
26 | 
27 | const Child = ({ value, setValue }: ChildProps) => {
28 |   console.log('Child rendered');
29 |   return (
30 |     <div className='mt-8'>
31 |       <h1 className='text-xl font-bold mb-4'>Child Component</h1>
32 |       <p className='mb-2'>Value: {value}</p>
33 |       <button
34 |         className='bg-green-500 text-white px-4 py-2 rounded'
35 |         onClick={() => setValue(value + 1)}
36 |       >
37 |         Increment
38 |       </button>
39 |     </div>
40 |   );
41 | };
42 | const OptimizedChild = memo(Child);
43 | 
44 | export default Parent;
45 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/final/01-use/01-traditional-approach.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react';
 2 | import axios from 'axios';
 3 | import { API_URL } from '../../utils';
 4 | 
 5 | type User = {
 6 |   id: string;
 7 |   name: string;
 8 |   email: string;
 9 | };
10 | 
11 | const Component = () => {
12 |   const [users, setUsers] = useState<User[]>([]);
13 |   const [isLoading, setIsLoading] = useState(false);
14 | 
15 |   const fetchUsers = async () => {
16 |     setIsLoading(true);
17 |     try {
18 |       const response = await axios.get(`${API_URL}/users`);
19 |       setUsers(response.data);
20 |     } catch (error) {
21 |       console.log(error);
22 |     } finally {
23 |       setIsLoading(false);
24 |     }
25 |   };
26 | 
27 |   useEffect(() => {
28 |     fetchUsers();
29 |   }, []);
30 | 
31 |   return (
32 |     <div className='p-6 max-w-4xl mx-auto'>
33 |       <h1 className='text-3xl font-bold mb-6'>Users</h1>
34 |       {isLoading ? (
35 |         <p className='text-gray-600'>Loading...</p>
36 |       ) : (
37 |         <ul className='space-y-3'>
38 |           {users.map((user) => (
39 |             <li
40 |               key={user.id}
41 |               className='p-4 rounded-lg bg-white shadow hover:shadow-md transition-shadow'
42 |             >
43 |               <span className='font-medium'>{user.name}</span>
44 |               <span className='text-gray-600 ml-2'>- {user.email}</span>
45 |             </li>
46 |           ))}
47 |         </ul>
48 |       )}
49 |     </div>
50 |   );
51 | };
52 | export default Component;
53 | 


--------------------------------------------------------------------------------
/src/tutorial/01-use/01-traditional-approach.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react';
 2 | import axios from 'axios';
 3 | import { API_URL } from '../../utils';
 4 | 
 5 | type User = {
 6 |   id: string;
 7 |   name: string;
 8 |   email: string;
 9 | };
10 | 
11 | const Component = () => {
12 |   const [users, setUsers] = useState<User[]>([]);
13 |   const [isLoading, setIsLoading] = useState(false);
14 | 
15 |   const fetchUsers = async () => {
16 |     setIsLoading(true);
17 |     try {
18 |       const response = await axios.get(`${API_URL}/users`);
19 |       setUsers(response.data);
20 |     } catch (error) {
21 |       console.log(error);
22 |     } finally {
23 |       setIsLoading(false);
24 |     }
25 |   };
26 | 
27 |   useEffect(() => {
28 |     fetchUsers();
29 |   }, []);
30 | 
31 |   return (
32 |     <div className='p-6 max-w-4xl mx-auto'>
33 |       <h1 className='text-3xl font-bold mb-6'>Users</h1>
34 |       {isLoading ? (
35 |         <p className='text-gray-600'>Loading...</p>
36 |       ) : (
37 |         <ul className='space-y-3'>
38 |           {users.map((user) => (
39 |             <li
40 |               key={user.id}
41 |               className='p-4 rounded-lg bg-white shadow hover:shadow-md transition-shadow'
42 |             >
43 |               <span className='font-medium'>{user.name}</span>
44 |               <span className='text-gray-600 ml-2'>- {user.email}</span>
45 |             </li>
46 |           ))}
47 |         </ul>
48 |       )}
49 |     </div>
50 |   );
51 | };
52 | export default Component;
53 | 


--------------------------------------------------------------------------------
/src/tutorial/03-useFormStatus/02-final.tsx:
--------------------------------------------------------------------------------
 1 | import { useFormStatus } from 'react-dom';
 2 | import { useActionState } from 'react';
 3 | 
 4 | const formAction = async (
 5 |   prevState: string,
 6 |   formData: FormData
 7 | ): Promise<string> => {
 8 |   await new Promise((resolve) => setTimeout(resolve, 2000));
 9 |   console.log(formData);
10 |   return 'success';
11 | };
12 | 
13 | const FirstForm = () => {
14 |   const [status, actionFunction] = useActionState<string, FormData>(
15 |     formAction,
16 |     'idle'
17 |   );
18 |   return (
19 |     <form action={actionFunction} className={formStyles.container}>
20 |       <input type='text' name='name' className={formStyles.input} />
21 |       {status === 'success' && <p>Form submitted successfully</p>}
22 |     </form>
23 |   );
24 | };
25 | 
26 | const SecondForm = () => {
27 |   const [status, actionFunction] = useActionState<string, FormData>(
28 |     formAction,
29 |     'idle'
30 |   );
31 |   return (
32 |     <form action={actionFunction} className={formStyles.container}>
33 |       <input type='text' name='name' className={formStyles.input} />
34 |       {status === 'success' && <p>Form submitted successfully</p>}
35 |     </form>
36 |   );
37 | };
38 | 
39 | const ParentComponent = () => {
40 |   return (
41 |     <>
42 |       <FirstForm />
43 |       <SecondForm />
44 |     </>
45 |   );
46 | };
47 | 
48 | const formStyles = {
49 |   container: 'max-w-md mx-auto mt-24 p-8 space-y-4 bg-white rounded shadow',
50 |   input:
51 |     'w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500',
52 | };
53 | 
54 | export default ParentComponent;
55 | 


--------------------------------------------------------------------------------
/src/final/02-actions/02-action.tsx:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | import { API_URL } from '../../utils';
 3 | 
 4 | const Component = () => {
 5 |   // const formAction = async (formData: FormData): Promise<void> => {
 6 |   //   const name = formData.get('name') as string;
 7 |   //   const email = formData.get('email') as string;
 8 |   //   await new Promise((resolve) => setTimeout(resolve, 2000));
 9 |   //   const response = await axios.post(`${API_URL}/users`, { name, email });
10 |   //   console.log(response.data);
11 |   // };
12 |   const formAction = async (formData: FormData): Promise<void> => {
13 |     const data = Object.fromEntries(formData);
14 |     await new Promise((resolve) => setTimeout(resolve, 2000));
15 |     const response = await axios.post(`${API_URL}/users`, data);
16 |     console.log(response.data);
17 |   };
18 |   return (
19 |     <form action={formAction} className={formStyles.container}>
20 |       <input
21 |         type='text'
22 |         name='name'
23 |         required
24 |         className={formStyles.input}
25 |         placeholder='name'
26 |       />
27 |       <input
28 |         type='email'
29 |         name='email'
30 |         required
31 |         className={formStyles.input}
32 |         placeholder='email'
33 |       />
34 |       <button type='submit' className={formStyles.button}>
35 |         Submit
36 |       </button>
37 |     </form>
38 |   );
39 | };
40 | export default Component;
41 | 
42 | const formStyles = {
43 |   container: 'max-w-md mx-auto mt-24 p-8 space-y-4 bg-white rounded shadow',
44 |   input:
45 |     'w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500',
46 |   button:
47 |     'w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200',
48 | };
49 | 


--------------------------------------------------------------------------------
/src/final/01-use/02-use-approach.tsx:
--------------------------------------------------------------------------------
 1 | import { use, Suspense, useState } from 'react';
 2 | import axios from 'axios';
 3 | import { API_URL } from '../../utils';
 4 | 
 5 | type User = {
 6 |   id: string;
 7 |   name: string;
 8 |   email: string;
 9 | };
10 | 
11 | // Move the data fetching logic outside the component
12 | const fetchUsers = async () => {
13 |   const response = await axios.get(`${API_URL}/users`);
14 |   return response.data as User[];
15 | };
16 | 
17 | const Component = () => {
18 |   // Use the 'use' hook to directly consume the promise
19 |   const users = use(fetchUsers());
20 |   const [count, setCount] = useState(0);
21 | 
22 |   return (
23 |     <div className='p-6 max-w-4xl mx-auto'>
24 |       <button
25 |         className='bg-blue-500 text-white px-4 py-2 rounded-md mb-4'
26 |         onClick={() => setCount(count + 1)}
27 |       >
28 |         Count: {count}
29 |       </button>
30 |       <h1 className='text-3xl font-bold mb-6'>Users</h1>
31 |       <ul className='space-y-3'>
32 |         {users.map((user) => (
33 |           <li
34 |             key={user.id}
35 |             className='p-4 rounded-lg bg-white shadow hover:shadow-md transition-shadow'
36 |           >
37 |             <span className='font-medium'>{user.name}</span>
38 |             <span className='text-gray-600 ml-2'>- {user.email}</span>
39 |           </li>
40 |         ))}
41 |       </ul>
42 |     </div>
43 |   );
44 | };
45 | 
46 | // Wrap the component with Suspense to handle the loading state
47 | const UsersPage = () => {
48 |   return (
49 |     <Suspense
50 |       fallback={
51 |         <p className='p-6 max-w-4xl mx-auto text-gray-600'>Loading...</p>
52 |       }
53 |     >
54 |       <Component />
55 |     </Suspense>
56 |   );
57 | };
58 | 
59 | export default UsersPage;
60 | 


--------------------------------------------------------------------------------
/src/final/03-useFormStatus/01-starter.tsx:
--------------------------------------------------------------------------------
 1 | import { useActionState } from 'react';
 2 | 
 3 | const formAction = async (
 4 |   prevState: string,
 5 |   formData: FormData
 6 | ): Promise<string> => {
 7 |   await new Promise((resolve) => setTimeout(resolve, 2000));
 8 |   console.log(formData);
 9 |   return 'success';
10 | };
11 | 
12 | const FirstForm = () => {
13 |   const [status, actionFunction, isPending] = useActionState<string, FormData>(
14 |     formAction,
15 |     'idle'
16 |   );
17 |   return (
18 |     <form action={actionFunction} className={formStyles.container}>
19 |       <input type='text' name='name' className={formStyles.input} />
20 |       <button type='submit' className={formStyles.button} disabled={isPending}>
21 |         Submit
22 |       </button>
23 |       {status === 'success' && <p>Form submitted successfully</p>}
24 |     </form>
25 |   );
26 | };
27 | 
28 | const SecondForm = () => {
29 |   const [status, actionFunction, isPending] = useActionState<string, FormData>(
30 |     formAction,
31 |     'idle'
32 |   );
33 |   return (
34 |     <form action={actionFunction} className={formStyles.container}>
35 |       <input type='text' name='name' className={formStyles.input} />
36 |       <button type='submit' className={formStyles.button} disabled={isPending}>
37 |         Submit
38 |       </button>
39 |       {status === 'success' && <p>Form submitted successfully</p>}
40 |     </form>
41 |   );
42 | };
43 | 
44 | const ParentComponent = () => {
45 |   return (
46 |     <>
47 |       <FirstForm />
48 |       <SecondForm />
49 |     </>
50 |   );
51 | };
52 | 
53 | const formStyles = {
54 |   container: 'max-w-md mx-auto mt-24 p-8 space-y-4 bg-white rounded shadow',
55 |   input:
56 |     'w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500',
57 |   button:
58 |     'w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200',
59 | };
60 | 
61 | export default ParentComponent;
62 | 


--------------------------------------------------------------------------------
/src/tutorial/03-useFormStatus/01-starter.tsx:
--------------------------------------------------------------------------------
 1 | import { useActionState } from 'react';
 2 | 
 3 | const formAction = async (
 4 |   prevState: string,
 5 |   formData: FormData
 6 | ): Promise<string> => {
 7 |   await new Promise((resolve) => setTimeout(resolve, 2000));
 8 |   console.log(formData);
 9 |   return 'success';
10 | };
11 | 
12 | const FirstForm = () => {
13 |   const [status, actionFunction, isPending] = useActionState<string, FormData>(
14 |     formAction,
15 |     'idle'
16 |   );
17 |   return (
18 |     <form action={actionFunction} className={formStyles.container}>
19 |       <input type='text' name='name' className={formStyles.input} />
20 |       <button type='submit' className={formStyles.button} disabled={isPending}>
21 |         Submit
22 |       </button>
23 |       {status === 'success' && <p>Form submitted successfully</p>}
24 |     </form>
25 |   );
26 | };
27 | 
28 | const SecondForm = () => {
29 |   const [status, actionFunction, isPending] = useActionState<string, FormData>(
30 |     formAction,
31 |     'idle'
32 |   );
33 |   return (
34 |     <form action={actionFunction} className={formStyles.container}>
35 |       <input type='text' name='name' className={formStyles.input} />
36 |       <button type='submit' className={formStyles.button} disabled={isPending}>
37 |         Submit
38 |       </button>
39 |       {status === 'success' && <p>Form submitted successfully</p>}
40 |     </form>
41 |   );
42 | };
43 | 
44 | const ParentComponent = () => {
45 |   return (
46 |     <>
47 |       <FirstForm />
48 |       <SecondForm />
49 |     </>
50 |   );
51 | };
52 | 
53 | const formStyles = {
54 |   container: 'max-w-md mx-auto mt-24 p-8 space-y-4 bg-white rounded shadow',
55 |   input:
56 |     'w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500',
57 |   button:
58 |     'w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200',
59 | };
60 | 
61 | export default ParentComponent;
62 | 


--------------------------------------------------------------------------------
/src/final/02-actions/03-hook.tsx:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | import { useActionState } from 'react';
 3 | import { API_URL } from '../../utils';
 4 | 
 5 | const formAction = async (
 6 |   prevState: string,
 7 |   formData: FormData
 8 | ): Promise<string> => {
 9 |   try {
10 |     const data = Object.fromEntries(formData);
11 |     await new Promise((resolve) => setTimeout(resolve, 2000));
12 |     if (data.name === 'bobo') {
13 |       throw new Error('Name is invalid');
14 |     }
15 |     const response = await axios.post(`${API_URL}/users`, data);
16 |     console.log(response.data);
17 |     return 'success';
18 |   } catch (error) {
19 |     return 'error';
20 |   }
21 | };
22 | 
23 | const Component = () => {
24 |   const [status, actionFunction, isPending] = useActionState<string, FormData>(
25 |     formAction,
26 |     'idle'
27 |   );
28 | 
29 |   return (
30 |     <form action={actionFunction} className={formStyles.container}>
31 |       <input
32 |         type='text'
33 |         name='name'
34 |         required
35 |         className={formStyles.input}
36 |         placeholder='name'
37 |       />
38 |       <input
39 |         type='email'
40 |         name='email'
41 |         required
42 |         className={formStyles.input}
43 |         placeholder='email'
44 |       />
45 |       <button type='submit' className={formStyles.button} disabled={isPending}>
46 |         {isPending ? 'Submitting...' : 'Submit'}
47 |       </button>
48 |       {status === 'error' && <p className='text-red-500 mt-2'>Error !!!</p>}
49 |       {status === 'success' && (
50 |         <p className='text-green-500 mt-2'>Success !!!</p>
51 |       )}
52 |     </form>
53 |   );
54 | };
55 | export default Component;
56 | 
57 | const formStyles = {
58 |   container: 'max-w-md mx-auto mt-24 p-8 space-y-4 bg-white rounded shadow',
59 |   input:
60 |     'w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500',
61 |   button:
62 |     'w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200',
63 | };
64 | 


--------------------------------------------------------------------------------
/src/final/03-useFormStatus/02-final.tsx:
--------------------------------------------------------------------------------
 1 | import { useFormStatus } from 'react-dom';
 2 | import { useActionState } from 'react';
 3 | 
 4 | const SubmitButton = () => {
 5 |   const { pending } = useFormStatus();
 6 | 
 7 |   const btnStyles =
 8 |     'w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200';
 9 |   return (
10 |     <button type='submit' className={btnStyles}>
11 |       {pending ? 'Submitting...' : 'Submit'}
12 |     </button>
13 |   );
14 | };
15 | 
16 | const formAction = async (
17 |   prevState: string,
18 |   formData: FormData
19 | ): Promise<string> => {
20 |   await new Promise((resolve) => setTimeout(resolve, 2000));
21 |   console.log(formData);
22 |   return 'success';
23 | };
24 | 
25 | const FirstForm = () => {
26 |   const [status, actionFunction] = useActionState<string, FormData>(
27 |     formAction,
28 |     'idle'
29 |   );
30 |   return (
31 |     <form action={actionFunction} className={formStyles.container}>
32 |       <input type='text' name='name' className={formStyles.input} />
33 |       <SubmitButton />
34 |       {status === 'success' && <p>Form submitted successfully</p>}
35 |     </form>
36 |   );
37 | };
38 | 
39 | const SecondForm = () => {
40 |   const [status, actionFunction] = useActionState<string, FormData>(
41 |     formAction,
42 |     'idle'
43 |   );
44 |   return (
45 |     <form action={actionFunction} className={formStyles.container}>
46 |       <input type='text' name='name' className={formStyles.input} />
47 |       <SubmitButton />
48 |       {status === 'success' && <p>Form submitted successfully</p>}
49 |     </form>
50 |   );
51 | };
52 | 
53 | const ParentComponent = () => {
54 |   return (
55 |     <>
56 |       <FirstForm />
57 |       <SecondForm />
58 |     </>
59 |   );
60 | };
61 | 
62 | const formStyles = {
63 |   container: 'max-w-md mx-auto mt-24 p-8 space-y-4 bg-white rounded shadow',
64 |   input:
65 |     'w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500',
66 | };
67 | 
68 | export default ParentComponent;
69 | 


--------------------------------------------------------------------------------
/src/final/02-actions/04-complex.tsx:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | import { useActionState } from 'react';
 3 | import { API_URL } from '../../utils';
 4 | type Status = 'success' | 'error' | 'idle';
 5 | type FormState = { status: Status; name: string };
 6 | 
 7 | const formAction = async (
 8 |   prevState: FormState,
 9 |   formData: FormData
10 | ): Promise<FormState> => {
11 |   try {
12 |     const data = Object.fromEntries(formData);
13 |     await new Promise((resolve) => setTimeout(resolve, 2000));
14 |     if (data.name === 'bobo') {
15 |       throw new Error('Name is invalid');
16 |     }
17 |     const response = await axios.post(`${API_URL}/users`, data);
18 |     console.log(response.data);
19 |     return { status: 'success', name: data.name as string };
20 |   } catch (error) {
21 |     return { status: 'error', name: prevState.name };
22 |   }
23 | };
24 | 
25 | const Component = () => {
26 |   const [state, actionFunction, isPending] = useActionState<
27 |     FormState,
28 |     FormData
29 |   >(formAction, {
30 |     status: 'idle',
31 |     name: '',
32 |   });
33 | 
34 |   return (
35 |     <form action={actionFunction} className={formStyles.container}>
36 |       {!isPending && state.name && (
37 |         <p className='text-2xl font-bold capitalize'>
38 |           last user : {state.name}
39 |         </p>
40 |       )}
41 |       <input
42 |         type='text'
43 |         name='name'
44 |         required
45 |         className={formStyles.input}
46 |         placeholder='name'
47 |       />
48 |       <input
49 |         type='email'
50 |         name='email'
51 |         required
52 |         className={formStyles.input}
53 |         placeholder='email'
54 |       />
55 |       <button type='submit' className={formStyles.button} disabled={isPending}>
56 |         {isPending ? 'Submitting...' : 'Submit'}
57 |       </button>
58 |       {!isPending && state?.status === 'error' && (
59 |         <p className='text-red-500 mt-2'>Error !!!</p>
60 |       )}
61 |       {!isPending && state?.status === 'success' && (
62 |         <p className='text-green-500 mt-2'>Success !!!</p>
63 |       )}
64 |     </form>
65 |   );
66 | };
67 | export default Component;
68 | 
69 | const formStyles = {
70 |   container: 'max-w-md mx-auto mt-24 p-8 space-y-4 bg-white rounded shadow',
71 |   input:
72 |     'w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500',
73 |   button:
74 |     'w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200',
75 | };
76 | 


--------------------------------------------------------------------------------
/src/final/02-actions/01-traditional-approach.tsx:
--------------------------------------------------------------------------------
 1 | import { useState, FormEvent } from 'react';
 2 | import axios from 'axios';
 3 | import { API_URL } from '../../utils';
 4 | type Status = 'success' | 'error' | 'idle';
 5 | 
 6 | const Component = () => {
 7 |   const [name, setName] = useState('');
 8 |   const [email, setEmail] = useState('');
 9 |   const [isPending, setIsPending] = useState(false);
10 |   const [status, setStatus] = useState<Status>('idle');
11 | 
12 |   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
13 |     e.preventDefault();
14 |     setIsPending(true);
15 |     setStatus('idle');
16 | 
17 |     try {
18 |       await new Promise((resolve) => setTimeout(resolve, 1000));
19 |       if (name === 'bobo') {
20 |         throw new Error('Name is invalid');
21 |       }
22 |       const response = await axios.post(`${API_URL}/users`, {
23 |         name,
24 |         email,
25 |       });
26 |       console.log(response.data);
27 |       // Clear form after successful submission
28 |       setName('');
29 |       setEmail('');
30 |       setStatus('success');
31 |     } catch (err) {
32 |       setStatus('error');
33 |     } finally {
34 |       setIsPending(false);
35 |     }
36 |   };
37 | 
38 |   return (
39 |     <form onSubmit={handleSubmit} className={formStyles.container}>
40 |       <input
41 |         type='text'
42 |         name='name'
43 |         value={name}
44 |         onChange={(e) => setName(e.target.value)}
45 |         required
46 |         className={formStyles.input}
47 |         placeholder='name'
48 |       />
49 |       <input
50 |         type='email'
51 |         name='email'
52 |         value={email}
53 |         onChange={(e) => setEmail(e.target.value)}
54 |         required
55 |         className={formStyles.input}
56 |         placeholder='email'
57 |       />
58 |       <button type='submit' className={formStyles.button} disabled={isPending}>
59 |         {isPending ? 'Submitting...' : 'Submit'}
60 |       </button>
61 |       {status === 'error' && <p className='text-red-500 mt-2'>Error !!!</p>}
62 |       {status === 'success' && (
63 |         <p className='text-green-500 mt-2'>Success !!!</p>
64 |       )}
65 |     </form>
66 |   );
67 | };
68 | export default Component;
69 | 
70 | const formStyles = {
71 |   container: 'max-w-md mx-auto mt-24 p-8 space-y-4 bg-white rounded shadow',
72 |   input:
73 |     'w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500',
74 |   button:
75 |     'w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200',
76 | };
77 | 


--------------------------------------------------------------------------------
/src/tutorial/02-actions/01-traditional-approach.tsx:
--------------------------------------------------------------------------------
 1 | import { useState, FormEvent } from 'react';
 2 | import axios from 'axios';
 3 | import { API_URL } from '../../utils';
 4 | type Status = 'success' | 'error' | 'idle';
 5 | 
 6 | const Component = () => {
 7 |   const [name, setName] = useState('');
 8 |   const [email, setEmail] = useState('');
 9 |   const [isPending, setIsPending] = useState(false);
10 |   const [status, setStatus] = useState<Status>('idle');
11 | 
12 |   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
13 |     e.preventDefault();
14 |     setIsPending(true);
15 |     setStatus('idle');
16 | 
17 |     try {
18 |       await new Promise((resolve) => setTimeout(resolve, 1000));
19 |       if (name === 'bobo') {
20 |         throw new Error('Name is invalid');
21 |       }
22 |       const response = await axios.post(`${API_URL}/users`, {
23 |         name,
24 |         email,
25 |       });
26 |       console.log(response.data);
27 |       // Clear form after successful submission
28 |       setName('');
29 |       setEmail('');
30 |       setStatus('success');
31 |     } catch (err) {
32 |       setStatus('error');
33 |     } finally {
34 |       setIsPending(false);
35 |     }
36 |   };
37 | 
38 |   return (
39 |     <form onSubmit={handleSubmit} className={formStyles.container}>
40 |       <input
41 |         type='text'
42 |         name='name'
43 |         value={name}
44 |         onChange={(e) => setName(e.target.value)}
45 |         required
46 |         className={formStyles.input}
47 |         placeholder='name'
48 |       />
49 |       <input
50 |         type='email'
51 |         name='email'
52 |         value={email}
53 |         onChange={(e) => setEmail(e.target.value)}
54 |         required
55 |         className={formStyles.input}
56 |         placeholder='email'
57 |       />
58 |       <button type='submit' className={formStyles.button} disabled={isPending}>
59 |         {isPending ? 'Submitting...' : 'Submit'}
60 |       </button>
61 |       {status === 'error' && <p className='text-red-500 mt-2'>Error !!!</p>}
62 |       {status === 'success' && (
63 |         <p className='text-green-500 mt-2'>Success !!!</p>
64 |       )}
65 |     </form>
66 |   );
67 | };
68 | export default Component;
69 | 
70 | const formStyles = {
71 |   container: 'max-w-md mx-auto mt-24 p-8 space-y-4 bg-white rounded shadow',
72 |   input:
73 |     'w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500',
74 |   button:
75 |     'w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200',
76 | };
77 | 


--------------------------------------------------------------------------------
/src/tutorial/04-useOptimistic/02-final.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   useEffect,
  3 |   useState,
  4 |   useActionState,
  5 |   useOptimistic,
  6 |   useTransition,
  7 | } from 'react';
  8 | import { useFormStatus } from 'react-dom';
  9 | import axios from 'axios';
 10 | import { API_URL } from '../../utils';
 11 | 
 12 | type FormState = {
 13 |   error: string | null;
 14 |   success: boolean;
 15 | };
 16 | 
 17 | type Todo = {
 18 |   id: string;
 19 |   text: string;
 20 |   completed: boolean;
 21 | };
 22 | 
 23 | function SubmitButton() {
 24 |   const { pending } = useFormStatus();
 25 | 
 26 |   return (
 27 |     <button
 28 |       type='submit'
 29 |       disabled={pending}
 30 |       className='px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none disabled:bg-blue-300'
 31 |     >
 32 |       {pending ? 'Adding...' : 'Add'}
 33 |     </button>
 34 |   );
 35 | }
 36 | 
 37 | const TodoList = () => {
 38 |   const [todos, setTodos] = useState<Todo[]>([]);
 39 | 
 40 |   const [formState, formAction] = useActionState<FormState, FormData>(
 41 |     async (prevState: FormState, formData: FormData): Promise<FormState> => {
 42 |       const text = formData.get('todo') as string;
 43 |       if (!text?.trim()) {
 44 |         return { error: 'Todo text is required !!!', success: false };
 45 |       }
 46 |       try {
 47 |         // Actual API call
 48 |         await axios.post(`${API_URL}/todos`, { text, completed: false });
 49 |         await fetchTodos(); // Refresh the list
 50 |         return { error: null, success: true };
 51 |       } catch (error) {
 52 |         return { error: 'Failed to add todo', success: false };
 53 |       }
 54 |     },
 55 |     { error: null, success: false }
 56 |   );
 57 | 
 58 |   const fetchTodos = async () => {
 59 |     const response = await axios.get(`${API_URL}/todos`);
 60 |     setTodos(response.data);
 61 |   };
 62 | 
 63 |   const toggleTodo = (todo: Todo) => todo;
 64 | 
 65 |   useEffect(() => {
 66 |     fetchTodos();
 67 |   }, []);
 68 | 
 69 |   return (
 70 |     <div className='max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-lg'>
 71 |       <h1 className='text-2xl font-bold mb-6 text-gray-800'>Todo List</h1>
 72 | 
 73 |       <ul className='space-y-3 mb-6'>
 74 |         {todos.map((todo) => (
 75 |           <li
 76 |             key={todo.id}
 77 |             className='flex items-center gap-3 p-2 bg-gray-50 rounded'
 78 |           >
 79 |             <input
 80 |               type='checkbox'
 81 |               checked={todo.completed}
 82 |               onChange={() => toggleTodo(todo)}
 83 |               className='h-5 w-5 rounded border-gray-300'
 84 |             />
 85 |             <span
 86 |               className={`flex-1 ${
 87 |                 todo.completed ? 'line-through text-gray-500' : 'text-gray-800'
 88 |               }`}
 89 |             >
 90 |               {todo.id} {todo.text}
 91 |             </span>
 92 |           </li>
 93 |         ))}
 94 |       </ul>
 95 | 
 96 |       <form className='flex gap-2'>
 97 |         <input
 98 |           type='text'
 99 |           name='todo'
100 |           placeholder='Add new todo...'
101 |           className='flex-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500'
102 |         />
103 |         <SubmitButton />
104 |         {formState.success && <p className='mt-2 text-green-500'>Success!!!</p>}
105 |         {formState.error && (
106 |           <p className='mt-2 text-red-500'>{formState.error}</p>
107 |         )}
108 |       </form>
109 |     </div>
110 |   );
111 | };
112 | 
113 | export default TodoList;
114 | 


--------------------------------------------------------------------------------
/src/final/04-useOptimistic/01-starter.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState, useActionState } from 'react';
  2 | import { useFormStatus } from 'react-dom';
  3 | import axios from 'axios';
  4 | import { API_URL } from '../../utils';
  5 | 
  6 | type FormState = {
  7 |   error: string | null;
  8 |   success: boolean;
  9 | };
 10 | 
 11 | type Todo = {
 12 |   id: string;
 13 |   text: string;
 14 |   completed: boolean;
 15 | };
 16 | 
 17 | function SubmitButton() {
 18 |   const { pending } = useFormStatus();
 19 | 
 20 |   return (
 21 |     <button
 22 |       type='submit'
 23 |       disabled={pending}
 24 |       className='px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none disabled:bg-blue-300'
 25 |     >
 26 |       {pending ? 'Adding...' : 'Add'}
 27 |     </button>
 28 |   );
 29 | }
 30 | 
 31 | const TodoList = () => {
 32 |   const [todos, setTodos] = useState<Todo[]>([]);
 33 | 
 34 |   const fetchTodos = async () => {
 35 |     await new Promise((resolve) => setTimeout(resolve, 2000));
 36 |     const response = await axios.get(`${API_URL}/todos`);
 37 |     setTodos(response.data);
 38 |   };
 39 |   // Action handler for form submission
 40 |   const [formState, formAction] = useActionState<FormState, FormData>(
 41 |     async (prevState: FormState, formData: FormData): Promise<FormState> => {
 42 |       const text = formData.get('todo') as string;
 43 |       if (!text?.trim()) {
 44 |         return { error: 'Todo text is required !!!', success: false };
 45 |       }
 46 |       try {
 47 |         // Actual API call
 48 |         await axios.post(`${API_URL}/todos`, { text, completed: false });
 49 |         await fetchTodos(); // Refresh the list
 50 |         return { error: null, success: true };
 51 |       } catch (error) {
 52 |         return { error: 'Failed to add todo', success: false };
 53 |       }
 54 |     },
 55 |     { error: null, success: false }
 56 |   );
 57 | 
 58 |   const toggleTodo = async (todo: Todo) => {
 59 |     try {
 60 |       await axios.put(`${API_URL}/todos/${todo.id}`, {
 61 |         ...todo,
 62 |         completed: !todo.completed,
 63 |       });
 64 |       await fetchTodos();
 65 |     } catch (error) {
 66 |       console.error('Failed to update todo:', error);
 67 |     }
 68 |   };
 69 | 
 70 |   useEffect(() => {
 71 |     fetchTodos();
 72 |   }, []);
 73 | 
 74 |   return (
 75 |     <div className='max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-lg'>
 76 |       <h1 className='text-2xl font-bold mb-6 text-gray-800'>Todo List</h1>
 77 | 
 78 |       <ul className='space-y-3 mb-6'>
 79 |         {todos.map((todo) => (
 80 |           <li
 81 |             key={todo.id}
 82 |             className='flex items-center gap-3 p-2 bg-gray-50 rounded'
 83 |           >
 84 |             <input
 85 |               type='checkbox'
 86 |               checked={todo.completed}
 87 |               onChange={() => toggleTodo(todo)}
 88 |               className='h-5 w-5 rounded border-gray-300'
 89 |             />
 90 |             <span
 91 |               className={`flex-1 ${
 92 |                 todo.completed ? 'line-through text-gray-500' : 'text-gray-800'
 93 |               }`}
 94 |             >
 95 |               {todo.id} {todo.text}
 96 |             </span>
 97 |           </li>
 98 |         ))}
 99 |       </ul>
100 | 
101 |       <form action={formAction} className='flex gap-2'>
102 |         <input
103 |           type='text'
104 |           name='todo'
105 |           placeholder='Add new todo...'
106 |           className='flex-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500'
107 |         />
108 |         <SubmitButton />
109 |       </form>
110 |       {formState.success && <p className='mt-2 text-green-500'>Success!!!</p>}
111 |       {formState.error && (
112 |         <p className='mt-2 text-red-500'>{formState.error}</p>
113 |       )}
114 |     </div>
115 |   );
116 | };
117 | 
118 | export default TodoList;
119 | 


--------------------------------------------------------------------------------
/src/tutorial/04-useOptimistic/01-starter.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState, useActionState } from 'react';
  2 | import { useFormStatus } from 'react-dom';
  3 | import axios from 'axios';
  4 | import { API_URL } from '../../utils';
  5 | 
  6 | type FormState = {
  7 |   error: string | null;
  8 |   success: boolean;
  9 | };
 10 | 
 11 | type Todo = {
 12 |   id: string;
 13 |   text: string;
 14 |   completed: boolean;
 15 | };
 16 | 
 17 | function SubmitButton() {
 18 |   const { pending } = useFormStatus();
 19 | 
 20 |   return (
 21 |     <button
 22 |       type='submit'
 23 |       disabled={pending}
 24 |       className='px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none disabled:bg-blue-300'
 25 |     >
 26 |       {pending ? 'Adding...' : 'Add'}
 27 |     </button>
 28 |   );
 29 | }
 30 | 
 31 | const TodoList = () => {
 32 |   const [todos, setTodos] = useState<Todo[]>([]);
 33 | 
 34 |   const fetchTodos = async () => {
 35 |     await new Promise((resolve) => setTimeout(resolve, 2000));
 36 |     const response = await axios.get(`${API_URL}/todos`);
 37 |     setTodos(response.data);
 38 |   };
 39 |   // Action handler for form submission
 40 |   const [formState, formAction] = useActionState<FormState, FormData>(
 41 |     async (prevState: FormState, formData: FormData): Promise<FormState> => {
 42 |       const text = formData.get('todo') as string;
 43 |       if (!text?.trim()) {
 44 |         return { error: 'Todo text is r equired !!!', success: false };
 45 |       }
 46 |       try {
 47 |         // Actual API call
 48 |         await axios.post(`${API_URL}/todos`, { text, completed: false });
 49 |         await fetchTodos(); // Refresh the list
 50 |         return { error: null, success: true };
 51 |       } catch (error) {
 52 |         return { error: 'Failed to add todo', success: false };
 53 |       }
 54 |     },
 55 |     { error: null, success: false }
 56 |   );
 57 | 
 58 |   const toggleTodo = async (todo: Todo) => {
 59 |     try {
 60 |       await axios.put(`${API_URL}/todos/${todo.id}`, {
 61 |         ...todo,
 62 |         completed: !todo.completed,
 63 |       });
 64 |       await fetchTodos();
 65 |     } catch (error) {
 66 |       console.error('Failed to update todo:', error);
 67 |     }
 68 |   };
 69 | 
 70 |   useEffect(() => {
 71 |     fetchTodos();
 72 |   }, []);
 73 | 
 74 |   return (
 75 |     <div className='max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-lg'>
 76 |       <h1 className='text-2xl font-bold mb-6 text-gray-800'>Todo List</h1>
 77 | 
 78 |       <ul className='space-y-3 mb-6'>
 79 |         {todos.map((todo) => (
 80 |           <li
 81 |             key={todo.id}
 82 |             className='flex items-center gap-3 p-2 bg-gray-50 rounded'
 83 |           >
 84 |             <input
 85 |               type='checkbox'
 86 |               checked={todo.completed}
 87 |               onChange={() => toggleTodo(todo)}
 88 |               className='h-5 w-5 rounded border-gray-300'
 89 |             />
 90 |             <span
 91 |               className={`flex-1 ${
 92 |                 todo.completed ? 'line-through text-gray-500' : 'text-gray-800'
 93 |               }`}
 94 |             >
 95 |               {todo.id} {todo.text}
 96 |             </span>
 97 |           </li>
 98 |         ))}
 99 |       </ul>
100 | 
101 |       <form action={formAction} className='flex gap-2'>
102 |         <input
103 |           type='text'
104 |           name='todo'
105 |           placeholder='Add new todo...'
106 |           className='flex-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500'
107 |         />
108 |         <SubmitButton />
109 |       </form>
110 |       {formState.success && <p className='mt-2 text-green-500'>Success!!!</p>}
111 |       {formState.error && (
112 |         <p className='mt-2 text-red-500'>{formState.error}</p>
113 |       )}
114 |     </div>
115 |   );
116 | };
117 | 
118 | export default TodoList;
119 | 


--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/src/final/04-useOptimistic/02-final.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   useEffect,
  3 |   useState,
  4 |   useActionState,
  5 |   useOptimistic,
  6 |   useTransition,
  7 | } from 'react';
  8 | import { useFormStatus } from 'react-dom';
  9 | import axios from 'axios';
 10 | import { API_URL } from '../../utils';
 11 | 
 12 | type FormState = {
 13 |   error: string | null;
 14 |   success: boolean;
 15 | };
 16 | 
 17 | type Todo = {
 18 |   id: string;
 19 |   text: string;
 20 |   completed: boolean;
 21 | };
 22 | 
 23 | function SubmitButton() {
 24 |   const { pending } = useFormStatus();
 25 | 
 26 |   return (
 27 |     <button
 28 |       type='submit'
 29 |       disabled={pending}
 30 |       className='px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none disabled:bg-blue-300'
 31 |     >
 32 |       {pending ? 'Adding...' : 'Add'}
 33 |     </button>
 34 |   );
 35 | }
 36 | 
 37 | const TodoList = () => {
 38 |   const [todos, setTodos] = useState<Todo[]>([]);
 39 |   const [optimisticTodos, setOptimisticTodos] = useOptimistic<Todo[]>(todos);
 40 |   const [isPending, startTransition] = useTransition();
 41 | 
 42 |   const fetchTodos = async () => {
 43 |     const response = await axios.get(`${API_URL}/todos`);
 44 |     setTodos(response.data);
 45 |   };
 46 |   // Action handler for form submission
 47 |   const [formState, formAction] = useActionState<FormState, FormData>(
 48 |     async (prevState: FormState, formData: FormData): Promise<FormState> => {
 49 |       const text = formData.get('todo') as string;
 50 |       if (!text?.trim()) {
 51 |         return { error: 'Todo text is required !!!', success: false };
 52 |       }
 53 |       try {
 54 |         //
 55 |         setOptimisticTodos((prevTodos) => [
 56 |           ...prevTodos,
 57 |           { id: 'OPTIMISTIC : ', text, completed: false },
 58 |         ]);
 59 |         // Actual API call
 60 |         await axios.post(`${API_URL}/todos`, { text, completed: false });
 61 |         await fetchTodos(); // Refresh the list
 62 |         return { error: null, success: true };
 63 |       } catch (error) {
 64 |         return { error: 'Failed to add todo', success: false };
 65 |       }
 66 |     },
 67 |     { error: null, success: false }
 68 |   );
 69 | 
 70 |   const toggleTodo = (todo: Todo) => {
 71 |     startTransition(async () => {
 72 |       const todoToUpdate = { ...todo, completed: !todo.completed };
 73 |       setOptimisticTodos((prevTodos) =>
 74 |         prevTodos.map((t) => (t.id === todo.id ? todoToUpdate : t))
 75 |       );
 76 |       try {
 77 |         await new Promise((resolve) => setTimeout(resolve, 2000));
 78 |         await axios.put(`${API_URL}/todos/${todo.id}`, {
 79 |           ...todo,
 80 |           completed: !todo.completed,
 81 |         });
 82 |         await fetchTodos();
 83 |       } catch (error) {
 84 |         setOptimisticTodos((prevTodos) =>
 85 |           prevTodos.map((t) => (t.id === todo.id ? todo : t))
 86 |         );
 87 |       }
 88 |     });
 89 |   };
 90 | 
 91 |   useEffect(() => {
 92 |     fetchTodos();
 93 |   }, []);
 94 | 
 95 |   return (
 96 |     <div className='max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-lg'>
 97 |       <h1 className='text-2xl font-bold mb-6 text-gray-800'>Todo List</h1>
 98 | 
 99 |       <ul className='space-y-3 mb-6'>
100 |         {optimisticTodos.map((todo) => (
101 |           <li
102 |             key={todo.id}
103 |             className='flex items-center gap-3 p-2 bg-gray-50 rounded'
104 |           >
105 |             <input
106 |               type='checkbox'
107 |               checked={todo.completed}
108 |               onChange={() => toggleTodo(todo)}
109 |               className='h-5 w-5 rounded border-gray-300'
110 |             />
111 |             <span
112 |               className={`flex-1 ${
113 |                 todo.completed ? 'line-through text-gray-500' : 'text-gray-800'
114 |               }`}
115 |             >
116 |               {todo.id} {todo.text}
117 |             </span>
118 |           </li>
119 |         ))}
120 |       </ul>
121 | 
122 |       <form action={formAction} className='flex gap-2'>
123 |         <input
124 |           type='text'
125 |           name='todo'
126 |           placeholder='Add new todo...'
127 |           className='flex-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500'
128 |         />
129 |         <SubmitButton />
130 |       </form>
131 |       {formState.success && <p className='mt-2 text-green-500'>Success!!!</p>}
132 |       {formState.error && (
133 |         <p className='mt-2 text-red-500'>{formState.error}</p>
134 |       )}
135 |     </div>
136 |   );
137 | };
138 | 
139 | export default TodoList;
140 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React 19 Tutorial
  2 | 
  3 | ## Bootstrap Project
  4 | 
  5 | - `npm i `
  6 | - `npm run dev`
  7 | 
  8 | ## Project Overview
  9 | 
 10 | Will cover the entire setup of the project (step by step) towards the end of the tutorial.
 11 | 
 12 | Boilerplate Vite React-TS. Added:
 13 | 
 14 | - latest react and react-dom, as well as types for both
 15 | - JSON Server for mock API (localhost:3001)
 16 |   [JSON Server](https://www.npmjs.com/package/json-server)
 17 | - Axios for API calls
 18 | - TailwindCSS for styling
 19 | - src/utils.ts for API_URL
 20 | 
 21 | Reference package.json
 22 | 
 23 | ## React 19
 24 | 
 25 | - src/final - complete source code
 26 | - src/tutorial - sandbox for each step where we will test the features
 27 | 
 28 | ## use
 29 | 
 30 | use is a React API that lets you read the value of a resource like a Promise or context.
 31 | 
 32 | - Key Features:
 33 | - More flexible than traditional hooks - can be used in loops and conditionals
 34 | - Works with both Promises and Context
 35 | - Integrates with Suspense and Error Boundaries- Can be used anywhere in a component (not just at the top level)
 36 | 
 37 | Common Use Cases:
 38 | 
 39 | ```tsx
 40 | // Reading Context
 41 | const theme = use(ThemeContext);
 42 | 
 43 | // Handling Promises
 44 | function Message({ messagePromise }) {
 45 |   const message = use(messagePromise);
 46 |   return <p>{message}</p>;
 47 | }
 48 | ```
 49 | 
 50 | Important Notes:
 51 | 
 52 | - Must be called inside a Component or Hook
 53 | - For Server Components, prefer async/await over use
 54 | - When using with Promises, wrap components in Suspense/Error Boundaries
 55 | - Cannot be used in try-catch blocks
 56 | 
 57 | Best Practice:
 58 | 
 59 | ```tsx
 60 | // Preferred: Create Promises in Server Components
 61 | <Suspense fallback={<Loading />}>
 62 |   <ClientComponent messagePromise={serverPromise} />
 63 | </Suspense>
 64 | ```
 65 | 
 66 | ## React Actions
 67 | 
 68 | - React 19 introduced a new way to handle form submissions using the `action` attribute.
 69 | - This approach simplifies form handling and provides built-in loading states and error handling.
 70 | - if you are familiar with `server actions` in Next.js, you will feel right at home.
 71 | 
 72 | Evolution of Form Handling
 73 | 
 74 | 1. Traditional HTML Forms
 75 | 
 76 | ```tsx
 77 | <form action='/api/submit' method='POST'>
 78 |   <input name='data' />
 79 |   <button type='submit'>Submit</button>
 80 | </form>
 81 | ```
 82 | 
 83 | - Simple but requires page refresh
 84 | - No built-in state management
 85 | - Limited user feedback
 86 | 
 87 | 2. React's Traditional Approach
 88 | 
 89 | ```tsx
 90 | function Form() {
 91 |   const [isPending, setIsPending] = useState(false);
 92 | 
 93 |   const handleSubmit = async (e) => {
 94 |     e.preventDefault();
 95 |     setIsPending(true);
 96 |     // handle submission
 97 |   };
 98 | 
 99 |   return <form onSubmit={handleSubmit}>...</form>;
100 | }
101 | ```
102 | 
103 | - Client-side handling
104 | - Manual state management
105 | - Requires preventDefault()
106 | - requires handling loading and error states
107 | 
108 | 3. New React Actions (React 19)
109 | 
110 | ```tsx
111 | function Form() {
112 |   async function formAction(formData: FormData) {
113 |     // handle submission
114 |   }
115 | 
116 |   return <form action={formAction}>...</form>;
117 | }
118 | ```
119 | 
120 | - No preventDefault() needed
121 | - Automatic FormData handling
122 | - Form reset on success
123 | 
124 | - Built-in loading state (useActionState)
125 | - easier Error handling (useActionState)
126 | 
127 | ## useActionState hook
128 | 
129 | useActionState Hook
130 | 
131 | Purpose
132 | 
133 | A React hook that manages state for asynchronous actions, particularly useful for form submissions.
134 | 
135 | ```tsx
136 | const [state, dispatch, isPending] = useActionState(action, initialState);
137 | ```
138 | 
139 | Returns
140 | 
141 | - state: Current state value
142 | - dispatch: Function to trigger the action
143 | - isPending: Boolean indicating if action is processing
144 | 
145 | Example
146 | 
147 | ```tsx
148 | function Form() {
149 |   const [state, formAction, isPending] = useActionState(
150 |     async (prevState, formData) => {
151 |       // Process form data
152 |       return { status: 'success' };
153 |     },
154 |     { status: 'idle' }
155 |   );
156 | 
157 |   return (
158 |     <form action={formAction}>
159 |       <button disabled={isPending}>
160 |         {isPending ? 'Submitting...' : 'Submit'}
161 |       </button>
162 |     </form>
163 |   );
164 | }
165 | ```
166 | 
167 | Key Points
168 | 
169 | - Combines state management with async actions
170 | - Automatically handles loading states
171 | - Type-safe when used with TypeScript
172 | - Designed to work with form submissions
173 | - Similar to useReducer but with built-in async support
174 | 
175 | Types
176 | 
177 | ```tsx
178 | useActionState<StateType, PayloadType>(action, initialState);
179 | ```
180 | 
181 | ## useFormStatus hook
182 | 
183 | ## useOptimistic hook
184 | 
185 | ## useTransition hook
186 | 
187 | ## compiler
188 | 
189 | will cover at the very end of the tutorial
190 | 
191 | ## Create React 19 TypeScript Project
192 | 
193 | - Node.js Version ?
194 | 
195 | ### Bootstrap Vite Project
196 | 
197 | ```bash
198 | npm create vite@latest react-19-tutorial  -- --template react-ts
199 | ```
200 | 
201 | ### React 19
202 | 
203 | ```json
204 | "dependencies": {
205 |   "react": "^18.3.1",
206 |   "react-dom": "^18.3.1"
207 | }
208 | ```
209 | 
210 | ### React 19
211 | 
212 | libraries
213 | 
214 | ```bash
215 | npm install react@19.0.0 react-dom@19.0.0
216 | ```
217 | 
218 | types
219 | 
220 | ```bash
221 | npm install --save-exact @types/react@^19.0.0 @types/react-dom@^19.0.0
222 | 
223 | ```
224 | 
225 | ### React Compiler
226 | 
227 | ```tsx
228 | import { memo, useState } from 'react';
229 | 
230 | const Parent = () => {
231 |   const [count, setCount] = useState(0);
232 |   const [value, setValue] = useState(0);
233 |   return (
234 |     <div>
235 |       <h1>Parent Component</h1>
236 |       <p>Count: {count}</p>
237 |       <button onClick={() => setCount(count + 1)}>Increment</button>
238 |       <Child value={value} setValue={setValue} />
239 |       {/* <OptimizedChild value={value} setValue={setValue} /> */}
240 |     </div>
241 |   );
242 | };
243 | const Child = ({
244 |   value,
245 |   setValue,
246 | }: {
247 |   value: number;
248 |   setValue: (value: number) => void;
249 | }) => {
250 |   console.log('Child rendered');
251 |   return (
252 |     <div>
253 |       <h1>Child Component</h1>
254 |       <p>Value: {value}</p>
255 |       <button onClick={() => setValue(value + 1)}>Increment</button>
256 |     </div>
257 |   );
258 | };
259 | const OptimizedChild = memo(Child);
260 | 
261 | export default Parent;
262 | ```
263 | 
264 | ```bash
265 | npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
266 | ```
267 | 
268 | eslint.config.js
269 | 
270 | ```js
271 | 
272 | import reactCompiler from 'eslint-plugin-react-compiler';
273 | 
274 | export default tseslint.config(
275 |  ...
276 |     plugins: {
277 |    ...
278 |       'react-compiler': reactCompiler,
279 |     },
280 |     rules: {
281 |      ...
282 |       'react-compiler/react-compiler': 'error',
283 |     },
284 | 
285 | );
286 | 
287 | ```
288 | 
289 | eslint.config.js
290 | 
291 | ```js
292 | import js from '@eslint/js';
293 | import globals from 'globals';
294 | import reactHooks from 'eslint-plugin-react-hooks';
295 | import reactRefresh from 'eslint-plugin-react-refresh';
296 | import tseslint from 'typescript-eslint';
297 | import reactCompiler from 'eslint-plugin-react-compiler';
298 | 
299 | export default tseslint.config(
300 |   { ignores: ['dist'] },
301 |   {
302 |     extends: [js.configs.recommended, ...tseslint.configs.recommended],
303 |     files: ['**/*.{ts,tsx}'],
304 |     languageOptions: {
305 |       ecmaVersion: 2020,
306 |       globals: globals.browser,
307 |     },
308 |     plugins: {
309 |       'react-hooks': reactHooks,
310 |       'react-refresh': reactRefresh,
311 |       'react-compiler': reactCompiler,
312 |     },
313 |     rules: {
314 |       ...reactHooks.configs.recommended.rules,
315 |       'react-refresh/only-export-components': [
316 |         'warn',
317 |         { allowConstantExport: true },
318 |       ],
319 |       'react-compiler/react-compiler': 'error',
320 |     },
321 |   }
322 | );
323 | ```
324 | 
325 | vite.config.ts
326 | 
327 | ```ts
328 | import { defineConfig } from 'vite';
329 | import react from '@vitejs/plugin-react';
330 | const ReactCompilerConfig = {};
331 | // https://vite.dev/config/
332 | export default defineConfig({
333 |   plugins: [
334 |     react({
335 |       babel: {
336 |         plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]],
337 |       },
338 |     }),
339 |   ],
340 | });
341 | ```
342 | 


--------------------------------------------------------------------------------