adding practice

Author: bradwestfall

react/core/06-context/practice/GUIDE.md

@@ -30,7 +30,7 @@ formatDate('MM')
 
 If you wish to see other formatting options: https://day.js.org/docs/en/display/format
 
-## ✅ What is a compound component?
+## What is a compound component?
 
 First, let's understand what a compound component is. It's essentially making one visual component from several React components like this:
 

react/core/08-rendering-performance/useTransition/BrowseUsers.tsx renamed to react/core/08-rendering-performance/lecture/Transitions.tsx

@@ -1,29 +1,27 @@
-import { useState, memo, useTransition, useCallback } from 'react'
-import { useUsers, type UserType } from './useUsers'
+import { useState, memo, useTransition, useCallback, useDeferredValue } from 'react'
+import { useUsers, type UserType } from './helpers/useUsers'
 import { Card } from '~/Card'
 import { Heading } from '~/Heading'
 
 // https://github.com/reactwg/react-18/discussions/41
 // https://vercel.com/blog/how-react-18-improves-application-performance
 
-console.time()
-setTimeout(() => {
-  console.timeEnd()
-}, 1000)
-
-export function BrowseUsers() {
-  const allUsers = useUsers(100) // generate 100 user objects with random "likes"
+export function App() {
+  const allUsers = useUsers(5000)
 
   const [users, setUsers] = useState(allUsers)
   const [minLikes, setMinLikes] = useState(0)
 
-  // const [pending, startTransition] = useTransition()
-  function filterUsers(minLikes: number) {
-    setMinLikes(minLikes)
+  const [pending, startTransition] = useTransition()
+  function filterUsers(newMinLikes: number) {
+    setMinLikes(newMinLikes)
 
-    console.time()
-    const filteredUsers = allUsers?.filter((u) => u.likes >= minLikes)
-    console.timeEnd()
+    if (newMinLikes !== minLikes) {
+      console.log('start')
+      console.time()
+      const filteredUsers = allUsers?.filter((u) => u.likes >= newMinLikes)
+      console.timeEnd()
+    }
 
     // setUsers(filteredUsers)
   }
@@ -53,14 +51,15 @@ export function BrowseUsers() {
           />
           <div>
             Showing: <b className="text-slate-800">{users?.length}</b> Users
-            {/* {pending && '...'} */}
+            {pending && '...'}
           </div>
         </div>
       </header>
       <hr />
       <div className="space-y-3">
         {/* Turn this into <UserList users={users} editUser={editUser} /> */}
-        {users.map((user) => {
+        <UserList users={users} />
+        {/* {users.map((user) => {
           return (
             <div key={user.id} className="flex gap-6 bg-slate-100 p-4">
               <div className="flex-1">{user.name}</div>
@@ -70,31 +69,31 @@ export function BrowseUsers() {
               </button>
             </div>
           )
-        })}
+        })} */}
       </div>
     </Card>
   )
 }
 
-// type Props = {
-//   users: UserType[]
-//   editUser(userId: number): void
-// }
-//
-// const UserList = memo(({ users, editUser }: Props) => {
-//   return (
-//     <>
-//       {users.map((user) => {
-//         return (
-//           <div key={user.id} className="flex gap-6 bg-slate-100 p-4">
-//             <div className="flex-1">{user.name}</div>
-//             <div className="flex-1">Liked Vacations: {user.likes}</div>
-//             <button className="button" onClick={() => editUser(user.id)}>
-//               Edit User
-//             </button>
-//           </div>
-//         )
-//       })}
-//     </>
-//   )
-// })
+type Props = {
+  users: UserType[]
+  // editUser(userId: number): void
+}
+
+const UserList = memo(({ users }: Props) => {
+  // const users2 = useDeferredValue(users)
+
+  return (
+    <>
+      {users.map((user) => {
+        return (
+          <div key={user.id} className="flex gap-6 bg-slate-100 p-4">
+            <div className="flex-1">{user.name}</div>
+            <div className="flex-1">Liked Vacations: {user.likes}</div>
+            <button className="button">Edit User</button>
+          </div>
+        )
+      })}
+    </>
+  )
+})

react/core/08-rendering-performance/useTransition/MainLayout.tsx renamed to react/core/08-rendering-performance/lecture/helpers/MainLayout.tsx

@@ -0,0 +1,9 @@
+import * as ReactDOM from 'react-dom/client'
+import { MainLayout } from './helpers/MainLayout'
+import { App } from './Transitions'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <MainLayout>
+    <App />
+  </MainLayout>
+)

react/core/08-rendering-performance/useTransition/useUsers.tsx renamed to react/core/08-rendering-performance/lecture/helpers/useUsers.tsx

@@ -0,0 +1,66 @@
+import { useState, useTransition } from 'react'
+
+export function App() {
+  const [nextTabIndex, setNextTabIndex] = useState(0)
+  const [tabIndex, setTabIndex] = useState(0)
+
+  const [pending, start] = useTransition()
+  function onChange(index: number) {
+    setNextTabIndex(index)
+    start(() => {
+      setTabIndex(index)
+    })
+  }
+
+  return (
+    <div>
+      <div className="bg-slate-100 rounded-md p-2 mb-5">
+        <Tab onClick={() => onChange(0)} selected={nextTabIndex === 0}>
+          Tab
+        </Tab>
+        <Tab onClick={() => onChange(1)} selected={nextTabIndex === 1}>
+          Slow Tab
+        </Tab>
+        <Tab onClick={() => onChange(2)} selected={nextTabIndex === 2}>
+          Tab
+        </Tab>
+      </div>
+      <div>
+        {!pending ? (
+          <>
+            {tabIndex === 0 && <div>First Tab</div>}
+            {tabIndex === 1 && <SlowContent />}
+            {tabIndex === 2 && <div>Last Tab</div>}
+          </>
+        ) : (
+          'Loading...'
+        )}
+      </div>
+    </div>
+  )
+}
+
+function Tab({ children, selected, onClick }: any) {
+  return (
+    <button className={selected ? 'py-3 px-5 bg-slate-300' : 'py-3 px-5'} onClick={onClick}>
+      {children}
+    </button>
+  )
+}
+
+function SlowContent() {
+  return (
+    <div>
+      {[...Array(10).keys()].map((n) => (
+        <Item key={n} />
+      ))}
+    </div>
+  )
+}
+
+function Item() {
+  // Artificially slow
+  const startTime = performance.now()
+  while (performance.now() - startTime < 300) {}
+  return <div className="text-red-500">Slow content</div>
+}

react/core/08-rendering-performance/lecture/index.tsx

@@ -0,0 +1,51 @@
+import { useState, useTransition, useDeferredValue } from 'react'
+
+export function App() {
+  const [tabIndex, setTabIndex] = useState(0)
+
+  return (
+    <div>
+      <div className="bg-slate-100 rounded-md p-2 mb-5">
+        <Tab onClick={() => setTabIndex(0)} selected={tabIndex === 0}>
+          Tab
+        </Tab>
+        <Tab onClick={() => setTabIndex(1)} selected={tabIndex === 1}>
+          Slow Tab
+        </Tab>
+        <Tab onClick={() => setTabIndex(2)} selected={tabIndex === 2}>
+          Tab
+        </Tab>
+      </div>
+      <div>
+        {tabIndex === 0 && <div>First Tab</div>}
+        {tabIndex === 1 && <SlowContent />}
+        {tabIndex === 2 && <div>Last Tab</div>}
+      </div>
+    </div>
+  )
+}
+
+function Tab({ children, selected, onClick }: any) {
+  return (
+    <button className={selected ? 'py-3 px-5 bg-slate-300' : 'py-3 px-5'} onClick={onClick}>
+      {children}
+    </button>
+  )
+}
+
+function SlowContent() {
+  return (
+    <div>
+      {[...Array(10).keys()].map((n) => (
+        <Item key={n} />
+      ))}
+    </div>
+  )
+}
+
+function Item() {
+  // Artificially slow
+  const startTime = performance.now()
+  while (performance.now() - startTime < 300) {}
+  return <div className="text-red-500">Slow content</div>
+}

react/core/08-rendering-performance/practice/App.final.tsx

@@ -0,0 +1,41 @@
+# Rendering Performance
+
+This practice has three tabs where the rendering of the second tab is significantly slower than the others. If you click on the second tab and then immediately click to one the fast tabs you'll have to wait until the slow tab finishes first before you'll see your second clicked tab show.
+
+Decide if `useTransition` or `useDeferredValue` is better suited to make this UI faster
+
+Here is the syntax for each:
+
+```js
+/****************************************
+  useTransition
+*****************************************/
+const [pending, startTransition] = useTransition()
+
+function someEvent() {
+  setState() // high priority
+  startTransition(() => {
+    setState() // low priority
+  })
+}
+
+/****************************************
+  useDeferredValue
+*****************************************/
+const [myState, setMyState] = useState()
+const myStateDeferred = useDeferredValue(myState)
+```
+
+## Task 1
+
+Make the UI faster by allowing the user to click on the slow tab then immediately click on a fast tab. Clicking the fast tab should show the fast tab soon instead of waiting for the slow tab to finish.
+
+## Bonus Task
+
+When a tab is clicked, it gets a darker background color if you pass a prop of `selected={true}`. Right now that prop is being passed but the user doesn't see the color until the tab is fully rendered. This means if we click on the slow tab, we have to wait a few seconds for it to render but also the tab's background color remains light and there's no visual queue to know we even clicked. See if you can fix this issue.
+
+Hint: you'll need another `useState`
+
+## Bonus Task
+
+When a tab is "loading", like in the case of the slow tab, it would be nice if there was a "Loading..." indicator.

react/core/08-rendering-performance/practice/App.tsx

@@ -0,0 +1,12 @@
+import * as ReactDOM from 'react-dom/client'
+import { LessonBody, LessonCard } from '~/Lesson'
+// import { App } from './App.final'
+import { App } from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <LessonBody>
+    <LessonCard className="flex-1">
+      <App />
+    </LessonCard>
+  </LessonBody>
+)