import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
,document.getElementById('root'));

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
+  console.log('appレンダリング')
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

useEffect(()=>{
    console.log('useEffect')
  },[])

+ export const AutoBatchEventHandler = ()=>{
+    console.log('AutoBatchEventHandler')
+    const [state1,setState1] = useState<number>(0);
+    const [state2,setState2] = useState<number>(0);

+    const onClickUpdateButton= () =>{
+       console.log(state1)
+       setState1((state1)=>state1+1)
+       console.log(state1)
+       setState2((state2)=>state2+1)
    }
+    return(
+       <div>
+            <p>Automatic Batch確認用(イベントハンドラ)</p>
+            <button onClick={onClickUpdateButton}>State更新</button>
+            <p>State1: {state1}</p>
+            <p>State1: {state2}</p>
+        </div>
+    )
+ }

import './App.css';
import { AutoBatchEventHandler } from './components/AutoBatchEventHandler';

function App() {
  return (
    <div className="App">
+      <AutoBatchEventHandler/>
    </div>
  );
}

export default App;

+ import { useState } from "react";

+ type Todo = {
+  userId: number;
+  id: number;
+  title: string;
+  completed: boolean;
+ };
+ export const AutoBatchOther = () => {
+  console.log('AutoBatchOther')
+  const [todos, setTodos] = useState<Todo[] | null>(null);
+  const [isFinishApi, setIsFinishApi] = useState<boolean>(false);

+  const onClickExecuteApi = () => {
+    fetch("https://jsonplaceholder.typicode.com/todos")
+      .then((res) => res.json())
+      .then((data) => {
+        setTodos(data);
+        setIsFinishApi(true);
+      });
+ };
+  return (
+    <div>
+      <p>Automatic Batching確認用(その他)</p>
+      <button onClick={onClickExecuteApi}>API実行!</button>
+      <p>isFinishAPi: {isFinishApi ? "true" : "false"}</p>
+      {todos?.map((todo) => (
+        <p key={todo.id}>{todo.title}</p>
+      ))}
+    </div>
+  );
+ };

import "./App.css";
- import { AutoBatchEventHandler } from './components/AutoBatchEventHandler';
+ import { AutoBatchOther } from "./components/AutoBatchOther";
function App() {
  return (
    <div className="App">
-      <AutoBatchEventHandler/>
+      <AutoBatchOther />
    </div>
  );
}

export default App;

...
const onClickAssignee = (assignee: string) => {
    setSelectedAssignee(assignee);
    //緊急性が高くない更新の関数を入れる
   startTransition(() => {
      setTaskList(filteringAssignee(assignee));
    });
  };
...

+ import {useTransition} from "react"
...
//isPendingはstartTransitionで更新している関数が反映されているかどうかを見る
// true:更新中 ,false:通常時
+ const [isPending,startTransition] = useTransition()
...
//先ほどの関数は変更なし
const onClickAssignee = (assignee: string) => {
    setSelectedAssignee(assignee);
    //緊急性が高くない更新の関数を入れる
   startTransition(() => {
      setTaskList(filteringAssignee(assignee));
    });
  };
...
 {taskList.map((task) => (
        <div
          key={task.id}
          style={{
            width: "300px",
            margin: "auto",
            background: "lavender",
+          opacity: isPending ? 0.5 : 1,
          }}
        >
          <p>タイトル:{task.title}</p>
          <p>担当: {task.assignee}</p>
        </div>
      ))}

...

- {taskList.map((task) => (
-       <div
-         key={task.id}
-         style={{
-           width: "300px",
-           margin: "auto",
-           background: "lavender",
-          opacity: isPending ? 0.5 : 1,
-         }}
-       >
-         <p>タイトル:{task.title}</p>
-         <p>担当: {task.assignee}</p>
-       </div>
-     ))}

...

+ import { Task } from "./Transition";

+ type Props = {
+   taskList: Task[];
+ };

+ export const TaskList = ({ taskList }: Props) => {
+   return (
+    <>
+       {taskList.map((task) => (
+         <div
+           key={task.id}
+           style={{ width: "300px", margin: "auto", background: "lavender" }}
+         >
+           <p>タイトル:{task.title}</p>
+           <p>担当: {task.assignee}</p>
+         </div>
+       ))}
+     </>
+   );
+ };

import { memo, useDeferredValue } from "react";
import { Task } from "./Transition";

type Props = {
  taskList: Task[];
};

export const TaskList = memo(({ taskList }: Props) => {
+ const deferrdTaskList = useDeferredValue(taskList);
  return (
    <>
      {deferrdTaskList.map((task) => (
        <div
          key={task.id}
          style={{ width: "300px", margin: "auto", background: "lavender" }}
        >
          <p>タイトル:{task.title}</p>
          <p>担当: {task.assignee}</p>
        </div>
      ))}
    </>
  );
});

import React, {lazy, Suspense} from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

...
export const ReactQuery = () => {
  //取得するデータの返り値の型を設定
  const {  isError, data } = useQuery<Album[]>(
    ["albums"],
    fetchAlbums
  );
   if (isError) return <p>エラーです</p>;
-   if (isLoading) return <p>ローディング中</p>;
  return (
    <div>
      <p>ReactQuery</p>
      {data?.map((album) => (
        <p key={album.id}>{album.title}</p>
      ))}
    </div>
  );
};

...
function App() {
  return (
    <div className="App">
+    <Suspense fallback={<p>ローディング中</p>}>
        <ReactQuery />
+    </Suspense>
    </div>
  );
}

...

...
const query = new QueryClient({
+ defaultOptions: {
+   queries: {
+     suspense: true,
+   },
+ },
});
...

//以下をインストール
yarn add react-error-boundary

...
function App() {
  return (
    <div className="App">
+    <ErrorBoundary fallback={<p>エラーです</p>}>
        <Suspense fallback={<p>ローディング中</p>}>
          <ReactQuery />
        </Suspense>
+    </ErrorBoundary>
    </div>
  );
}
...

...

function App() {
  return (
    <div className="App">
      <ErrorBoundary fallback={<p>エラーです</p>}>
        <Suspense fallback={<p>ローディング中</p>}>
          <ReactQuery />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}

export default App;

...

export const ReactQuery = () => {
  //取得するデータの返り値の型を設定
  return (
    <div style={{ display: "flex", padding: "16px" }}>
      <Sidebar />
+     <ErrorBoundary fallback={<p>Listエラーです</p>}>
+       <Suspense fallback={<p>Listローディンング中</p>}>
           <div style={{ flexGrow: 1 }}>
            <AlbumList />
           <TodoList />
          </div>
+      </Suspense>
+     </ErrorBoundary>
   </div>

...
  );
};