by Nicolás
Of course, that when going to a workshop you learn an enormous deal of things and we shouldn’t just bore you with all in entailed. However, here are the main takeaways from Ryan Florence’s workshop:
- Imperative vs Declarative. As we already know, React enables us to program in a declarative way, which means that instead of specifying the steps needed to reach certain state we just need to “tell” React which state we want to get to and it will know how to do it. The lifecycles hooks componentDidMount() and componentDidUpdate() are the means that React provides so that we can teach a component how to react to a change. Declarative programming lets us eliminate time in the code; we don't have to think about time, we just have to think about snapshots in time, achieving the UI to be solely a function of the state. At any time in a React app, we can look at the state of the app and then look at the render methods of our components, and we should be able to predict what the screen is going render.
- Behavioral React Components: components that don't render anything but just provide some sort of behavior or state.
- Future React releases will ship with support for Async Rendering, When this happens, we will have to use the functional version of setState(), so it’s a good idea to start migrating your codebase to reflect this. Also, don’t use componentWillMount nor componentWillReceiveProps.
- componentWillUpdate() will be replaced by getSnapshotBeforeUpdate(). The only valid use case for this lifecycle method is when we need to obtain the scroll position before the UI gets updated (for example, if we need to scroll to bottom only if the user has not already scrolled up).
- A Higher Order Component is a function that returns a component. It’s a useful abstraction for when we have something shared (e.g: some piece of configuration or we want to reuse a lifecycle method).
- It’s common for a component to grow and start receiving a ton of props that modify the way the component is rendered (e.g., the DatePicker from jQueryUi). When we see a component with this characteristics, it’s probably a good opportunity to use Compound Components. Using the cloneElement() method allows us to implicitly pass props down the child components.
- Next releases of React will ship with new and powerful APIs: Suspense and Async Render. A good use case for them is: when we have several “loader spinners” while fetching data from different endpoints, if the user has a fast internet connection he will see a flash of spinners on-screen, degrading the user experience. Suspense allows us to tell React to wait for a certain period of time and if after that period of time the data has not finished loading yet, then show the spinner. This offers greater granularity to control our UI, improving user experience. Suspense was first demoed by Dan Abramov at JSConf Iceland 2018 (link to the talk)
- The last part of the workshop was dedicated to making a component accessible using the WAI-ARIA standard
