Shalini Tewari
Shalini Tewari

@maybeshalinii

2 Tweets 4 reads Dec 17, 2023
DAY 15 of #20DaysOfReact
Topic Covered :
- Higher order components
What are Higher order components?
A higher-order component is a function that takes a component and returns a new component.
Or we can say that, A higher-order component (HOC) is like a helper function in React that makes it easier to reuse certain parts of your component code. It's not something built into React itself; it's just a technique or pattern that developers use because of the way React works.
Imagine you have a bunch of components in your app, and some of them share similar logic or behaviour. Instead of copying and pasting that same code into each component, you can create a higher-order component.
Here's how it works:
-You create a regular JavaScript function (the HOC) that takes one of your components as an input.
-Inside this function, you can add extra functionality, like handling data loading or setting up event listeners.
-Then, the HOC returns a new component that includes this extra functionality.
-Now, you can use this new component in your app just like any other component, and it automatically has the extra features you added with the HOC.
So, in simpler terms, a higher-order component is like a tool you use to easily share and reuse code among different components in your React app, making your code more efficient and maintainable.
In a nutshell, a higher-order component is a function that takes a component as its argument and returns a new component with additional props, behaviour, or other modifications. HOCs allow you to abstract and reuse logic and functionality that can be shared across multiple components. They are a way to achieve composition and separation of concerns in your React applications.
That's it for day 15, see you all tomorrow :)
Stay tuned and happy coding!🚀

Loading suggestions...