Advanced concepts that you should know in React
Blog React Advanced Concept

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.

React Lifecycle

Blog React lifecycle methods advanced
Blog React lifecycle methods advanced

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

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.

HOC (Higer Order Components)

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

It is nothing but a simple React component which catch any JavaScript error in there child tree, log the error and display a custom fallback UI instead of displaying old component tree on the web page.

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

ReactDOM.createPortal 

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.

ReactDom.createPortal(<Component/>,DomElement);

I hope you have learned advanced concepts that you should know in React.

Categories: Reactjs

1 Comment

Write your own "If" component for conditional rendering - Blog React · March 17, 2020 at 3:35 am

[…] Checkout advanced concepts that you should learn. […]

Comments are closed.