Share Description
What is new in React? New lifecycle methods, context API, hooks, and a slew of other enhancements. While the fundamental principles of React have remained constant, the manner in which we write React apps has evolved with each new release. If you learned React a long time ago, it's possible that you haven't kept up with every new feature/release. It is also possible to become disoriented by all of the new features. Where do you even begin? How important are they in your daily life?
This course serves as a one-stop resource for the most important React updates since V16's release. We'll go over all of the major features of modern React so you can stay up to date on the latest changes while learning to write better software.
Syllabus :
1. Introduction
- Why Comics?
- Why Reintroduce React?
- What’s Changed Since Version 16?
2. Lifecycle
- New Lifecycle Methods
- What’s Lifecycle Anyway?
- static getDerivedStateFromProps
- getSnapshotBeforeUpdate
- getSnapshotBeforeUpdate Extension in Detail
- The Error Handling Lifecycle Methods
- static getDerivedStateFromError
- componentDidCatch
3. Context API
- Simpler State Management with the Context API
- Introduction to Context API
- Provider and Consumer Components
- Example: The Mini-Bank Application
- Identifying Props being Drilled
- Avoid Props Drilling with Context
- Isolating Implementation Details
- Updating Context Values
4. ContextType
- Using Context without a Consumer
- Using a Class Component with contextType
5. React.memo
- React.memo === Functional PureComponent
- How React.memo works?
- Handling Deeply Nested Props
6. The Profiler
- Identifying Performance Bottlenecks
- Measuring Performance in React Apps
- Getting Started
- How does the Profiler Work?
- Making Sense of the Profiler Results
- The Flamegraph
- The Ranked Chart
- Component Stats
- Example: Identifying Performance BottleNecks in the Bank App
- Noting the Expected Behavior
- Interpreting the Flamegraph
- Profile Different Interactions
- The Provider Value
7. Lazy Loading
- Lazy Loading with React.lazy and Suspense
- What is Lazy Loading?
- Using React.lazy and Suspense
- Handling Errors
- No Named exports
- Code Splitting Routes
- Adding Lazy Loading to the Bank App
8. Hooks
- Building Simpler React Apps
- Introducing Hooks
- The Candy Bowl - An Analogy
- The State Hook
- Multiple useState calls
- Object as Initial Values
- The Effect Hook
- Passing Array Dependencies
- Build Your Own Hooks
- The Rules of Hooks
- Advanced Hooks
