Some advanced concepts of React that you should consider learning are:
1. React Fiber internals
This is a deep dive into how React actually builds the DOM tree and updates it when the app’s state changes.
React Fiber is an internal engine change geared to make React faster and smarter. The Fiber reconciler, which became the default reconciler for React 16 and above, is a complete rewrite of React’s reconciliation algorithm to solve some long-standing issues in React.
2. Higher Order Components
This is an advanced pattern to encapsulate common behavior via Higher Order Components.
A High Order Component is basically a function that takes a component as an argument and returns a new component with some more functionality. It's much like a High Order Function, but instead of returning a function, we're returning a component. We can benefit from this pattern and use it with our components to build better components and more reusable code.
3. Render Props
This is another advanced pattern to encapsulate common behavior via Render Props.
Render Props is a technique in React for sharing code between React components using a prop whose value is a function.
React.lazy and Suspense
These are features introduced in React 16.6 that allow for code-splitting and lazy loading of components1.
4. React Hooks
This is a new feature introduced in React 16.8 that allows for the use of state and other React features without writing a class.
Are a new addition in React 16.8 that allow you to use state and other React features without writing a class. They are functions that let you “hook into” React state and lifecycle features from function components.
Some of the built-in Hooks include useState, useEffect, useContext, and useReducer.
5. React Error Boundaries
Create error boundaries that protect areas of your application from runtime errors.
Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed1. They catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them1.
Error boundaries were introduced in React v16 as a way to catch tricky errors that occur during the render phase.
Top comments (0)