Deep Dive Into React

a. Higher-order Components

Introduce the concept of higher-order functions, how they translate into components. Implement a `react-redux` like connect Higher-Order Components injecting our state management lib.

b. Render Props

The basic idea is that rather than have the component be responsible for doing anything special in the render method, we delegate that responsibility over to the user and give them the state and functions necessary to allow the user of the component to render what they need for their use case. We’ll show children prop as a function and how that can be used to write highly customisable UI-agnostic components.

c. Context API

Deep dive into React Context. Briefly mention previous implementation, its shortcomings and present the new Provider/Consumer pattern. Implement simple state management on top of it.

d. Compound Components

Compound components don't do much but when used together they allow you to create a complete experience. We’ll explain what they are and why we can benefit from these types of components in our libraries and apps. Together with participants we’ll write our first compound component.

e. Performance and Rendering Optimizations

Deep dive into react-devtools and Profiler, examining sample class components, pure components, React.memo() and function components with various perf issues.

f. Hooks

React Hooks is a new API introduced in React 16.7. We’ll show how to adopt your code to the newly introduced standards not only by using hooks exposed by React, but also by writing custom hooks to handle things like animations or gestures that are highly reusable.

g. Error Boundaries

Error boundaries are introduced in React 16 to solve the problem where an error in a component messes up React’s internal state, causing it to display puzzling errors on subsequent renders. We’ll use Error Boundaries as a last resort fallback for our components.

‍