In this post we are going to learn about the advanced concepts that you should know in React. Once you are done with the React basic concepts you should try learning advanced concepts in React which will help you to be more productive.
If you are totally into hooks then you can skip react lifecycle but there a lot of cases where class components are only choice for us.
A component can only be in one stage at a time. It starts with mounting and moves onto updating. It stays updating perpetually until it gets removed from the virtual DOM. Then it goes into the unmounting phase and gets removed from the DOM.
Context provides a way to pass data to component tree without manually writing props at everywhere component and there can be some cases where you are using a value let’s assume theme and you are using it in several components and for that case you manually need to pass the theme prop to every component.
Which maybe troublesome sometimes. So, avoid that props drilling problem Context is introduced.
A higher-order component is a function that takes a component and returns a new component. You may have used higher-order components, or HOCs, already. React-Redux’s
connect function, for example
const EnhancedComponent = higherOrderComponent(WrappedComponent);
Error boundaries can catch error from these places
- Render method.
- Lifecycle methods.
- Constructor method.
Error boundaries can not catch error from these places
- Error thrown in Error boundary component itself instead of there child.
- Server side rendering (SSR)
- Async code i.e setTimeout etc
- Event Handlers
By default every component is render as child of parent component in Reactjs. But there will be some cases where you need to render your component outside of the normal Dom hierarchy in those case ReactDOM.createPortal plays a big role.
I hope you have learned advanced concepts that you should know in React.