🇫🇷 React Europe 2018
Highlights from React Europe 2018: the Context API, new lifecycle methods, Suspense, Apollo, Replicated Redux, CodeSandbox and Lona.
By Dennis Bruijn · · 5 min read · #react #conference #graphql
Originally published on Medium.
I visited React Europe with my colleague Peter. The conference hold in France just like the previous years. It allowed us to learn a lot of new things about React, GraphQL, React Native, and Reason. Also, a lot of excellent product releases đź’•
Here’s a break down with the things I loved the most
React
Keynote
It all started with an all-American 🇺🇸 keynote from Ken Wheeler he told us about The state of React, probably a reference to the American State of the Union, I would vote for Ken as President of the React Community (spreading some love here 💙).
Context API
Context provides a way to pass data through the component tree without having to pass props down manually at every level. So basically teleporting data between components.
There are two main steps to set up the Context API into your application
1. add a context provider & define the data you want to store
2. use a context consumer where ever you need the data from the store
Want a code example? Head over to https://legacy.reactjs.org/docs/context.html
New lifecycle methods
We all know the current component lifecycles (componentWillMount, componentWillReceiveProps, and componentWillUpdate). These also happen to be the lifecycles that cause the most confusion within the React community. For these reasons, Facebook is going to deprecate those methods in favor of better alternatives. Those alternatives would be the following.
1. getDerivedStateFromProps is being added as a safer alternative to the legacy componentWillReceiveProps.
2. getSnapshotBeforeUpdate is being added to support safely reading properties from e.g. the DOM before updates are made.
All the legacy lifecycle methods will be available until react 17 comes around the corner, for then the lifecycle methods will be prefixed by “UNSAFE_” to indicate that they might cause issues.
Suspense
And there was React Suspense, it was everywhere, everyone was talking about it Suspense jokes everywhere, even the React Europe cup we got some Suspense stuff on it.
In short: the new feature allows you to defer rendering part of your application tree until some condition is met e.g. loading data from an endpoint or when a resource is loaded.
The mechanism basically works like this as explained by @acdlite
- in the render method, read a value from the cache.
- if the value is already cached, the render continues like normal
- if the value is not already cached, the cache *throws a promise*
- when the promise resolves, React retries where it left off
A good example of suspense would be async placeholders, here’s a code example
import React, { Fragment } from "react";
function Placeholder({ delayMs, fallbackUI, children }) {
return (
<React.Timeout ms={delayMs}>
{didTimeout => {
return (
<Fragment>
<span hidden={didTimeout}>{children}</span>
{didTimeout ? fallbackUI : null}
</Fragment>
);
}}
</React.Timeout>
);
}
export default Placeholder;
thanks to Peggy Rayzis!
▶ Watch “Keynote - @Ken_Wheeler at @ReactEurope 2018” on YouTube
The Case for Whimsy
Joshua Comeau give an awesome talk about The Case for Whimsy, we usually tend to just craft new features and fix bugs but besides that, we could also build fun things e.g. at Khan Academy, they fill the user’s screen with confetti rain when they get 100% correct on an exercise. That’s pure joy, go make something fun!
▶ Watch “The Case for Whimsy - Joshua Comeau aka @joshwcomeau at @ReactEurope 2018” on YouTube
On Apollo
Peggy Rayzis is an Open Source Engineer **@**apollographql the talk was created around the future of Apollo, what’s available right now and what’s the next big thing in the near future.
The new 2.1 version of Appolo now supports Render Props 🎉 a component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.
And of course, coming in 2018, Suspense support!
▶ Watch “A Journey Through React Apollo - Peggy Rayzis aka @peggyrayzis at @ReactEurope 2018” on YouTube
Replicated Redux
Jim Purbrick is doing awesome things in ReactVR on the Oculus team at Facebook. He showed us the potential of Redux for building networked ReactVR applications.
Redux’s reified events, serializable actions and state, middleware, side effect free functional reducers and time travel superpowers make it well suited for building simple, networked, testable decoupled simulations.
▶ Watch “Replicated Redux - Jim Purbrick aka @JimPurbrick at @ReactEurope 2018” on YouTube
A year of CodeSandbox
Ives van Hoorne is the owner of one of the most awesome products currently around, it’s called CodeSandBox, CodeSandbox is an online editor that helps you create web applications, from prototype to deployment.
CodeSandbox recently turned one year old and gave him some valuable insights he’s shared that in his talk ⬇️
▶ Watch “A year of CodeSandbox - Ives van Hoorne aka @CompuIves at @ReactEurope 2018” on YouTube
Beyond React
Devin Abbott is a software engineer working at AirbnbEng he’s currently working on Lona, a perfect fit for a gap that a lot of companies have, a bridge between design and development. Lona is a design tool that allows you to design flexible, compassable component systems and transpile these components into any language on any platform, such as Swift components on iOS, or Kotlin components on Android.
▶ Watch “Beyond React - Devin Abbott aka @dvnabbott at @ReactEurope 2018” on YouTube
Check out the Github repo https://github.com/Lona/Lona this tool is 🔥
And last but not least Bridging React Native Back to its Roots
An epic talk by @vincentrimer he’s a software engineer at Symantec he released React Native DOM an experimental, comprehensive port of React Native to the web. It’s multithreaded by default, build with the same bundler and it has the same layout behaviour as React Native on mobile.
▶ Watch “Bridging React Native Back to its Roots - Vincent Riemer (@vincentriemer) at @ReactEurope 2018” on YouTube
Check out the Github repo https://github.com/vincentriemer/react-native-dom