# Concurrent React
---
### Fiber
React 16 re-write enabled "concurrent" rendering
---
### Concurrency
Browser UI and your code share the thread
---
### Concurrency
React can prioritise updates
---
### Coming later
![](https://i.imgur.com/U5JWDh0.jpg)
---
### Right now:
1. Suspense
2. Code-splitting components
---
### Maybe not yet:
1. Hooks!
2. React cache
---
### What's Suspense?
A way to pause rendering while waiting for async data
---
### What's Suspense?
Make SPAs more like SSR websites
---
### What's code-splitting?
Send the browser small chunks, not one huge bundle
---
### What's code-splitting?
Usually route-based; React's end-goal is every component as a chunk
---
### What're hooks?
Class killers
---
### What're hooks?
Allow function components to do more than just render from props
---
### What's React cache?
Suspense-based solution to data-fetching
---
### What's React cache?
1. Read data from cache in component render
2. React suspends and goes to fetch data
3. React puts data in cache and finishes render
4. Next time renders immediately from cache
---
### The app
---
### First: Update everything
---
#### Problem 1
### Context in classes
---
### Solution 1
https://reactjs.org/docs/context.html#classcontexttype
---
#### Problem 2
### Code-splitting and lazy-loading
---
### Solution 2
`<Suspense>` and `React.lazy()`
---
#### Problem 3
### Needing classes for state
---
### Solution 3
`useState` hook
---
#### Problem
### Doing stuff when a function component mounts
---
### Solution 4
`useEffect` hook
---
#### Problem 5
### Slow calculations during render
---
### Solution 5
`useMemo` hook
---
#### Problem 6
### Using context outside of JSX render
---
### Solution 6
`useContext` hook
---
1. Update to 16.7 alpha (16.6 if you don't need hooks)
2. Use ContextType in App.js
3. `<StrictMode>` check`
4. Wrap tree with `<Suspense>`
5. Add a `fallback` component
6. Use `React.lazy` to codesplit components
7. Swap `ReactDom.render` for `React.DOM.createRoot` to enable suspending
8. `useState`!
9. `useEffect`, `useContext` and `useMemo` for drink colour
{"metaMigratedAt":"2023-06-14T18:57:40.061Z","metaMigratedFrom":"YAML","title":"Concurrent React","breaks":"true","slideOptions":"{\"theme\":\"night\",\"transition\":\"fade\"}","contributors":"[{\"id\":\"95766997-b355-49e6-8c38-077c6a7ebb3b\",\"add\":3209,\"del\":981}]"}