├── .eslintrc.cjs
├── .gitignore
├── README.md
├── bun.lockb
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
└── vite.svg
├── src
├── App.css
├── App.jsx
├── OptimisticApp.jsx
├── assets
│ └── react.svg
├── components
│ ├── ChatBubles.jsx
│ └── TopPosts.jsx
├── index.css
└── main.jsx
├── tailwind.config.js
├── vite.config.js
└── yarn.lock
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react/jsx-no-target-blank': 'off',
16 | 'react-refresh/only-export-components': [
17 | 'warn',
18 | { allowConstantExport: true },
19 | ],
20 | },
21 | }
22 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deaafrizal/react-19-optimistic-update/33b97326792b85db5080f782b868d24c78b8d5fc/bun.lockb
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "r19t",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^0.0.0-experimental-a73c3450e-20240329",
14 | "react-dom": "^0.0.0-experimental-a73c3450e-20240329"
15 | },
16 | "devDependencies": {
17 | "@types/react": "^18.2.66",
18 | "@types/react-dom": "^18.2.22",
19 | "@vitejs/plugin-react": "^4.2.1",
20 | "autoprefixer": "^10.4.19",
21 | "eslint": "^8.57.0",
22 | "eslint-plugin-react": "^7.34.1",
23 | "eslint-plugin-react-hooks": "^4.6.0",
24 | "eslint-plugin-react-refresh": "^0.4.6",
25 | "postcss": "^8.4.38",
26 | "tailwindcss": "^3.4.3",
27 | "vite": "^5.2.0"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deaafrizal/react-19-optimistic-update/33b97326792b85db5080f782b868d24c78b8d5fc/src/App.css
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | //! NO OPTIMISM
2 | import ChatBubles from "./components/ChatBubles";
3 | import { useRef, useState, useEffect } from "react";
4 |
5 | function App() {
6 | const formRef = useRef();
7 | const scrollRef = useRef();
8 | const [messages, setMessages] = useState([]);
9 |
10 | async function sendMessage(title) {
11 | const response = await fetch("http://localhost:3002/api/posts", {
12 | method: "post",
13 | body: JSON.stringify({ title }),
14 | headers: {
15 | "Content-Type": "application/json",
16 | },
17 | });
18 | const isCreated = await response.json();
19 |
20 | if (isCreated.error)
21 | return setMessages([...messages, { title, isError: true }]);
22 |
23 | setMessages([...messages, { title }]);
24 | }
25 |
26 | async function getMessage() {
27 | const response = await fetch("http://localhost:3002/api/posts");
28 | const { posts } = await response.json();
29 | setMessages(posts.data);
30 | scrollRef.current?.scrollIntoView({ behavior: "smooth" });
31 | }
32 |
33 | async function formAction(formData) {
34 | const message = formData.get("message");
35 | formRef.current.reset();
36 | await sendMessage(message);
37 | }
38 |
39 | useEffect(() => {
40 | getMessage();
41 | }, []);
42 |
43 | return (
44 |
45 |
46 |
69 |
70 | );
71 | }
72 |
73 | const styles = {
74 | wrapper: `min-h-screen flex flex-col justify-center items-center`,
75 | form: `flex flex-col gap-4 w-full max-w-sm`,
76 | input: `px-8 py-3 rounded-md border-gray-200 shadow-sm sm:text-sm mt-8`,
77 | button: `inline-block rounded bg-indigo-600 px-8 py-3 text-sm font-medium text-white transition hover:scale-110 hover:shadow-xl focus:outline-none focus:ring active:bg-indigo-500`,
78 | };
79 |
80 | export default App;
81 |
--------------------------------------------------------------------------------
/src/OptimisticApp.jsx:
--------------------------------------------------------------------------------
1 | //! WITH OPTIMISM
2 | import ChatBubles from "./components/ChatBubles";
3 | import { useOptimistic, useRef, useState, useEffect } from "react";
4 | import { useFormStatus } from "react-dom";
5 | import TopPosts from "./components/TopPosts";
6 |
7 | function OptimisticApp() {
8 | const formRef = useRef();
9 | const scrollRef = useRef();
10 | const [messages, setMessages] = useState([]);
11 |
12 | const [optimisticMessages, addOptimisticMessage] = useOptimistic(
13 | messages,
14 | (state, newMessage) => [
15 | ...state,
16 | { title: newMessage, sending: true, isError: false },
17 | ]
18 | );
19 |
20 | async function sendMessage(title) {
21 | const response = await fetch("http://localhost:3002/api/posts", {
22 | method: "post",
23 | body: JSON.stringify({ title }),
24 | headers: {
25 | "Content-Type": "application/json",
26 | },
27 | });
28 | const isCreated = await response.json();
29 |
30 | if (isCreated.error)
31 | return setMessages([...messages, { title, isError: true }]);
32 |
33 | setMessages([...messages, { title }]);
34 | }
35 |
36 | async function getMessage() {
37 | const response = await fetch("http://localhost:3002/api/posts");
38 | const { posts } = await response.json();
39 | setMessages(posts.data);
40 | scrollRef.current?.scrollIntoView({ behavior: "smooth" });
41 | }
42 |
43 | async function formAction(formData) {
44 | const message = formData.get("message");
45 | addOptimisticMessage(message);
46 | formRef.current.reset();
47 | await sendMessage(message);
48 | }
49 |
50 | useEffect(() => {
51 | getMessage();
52 | }, []);
53 |
54 | const HandleSubmit = () => {
55 | const { pending } = useFormStatus()
56 |
57 | return (
58 |
71 | );
72 | };
73 |
74 | return (
75 |
76 |
77 |
Top 3 Messages
78 |
79 |
80 |
81 |
82 |
94 |
6 | {messages
7 | ?.sort((x, y) => x.id - y.id)
8 | .map((message, i) => {
9 | if (message.isError) return
{message.title} (failed to send this message)
10 | return (
11 |
12 | {message.title}
13 | {message.sending ? (
14 | sending ⏰
15 | ) : (
16 | send ✅
17 | )}
18 |
19 | );
20 | })}
21 |
14 |
{i+1}. {m.title}
15 |