Async Renderer - What's next?

A breef about future in react async renderer

Transcript

1. Async Rendering– What’s next Matheus Clark dos Santos Monte @matheuscsmonte matheus.m@samsung.com
2. Hi! Software Engineer at Sidia instituto de ciência e tecnologia BS by Universidade do Estado do Amazonas Open source contributor to React-Ape, React-TV e Uber Kepler.gl
3. Fast react scenario • Lib != Framework • Focus -> frontend • There’s no a project template • flex • Facebook • V of MVC
4. How react works
5. React renderer
6. React Lifecycle
7. synchronous
8. For over a year, the React team has been working to implement asynchronous rendering….
9. React makes updates synchronously. Once React starts rendering, it can’t stop. What if React can make updates asynchronously so that once it start rendering, it can yield back to the browser.
10. Sneak Peek: Beyond React 16 • JSConf Iceland 2018 • Dan Abromov “With vast differences in computing power and network speed, how do we deliver the best user experience for everyone?”
13. Time slicing “We’ve built a generic way to ensure that high-priority updates don’t get blocked by a low-priority update” • React doesn’t block the thread while rendering • device is fast • device is fast -> Feels synchronous | slow -> responsive • Only final rendered state is displayed • Same declarative component model
15. Suspense • Pause any state until data is ready • Add async data to any component without “plumbing”. • Fast Network – render after tree is ready • Slow network -> precisely control the loading states • There’s both a high-level and a low-level API
17. Lifecycle changes
18. UNSAFE_* methods Legacy component lifecycles tend to encourage unsafe coding practices. They are: ocomponentWillMount ocomponentWillReceiveProps ocomponentWillUpdate Anticipate that their potential misuse may be more problematic with async rendering. Because of this, we will be adding an “UNSAFE_” prefix to these lifecycles in an upcoming release.
19. New lifecycle: getDerivedStateFromProps • Invoked after a component is instantiated as well as before it is re-rendered. getDerivedStateFromProps+componentDidUpdate =componentWillReceiveProps.
20. New lifecycle: getSnapshotBeforeUpdate getSnapshotBeforeUpdate lifecycle + componentDidUpdate = should cover all use cases for the legacy componentWillUpdate. • called right before mutations are made
21. Gradual Migration Path Version Modify Observations 16.3 Introduce aliases for the unsafe lifecycles Both the old lifecycle names and the new aliases will work in this release 16.X release Enable deprecation warning for componentWillMount, componentWillReceiveProps, and componentWillUpdate Both the old lifecycle names and the new aliases will work in this release, but the old names will log a DEV-mode warning.) 17.0 Remove componentWillMount, componentWillReceiveProps, and componentWillUpdate Only the new “UNSAFE_” lifecycle names will work from this point forward.)
22. Note and numbers for developers • if you’re a React application developer, you don’t have to do anything about the legacy methods yet. The primary purpose of the upcoming version 16.3 release is to enable open source project maintainers to update their libraries in advance of any deprecation warnings. Those warnings will not be enabled until a future 16.x release. • There’s 50,000 React components at Facebook, and there’s no plan to rewrite them all immediately.
23. Final consideration • Adapt to user’s device and network • Fast interactions fell instant • Slower interactions fell responsive • Low technical dept to adapt • Good migration plan
24. https://www.sidia.org.br/trabalhe-no-sidia/
25. github.com/matheusmonte @matheuscsmonte matheus.m@samsung.com matheuscsmonte@gmail.com