React Higher Order Function in 15 Minutes
Welcome to TechnoFunnel...
This video is focussed on the concept of Higher-Order Functions
Refer to the medium Article:
/ introduction-to-reacts-higher-order-compon...
/ mayank.gupta.6.88
Follow us on:
www.learn-javascript.in
technofunnel.in
In simple terms, a higher-order function is one that takes a function as an input parameter or returns a new function as output. In the context of React, higher-order components (HOCs) are the components that take a component as input and return another component as output.
React 16.8 introduces the concept of higher-order components. A HOC is an advanced technique for reusing the component logic. HOCs are not part of some React APIs, but the concept emerges from the compositional nature of React. Composition refers to containing one component within another.
Adding Functionality to Existing Components
Higher-order components focus on extending the functionality of the existing component. It takes a component as input and returns a new component that wraps the input component passed as a parameter. The wrapper may provide some additional data or functionality to the original component taken as the input.
Ensuring Reusability of Code
When we are working with multiple components in our application, there might be scenarios where some part of the component is reusable (for example, making an asynchronous data call). Higher-order components aim to extract the common part of the code as a part of the wrapper component, which can be reused by other components.
Higher-order components are JavaScript functions used for adding additional functionalities to the existing component. These functions are pure, which means they are receiving data and returning values according to that data. If the data changes, higher-order functions are re-run with different data input. If we want to update our returning component, we don't have to change the HOC. All we need to do is change the data that our function is using.
Higher-Order Component (HOC) is wrapping around the "normal" component and provide additional data input. It is actually a function that takes one component and returns another component that wraps the original one.
References:
https://reactjs.org/docs/higher-order...
#technofunnel #react #javascript #frontend #promises #es6 #angular #es7 #es8 #techno funnel #technology #development #async #await #asynchronous #aws #golang #Java
