Suspense and TimeSlicing

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

Transcript

1. 5JNF4MJDJOHBOE4VTQFOTF
   3FBDU+45PLZP+VOF
   
   !LPCB
   

   View Slide

2. View Slide

3. 3FDBQ3FBDU'JCFS
   

   View Slide

4. w 3FBDU'JCFSJTBOVOJUPGXPSL 㲈3FBDU&MFNFOU
   
   w *UJTQPTTJCMFUPTUPQBOESFTVNFVQEBUFT
   3FDBQ3FBDU'JCFS
   FiberA FiberB FiberD FiberE Commit all SideEffects
   Idle Time Idle Time Idle Time
   SideEffect
   SideEffect
   Host
   
   (DOM)
   FiberC
   Render Phase Commit Phase
   

   View Slide

5. w 3FOEFS1IBTFʜ"TZOD
   w $PNNJU1IBTFʜ4ZOD
   3FDBQ3FBDU'JCFS
   FiberA FiberB FiberD FiberE Commit all SideEffects
   Idle Time Idle Time Idle Time
   SideEffect
   SideEffect
   Host
   
   (DOM)
   FiberC
   Async Sync
   

   View Slide

6. FiberC
   4VTQFOEBOE3FTVNF
   FiberA FiberB
   FiberA FiberC
   Commit
   Low Priority
   High Priority
   Commit
   FiberA FiberB FiberC
   Low Priority
   Reuse
   Interrupt
   Suspend Resume
   

   View Slide

7. 5JNF4MJDJOH
   

   View Slide

8. w #MPDLJOH6*UISFBEJTBOBXGVMFYQFSJFODF
   w 5IFSFBSFNBOZQFPQMFXIPVTFMPXQPXFSEFWJDFT
   w %FCPVODJOHBOEUISPUUMJOHBSFGPSMPXQPXFSEFWJDFT
   5JNF4MJDJOH
   
   onChange={value => {
   this.setState({value});
   requestAnimationFrame(() =>
   this.setState({data: this.filterData(value)})
   );
   }}
   

   View Slide

9. https://github.com/facebook/react/blob/master/packages/react-dom/src/events/SimpleEventPlugin.js
   

   View Slide

10. https://react-timeslicing-demo.netlify.com/
    Low Priority
    High Priority
    

    View Slide

11. Schedule by
    React Scheduler
    

    View Slide

12. https://github.com/facebook/react/commit/1e3cd332a015e312149efa36eb81c7523411cc2d#diff-
    bbebc3357e1fb99ab13ad796e04b69a6
    

    View Slide

13. %FNP
    IUUQTSFBDUUJNFTMJDJOHEFNPOFUMJGZDPN
    IUUQTHJUIVCDPNLPCBSFBDUUJNFTMJDJOHEFNP
    

    View Slide

14. 4VTQFOTF
    

    View Slide

15. 8IBUJT4VTQFOTF
    

    View Slide

16. https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html
    

    View Slide

17. w 4VTQFOTFJTBGFBUVSFUPIBOEMFBTZODVQEBUFT
    w )5513FRVFTU
    w %ZOBNJDJNQPSU
    w 1SPNJTFBTBQSJNJUJWF
    w )BOEMJOHBTZODISPOPVTVQEBUFTBSFTPIBSEʜ
    w 4UBSU-PBEJOH "1*4VDDFTT 'BJMVSFʜ
    w .BOZMPBEJOHTQJOOFST KBOL6*CZGBTUSFTQPOTFT
    4VTQFOTF
    

    View Slide

18. w /P
    w 4VQQPSUJOH1SPNJTF$PNQPOFOUEPFTO`UTPMWFQSPCMFNT
    w )PXEPZPVMJGUVQEFQFOEFODJFTPG1SPNJTF$PNQPOFOUT
    JOBODFTUPST
    *T4VTQFOTFTVQQPSUJOH1SPNJTF$PNQPOFOU
    // How do you show loading message
    // until the user list has been fetched?
    {isLoading ? : }
    

    View Slide

19. )PXEPFT4VTQFOTFXPSL
    

    View Slide

20. w 4VTQFOTFJTCBTFEPO&SSPS#PVOEBSJFT UIPVHIXIJDI
    UISPXT1SPNJTFJOTUFBEPG&SSPS
    )PXEPFT4VTQFOTFXPSL
    User
    Fallback
    Timeout
    throw Promise!
    (suspend)
    timeout
    render with
    fetched Data
    (resume)
    

    View Slide

21. 4JNQMF$BDIF1SPWJEFS
    

    View Slide

22. https://github.com/facebook/react/tree/master/packages/simple-cache-provider
    

    View Slide

23. Empty
    Pending
    Resolved Rejected
    read or preload
    throw promise
    return value
    from cache
    Cache
    load
    

    View Slide

24. )PXUPVTF4VTQFOTF
    

    View Slide

25. 4VTQFOTF "1*XJMMCFDIBOHFE
    
    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 {user.name};
    };
    const Placeholder = props => (
    
    {didExpire => didExpire ? props.fallback : props.children}
    
    );
    
    
    
    

    View Slide

26. 4VTQFOTF "1*XJMMCFDIBOHFE
    
    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 ;
    };
    const Placeholder = props => (
    
    {didExpire => didExpire ? props.fallback : props.children}
    
    );
    
    
    
    

    View Slide

27. %FNP
    IUUQTSFBDUTVTQFOTFEFNPOFUMJGZDPN
    IUUQTHJUIVCDPNLPCBSFBDUTVTQFOTFEFNP
    

    View Slide

28. w 4VTQFOTFXJMMCFBWBJMBCMFJOWCZEFGBVMU
    w 5IFpOBM"1*NJHIUCFDIBOHFE
    w :PVDBOFYQFSJNFOUJUXJUIBDBOBSZWFSTJPO
    4VTQFOTF
    $ npm install react@canary react-dom@canary simple-cache-provider
    

    View Slide

29. 5IBOLZPV
    TQFBLFSEFDLDPNLPCB
    

    View Slide