Suspense and TimeSlicing

at ReactJS Tokyo June
https://www.meetup.com/ja-JP/ReactJS-Tokyo/events/251543969/

Transcript

1. 5JNF
   4MJDJOH
   BOE
   4VTQFOTF 3FBDU+4
   5PLZP
   +VOF 
   !LPCB
   
3. 3FDBQ
   3FBDU
   'JCFS
4. w 3FBDU
   'JCFS
   JT
   BO
   VOJU
   PG
   XPSL
   㲈
   3FBDU&MFNFOU 
   w *U
   JT
   QPTTJCMF
   UP
   TUPQ
   BOE
   SFTVNF
   VQEBUFT 3FDBQ
   3FBDU
   'JCFS FiberA FiberB FiberD FiberE Commit all SideEffects Idle Time Idle Time Idle Time SideEffect SideEffect Host (DOM) FiberC Render Phase Commit Phase
5. w 3FOEFS
   1IBTF
   ʜ
   "TZOD
   w $PNNJU
   1IBTF
   ʜ
   4ZOD 3FDBQ
   3FBDU
   'JCFS FiberA FiberB FiberD FiberE Commit all SideEffects Idle Time Idle Time Idle Time SideEffect SideEffect Host (DOM) FiberC Async Sync
6. FiberC 4VTQFOE
   BOE
   3FTVNF FiberA FiberB FiberA FiberC Commit Low Priority High Priority Commit FiberA FiberB FiberC Low Priority Reuse Interrupt Suspend Resume
7. 5JNF
   4MJDJOH
8. w #MPDLJOH
   6*
   UISFBE
   JT
   BO
   BXGVM
   FYQFSJFODF
   w 5IFSF
   BSF
   NBOZ
   QFPQMF
   XIP
   VTF
   MPX
   QPXFS
   EFWJDFT
   w %FCPVODJOH
   BOE
   UISPUUMJOH
   BSF
   GPS
   MPX
   QPXFS
   EFWJDFT 5JNF
   4MJDJOH <AsyncMode> <FilterInput onChange={value => { this.setState({value}); requestAnimationFrame(() => this.setState({data: this.filterData(value)}) ); }}
9. https://github.com/facebook/react/blob/master/packages/react-dom/src/events/SimpleEventPlugin.js
10. https://react-timeslicing-demo.netlify.com/ Low Priority High Priority
11. Schedule by React Scheduler
12. https://github.com/facebook/react/commit/1e3cd332a015e312149efa36eb81c7523411cc2d#diff- bbebc3357e1fb99ab13ad796e04b69a6
13. %FNP
    IUUQTSFBDUUJNFTMJDJOHEFNPOFUMJGZDPN
    IUUQTHJUIVCDPNLPCBSFBDUUJNFTMJDJOHEFNP
14. 4VTQFOTF
15. 8IBU
    JT
    4VTQFOTF
16. https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html
17. w 4VTQFOTF
    JT
    B
    GFBUVSF
    UP
    IBOEMF
    BTZOD
    VQEBUFT
    w )551
    3FRVFTU
    w %ZOBNJD
    JNQPSU
    w 1SPNJTF
    BT
    B
    QSJNJUJWF
    w )BOEMJOH
    BTZODISPOPVT
    VQEBUFT
    BSF
    TP
    IBSEʜ
    w 4UBSU
    -PBEJOH
    "1*
    4VDDFTT
    'BJMVSFʜ
    w .BOZ
    MPBEJOH
    TQJOOFST
    KBOL
    6*
    CZ
    GBTU
    SFTQPOTFT 4VTQFOTF
18. w /P
    w 4VQQPSUJOH
    1SPNJTF
    $PNQPOFOU
    EPFTO`U
    TPMWF
    QSPCMFNT
    w )PX
    EP
    ZPV
    MJGU
    VQ
    EFQFOEFODJFT
    PG
    1SPNJTF
    $PNQPOFOUT
    JO
    BODFTUPST *T
    4VTQFOTF
    TVQQPSUJOH
    1SPNJTF
    $PNQPOFOU // How do you show loading message // until the user list has been fetched? {isLoading ? <Loading /> : <UserListPage />}
19. )PX
    EPFT
    4VTQFOTF
    XPSL
20. w 4VTQFOTF
    JT
    CBTFE
    PO
    &SSPS
    #PVOEBSJFT
    UIPVHI
    XIJDI
    UISPXT
    1SPNJTF
    JOTUFBE
    PG
    &SSPS )PX
    EPFT
    4VTQFOTF
    XPSL User Fallback Timeout throw Promise! (suspend) timeout render with fetched Data (resume)
21. 4JNQMF
    $BDIF
    1SPWJEFS
22. https://github.com/facebook/react/tree/master/packages/simple-cache-provider
23. Empty Pending Resolved Rejected read or preload throw promise return value from cache Cache load
24. )PX
    UP
    VTF
    4VTQFOTF
25. 4VTQFOTF
    "1*
    XJMM
    CF
    DIBOHFE import SimpleCacheProvider from ‘simple-cache-provider’; const cache = SimpleCacheProvider.createCache(); const userFetcher = id => SimpleCacheProvider.createResource(id => fetch(`/api/users/${id}`).then(res => res.json()); )(cache, id); const User = props => { const user = userFetcher.read(props.id); return <div>{user.name}</div>; }; const Placeholder = props => ( <React.Timeout ms={props.timeout}> {didExpire => didExpire ? props.fallback : props.children} </React.Timeout> ); <Placeholder fallback=“Loading…” timeout={200}> <User id={100} /> </Placeholder>
26. 4VTQFOTF
    "1*
    XJMM
    CF
    DIBOHFE import SimpleCacheProvider from ‘simple-cache-provider’; const cache = SimpleCacheProvider.createCache(); const routeFetcher = Component => SimpleCacheProvider.createResource(Component => import(Component).then(module => module.default); )(cache, Component); const UserPage = () => { const Component = routeFetcher.read(‘./pages/User’); return <Component />; }; const Placeholder = props => ( <React.Timeout ms={props.timeout}> {didExpire => didExpire ? props.fallback : props.children} </React.Timeout> ); <Placeholder fallback=“Loading…” timeout={1000}> <UserPage /> </Placeholder>
27. %FNP
    IUUQTSFBDUTVTQFOTFEFNPOFUMJGZDPN
    IUUQTHJUIVCDPNLPCBSFBDUTVTQFOTFEFNP
28. w 4VTQFOTF
    XJMM
    CF
    BWBJMBCMF
    JO
    W
    CZ
    EFGBVMU
    w 5IF
    pOBM
    "1*
    NJHIU
    CF
    DIBOHFE
    w :PV
    DBO
    FYQFSJNFOU
    JU
    XJUI
    B
    DBOBSZ
    WFSTJPO 4VTQFOTF $ npm install react@canary react-dom@canary simple-cache-provider
29. 5IBOL
    ZPV TQFBLFSEFDLDPNLPCB