In this workshop, you are going to learn how to create better React components. We will start of simple and compare regular and pure functional components. Next, we will look at controlled versus uncontrolled components and when you want to use which of the two options. Then you will learn how to use the React.Fragment class to reduce the number of DOM nodes you need to create at runtime.
After the intro you will learn how to use Reacts Component componentDidCatch() lifecycle function to catch errors and make your applications more resilient to failure. We will also take a look at the sorts of errors that componentDidCatch() doesn’t catch for you.
Next you will learn about two different ways of adding cross cutting concerns like error handling to React components. First, we will look at creating higher order components like the Redux connect function. While higher order components are a great way of extending components, they aren’t without their drawbacks. So, we will investigate an alternative approach using render props. This is another great mechanism, and a more flexible approach as well.
You will also learn about various performance enhancements you can use with their tradeoffs.
Finally, you will learn how to use the new React Context that will ship with React 16.3 to make it even more convenient to pass data from one component to another