The document provides an extensive overview of various React renderers and technologies that enhance user interface development, including libraries for 3D, WebGL, and canvas applications. It also introduces concepts of concurrent mode, lifecycle methods, and hooks in React, highlighting their applications in performance optimizations. Additionally, the document references multiple GitHub repositories and demos for practical implementation examples.

1. RENDER-AS-YOU-FETCH
DEEP DIVE INTO CONCURRENT MODE
A GENTLE INTRODUCTION TO CONCURRENT MODE

2. A FRESH DESIGNE
THE FACEBOOK

3. THE FACEBOOK - DARK MODE

4. HOW TO ENABLE CONCURRENT MODE
NPM I (BECAUSE "INSTALL" IS TOO MUCH TO TYPE)

5. HOW TO ENABLE CONCURRENT MODE
THEN…

6. HOW TO ENABLE CONCURRENT MODE
NOW…

7. BACK TO THE FUTURE
REACT’S CORE ALGORITHM

8. BACK TO THE FUTURE
REACT’S CORE ALGORITHM

9. RENDERERS
HTTPS://GITHUB.COM/CHENTSULIN/AWESOME-REACT-RENDERER
• react-dom - A declarative, efficient, and flexible JavaScript library for building user interfaces.
• react-tiny-dom - A minimal implementation of react-dom using react-reconciler
• react-art - React Bridge to the ART Drawing Library.
• react-canvas - High performance canvas rendering for React components.
• react-pixi-fiber - Write PixiJS applications using React declarative style.
• react-three - React bindings to create and control a 3D scene using three.js.
• React-GL - Render React components in WebGL for 60 FPS animations.
• ReactLiberty - Connect, discover, be free to choose between WebGL / Canvas (PIXI) / DOM or any other UI renderer.
• react-vr - Render React components in WebGL/WebVR for VR apps.
• react-konsul - A react renderer that renders to the browser's devtools console.
• react-worker-dom - Experiments to see the advantages of using Web Workers to Render React Virtual DOM.
• rax - A universal React-compatible render engine.
• react-native-dom An experimental, comprehensive port of React Native to the web.
• proton-native - A React environment for cross platform native desktop apps.
• stain - [beta] rapid GUI development using familiar technologies (fat-free electron).
• React NodeGUI - Build performant, native and cross-platform desktop applications with native React + powerful CSS like styling. 🚀
• react-gtk - React Native renderer for gtk powered cross platform desktop applications that run on OSX, Linux and Windows.
• react-qml - Build native, high-performance, cross-platform applications (desktop and mobile) through a React (and/or QML) syntax.
• react-native - A framework for building native apps with React.
• react-titanium - React custom renderer for Appcelerator® Titanium™ SDK. • react-blessed - A react renderer for blessed.
• ink - React for interactive command-line apps.
• react-cli - a react renderer for the command line.

10. LIFECYCLE METHODS (START, STOP, RESTART)
LEGACY
▸ Virtual DOM (render phase)
constructors
componentWillMount
componentWillReceiveProps
shouldComponentUpdate
render
▸ Real DOM (commit phase)
componentDidMount
componentDidUpdate
componentWIllUnmount

11. LIFECYCLE METHODS (START, STOP, RESTART)
MODERN
▸ Virtual DOM (render phase)
constructors
getDerivedStateFromProps
shouldComponentUpdate
render
▸ Real DOM (commit phase)
componentDidMount
componentDidUpdate
componentWIllUnmount

12. HOOKS
USE YOUR HOOKS, LUKE

13. HOOKS VS CLASSES?
CLASSES? JAVASCRIPT? REACT?

14. DEMO
DEMO
DEMO

15. COMPONENTS
SUSPENSE
▸ Fallback (component)

16. COMPONENTS
SUSPENSE LIST
▸ revealOrder (forwards, backwards, together)
▸ tail (collapsed, hidden) (not with together)

17. DEMO 2
DEMO 2
DEMO: EPISODE 2 -
ATTACK OF THE CLONES
(OF SUSPENSE LISTS)

18. HOOKS
useTransition

19. HOOKS
useDeferredValue

20. FETCH DATA
FETCH-0N-RENDER

21. FETCH DATA
FETCH-THEN-RENDER

22. FETCH DATA
RENDER-AS-YOU-FETCH

23. FETCH DATA
RACE CONDITIONS

24. GITHUB
DEMO SOURCE
HTTPS://GITHUB.COM/ROBERUTO/MAKE-USE-OF-USE-DEFERRED-VALUE
HTTPS://GITHUB.COM/ROBERUTO/LIST-OF-SUSPENSE-MOVIES
HTTPS://GITHUB.COM/ROBERUTO/RENDER-AS-YOU-FETCH
HTTPS://GITHUB.COM/ROBERUTO/RACE-CONDITIONS

25. THANK YOU
robert.goik@tsh.io