educative.io

Reintroducing React: V16 and Beyond (Ohans Emmanuel)


Introduction - Why Reintroduce React? Let's learn why we need a reintroduction. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5720279126900736). Lifecycle - What’s Lifecycle Anyway? Wondering the same thing? Let's use comics to learn what lifecycle is. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5142763194548224). The Profiler - The Ranked Chart In this lesson, we'll discuss ranked charts in detail and understand what they represent. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/4877586377211904). Lazy Loading - What is Lazy Loading? Let's dive into the details of lazy loading in this lesson. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5788689365991424). Hooks - The State Hook Let's learn about the useState hook and how to use it. You'll create your first React component with hooks. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5915207157153792). Lifecycle - Conclusion Let’s discuss which new lifecycle methods replaced the previous ones. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5295924412678144). Lifecycle - New Lifecycle Methods Are you confused about lifecycle? John is also confused, so let's unveil the truth of lifecycle. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/6361740411404288). Introduction - Why Comics? Let's lighten things up. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/4673885976920064). Lifecycle - Method 2: getSnapshotBeforeUpdate Let's discuss the "getSnapshotBeforeUpdate" method which stores the previous version of the application before uploading the changes. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5284780247613440). Lifecycle - Method 2: getSnapshotBeforeUpdate Extension in Detail This lesson is an extension of the previous lesson. We'll discuss getSnapshotBeforeUpdate components and the chat panel in more detail. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5665372566978560). Lifecycle - The Error Handling Lifecycle Methods In this lesson, we'll define the ErrorBoundary component which detects whether any error occurred because of descendant components. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5638503452901376). Lifecycle - Method 2: componentDidCatch Let’s understand the purpose of the componentDidCatch method. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5437306783662080). React.memo - How React.memo works? In this lesson, we'll discuss how React.memo works. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/4652468619182080). Context API - Introduction to Context API In this lesson, we'll look at the details of Context API. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5778711888527360). Context API - Provider and Consumer Components In this lesson, we'll explore provider and consumer components. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5683839743557632). Context API - Identifying Props being Drilled In this lesson, we will identify and understand the props drilling in our Mini-Bank Application. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/6588170818813952). Context API - Isolating Implementation Details In this lesson, we'll centralize the implementation for the user state and provider in one place. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5660182266773504). Context API - Updating Context Values In this lesson, we'll discuss the withdrawal method of the mini-bank application. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5887054552498176). Context API - Conclusion In this lesson, we'll discuss the conclusion of the chapter. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5221389483114496). ContextType - Using a Class Component with contextType In this lesson we will learn how we can use contextType within class components. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5272075734351872). Lifecycle - Method 1: static getDerivedStateFromProps In this lesson, we'll discuss a React lifecycle method in which we use state and render objects according to our example's requirement. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/6247534915747840). ContextType - Using Context without a Consumer In this lesson, we will see that issues can occur if we are using Context without consumers. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/4526368916242432). Context API - Simpler State Management with the Context API In this lesson, we'll look at particular situations where we can use the Context API. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/4874585637912576). Context API - Avoid Props Drilling with Context In this lesson, we will introduce context to our Bank Application to avoid the props drilling. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/4897626694615040). The Profiler - Getting Started In this lesson, we'll start off with an application and show how to use profiler for measuring better performance. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/6049744725999616). The Profiler - Component Stats In this lesson, we'll discuss the information given by component stats. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5221057898217472). The Profiler - Example: Identifying Performance BottleNecks in the Bank App Let's look at the bank app and how Profiler is helpful in identifying performance lags. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5003450259603456). The Profiler - Profile Different Interactions In this lesson, we'll discuss different interactions which are recorded during the profiled session. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/4861288217837568). Lazy Loading - Lazy Loading with React.lazy and Suspense In this lesson, I'll be introducing lazy loading with React.lazy and Suspense. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/6196624856449024). Lazy Loading - Adding Lazy Loading to the Bank App In this lesson, we'll add lazy loading to our bank app to increase its performance. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/6491397152571392). Lazy Loading - Conclusion Let's look at the biggest takeaways from this chapter. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5968520821080064). Hooks - Introducing Hooks Let's have a brief introduction of hooks and their importance in React. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/6357668581081088). Hooks - The Effect Hook What is the useEffect hook and how is it used to save states effect. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5678204217982976). The Profiler - How does the Profiler Work? Let's figure how Profiler works in this lesson. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/6395555326459904). React.memo - Conclusion Let's conclude the topics covered in this chapter. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/6563206690504704). Context API - Example: The Mini-Bank Application In this lesson, we'll discuss a Mini-Bank application which takes a username and password to get started. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5428722050007040). The Profiler - The Provider Value In this lesson, we'll discuss how we can use the Provider value for better performance. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5965280301809664). Hooks - The Candy Bowl - An Analogy Let's learn the importance of React hooks with an interactive example. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/6559827457212416). Hooks - Multiple useState calls Let's learn how to manage multiple useState calls and use them in a React component. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/6234023217070080). Hooks - The Rules of Hooks There are two important rules to be followed while writing hooks. Let's have a look! View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5115254264561664). Hooks - Advanced Hooks We've gotten so far, but there are still more hooks to discover. Two down but eight more to come. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5837451438325760). ContextType - Conclusion Let's conclude how contextType property solved a few of the nesting problems. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5596353314947072). React.memo - React.memo === Functional PureComponent We will discuss why refactoring is not the most suitable method for larger React apps. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/6719770999128064). React.memo - Handling Deeply Nested Props In this lesson, we'll discuss how to handle a component when nested props are used. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/6268663101390848). The Profiler - Making Sense of the Profiler Results In this lesson, let's discuss how commits are useful and how to read the information provided by them. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5882681034276864). The Profiler - Noting the Expected Behavior In this lesson, we'll discuss the working of the app along with its expected behavior. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/6196261864603648). The Profiler - Interpreting the Flamegraph Let's take a look at the flow of the Flamegraph for our bank app. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/6213580951126016). Conclusion - Where to Go from Here? Want to learn more about web development and React? I have a few other courses already on Educative! Have a look. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/4865331988267008). Lazy Loading - Using React.lazy and Suspense In this lesson, we'll discuss how using React.lazy and Suspense make things easy. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5471771446738944). Lazy Loading - Handling Errors Let's learn how to handle errors when something goes off. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5874616327208960). Lazy Loading - No Named exports In this lesson, we'll learn the alternative way for using named exports with React.lazy. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/6483797308604416). Lazy Loading - Code Splitting Routes In this lesson, we'll learn how to split routes to send a large chunk of code in different paths. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5439164055027712). Hooks - Building Simpler React Apps In this section, we'll learn about how hooks empower functional components. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5354948168515584). Hooks - Object as Initial Values In this lesson, we'll discuss the difference between setState and useState. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/6527560240332800). Hooks - Passing Array Dependencies In this lesson, we'll discuss how the useEffect function can be used for specific functionality, especially for passing arrays. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/4700888033656832). Hooks - Build Your Own Hooks Let's start with writing your first React hook. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/6126674166939648). The Profiler - Measuring Performance in React Apps In this lesson we will see how we can use Profiler to measure the performance of a React app. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5615884242518016). Introduction - What’s Changed Since Version 16? A quick look at what's been changed since React version 16. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/4806597043814400). Lifecycle - Method 1: static getDerivedStateFromError Let's define the getDerivedStateFromError method for the ErrorBoundary component in this lesson. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5784339436535808). The Profiler - Identifying Performance Bottlenecks In this lesson, we will look at a classic example of a performance bottleneck that can be detrimental. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/4659905120174080). The Profiler - The Flamegraph In this lesson, we'll discuss what information flamegraphs reveal and how to read it for each component. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/5807555412492288). The Profiler - Conclusion In this lesson, we'll wrap up what we have learned in the chapter. View the lesson [here](https://www.educative.io/collection/page/10370001/5837821073948672/6408731883470848).
About the Reintroducing React: V16 and Beyond (Ohans Emmanuel) category [Reintroducing React: V16 and Beyond (Ohans Emmanuel)] (1)